Skip to content

fix(accessibility): improve modal WAI-ARIA compliance and keyboard focus management#469

Open
KrutagyaKaneria wants to merge 1 commit into
Canopus-Labs:mainfrom
KrutagyaKaneria:fix/modal-accessibility-wai-aria
Open

fix(accessibility): improve modal WAI-ARIA compliance and keyboard focus management#469
KrutagyaKaneria wants to merge 1 commit into
Canopus-Labs:mainfrom
KrutagyaKaneria:fix/modal-accessibility-wai-aria

Conversation

@KrutagyaKaneria

Copy link
Copy Markdown

📋 Description

This PR improves the accessibility of the shared Modal component by implementing the WAI-ARIA Dialog Pattern and proper keyboard focus management.

✨ Changes Made

  • Added role="dialog" to the modal container.
  • Added aria-modal="true" for assistive technologies.
  • Added aria-labelledby using a stable ID generated with useId().
  • Improved focus management by:
    • Moving focus into the modal when it opens.
    • Restoring focus to the previously focused element when it closes.
  • Implemented keyboard focus trapping to prevent focus from leaving the modal while it is open.
  • Preserved existing Escape key functionality.
  • Preserved backdrop click behavior.
  • Kept existing animations and UI unchanged.

🎯 Benefits

  • Improves WCAG compliance.
  • Enhances keyboard accessibility.
  • Improves screen reader support.
  • Makes the shared Modal component accessible across all current and future usages.

🧪 Testing

  • Verified role="dialog" and aria-modal are applied.
  • Verified aria-labelledby correctly references the modal title.
  • Verified focus moves into the modal on open.
  • Verified keyboard focus remains trapped within the modal.
  • Verified Escape key closes the modal.GSSoC

#GSSoC
#ECSoC26

This PR is submitted as part of GirlScript Summer of Code (GSSoC) 2026.

This refactor improves code reuse and maintainability by centralizing geocoding logic within the existing GeocodeService while preserving all existing functionality. Kindly review and consider approving it if it aligns with the project's Flutter architecture and code quality goals. Thank you for your valuable feedback!

  • Verified focus returns to the triggering element after close.
  • Verified existing modal functionality remains unchanged.

Closes #465

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.

[ACCESSIBILITY] Improve Modal Component with Proper ARIA Support and Keyboard Focus Management

1 participant