Skip to content

feat(AprBreakdown): add visible focus-visible outline on interactive elements - #898

Open
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:fix/apr-breakdown-focus-visible-835
Open

feat(AprBreakdown): add visible focus-visible outline on interactive elements#898
waterWang wants to merge 1 commit into
Creditra:mainfrom
waterWang:fix/apr-breakdown-focus-visible-835

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Add visible focus-visible outline on every interactive element in the AprBreakdown component, using the project's shared focus-ring design tokens.

Changes

  • focus.css: Added AprBreakdown-scoped focus-visible rules for .apr-breakdown__toggle and .apr-breakdown__component-expand, using shared --focus-ring-width, --focus-ring-color, and --focus-ring-offset tokens
  • AprBreakdown.css: Removed hardcoded :focus-visible rules (now handled by focus.css)
  • focus.test.tsx: Added 4 tests verifying AprBreakdown focus rules exist, use shared tokens, and have correct border-radius

Tests

  • All 13 AprBreakdown tests pass
  • All 4 new AprBreakdown focus tests pass
  • All existing focus.css tests pass (4 pre-existing Dashboard test failures are unrelated)

Closes #835

…elements

Move hardcoded :focus-visible styles from AprBreakdown.css to
centralized focus.css, using shared design tokens.

Changes:
- Add AprBreakdown focus-visible rules to focus.css with shared
  --focus-ring-width, --focus-ring-color, --focus-ring-offset tokens
- Remove hardcoded focus-visible rules from AprBreakdown.css
- Add tests for AprBreakdown focus rules in focus.test.tsx

Closes Creditra#835
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add visible focus-visible outline on AprBreakdown interactive elements [b#022]

1 participant