Skip to content

Standardize focus trap and keyboard closing across overlays #103

@josephchimebuka

Description

@josephchimebuka

Category

accessibility

Labels

frontend, a11y, modals, navigation

Difficulty

intermediate

Why this matters

Overlay components have inconsistent keyboard/focus behavior, impacting accessibility and usability.

Likely files/components affected

  • src/components/ProfileSettingsModal.tsx
  • src/components/NotificationsPanel.tsx
  • src/components/Header.tsx (mobile menu)

What contributor should improve

Implement consistent focus trapping, escape-to-close, and focus return behavior.

Expected final behavior

All overlays are predictably usable with keyboard only.

UI/UX goals

  • Accessibility compliance
  • Better interaction confidence
  • Cleaner navigation behavior

Acceptance criteria

  • Focus trap in modal/panel contexts where needed
  • Escape closes overlays consistently
  • Focus returns to opener element
  • No regressions in pointer interactions

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programenhancementNew feature or requestfrontendFrontend/Stellar wave trackingstellar wave 5Stellar Wave 5 contributor batch

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions