Skip to content

Modal: Implement focus trap#1067

Open
wazeerc wants to merge 1 commit intothemesberg:mainfrom
wazeerc:a11y/modal
Open

Modal: Implement focus trap#1067
wazeerc wants to merge 1 commit intothemesberg:mainfrom
wazeerc:a11y/modal

Conversation

@wazeerc
Copy link
Copy Markdown

@wazeerc wazeerc commented May 3, 2025

This PR proposes a solution to trap focus within a modal. This improves keyboard navigation and overall accessibility.

According to Focus Order (Level A) from WCAG 2.2 - A web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set within the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.

I previously submitted a similar PR to Flowbite Vue.

@zecka
Copy link
Copy Markdown

zecka commented May 5, 2025

Why not use a <dialog> html tag ?

Copy link
Copy Markdown

@codeCraft-Ritik codeCraft-Ritik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great improvement! Implementing focus trapping significantly enhances accessibility and aligns with WCAG guidelines.
Nice work ensuring proper focus flow within the modal 👍

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.

3 participants