fix(z-modal): ensure close button appears first in focus order#637
Open
ada-workbackai wants to merge 2 commits intomasterfrom
Open
fix(z-modal): ensure close button appears first in focus order#637ada-workbackai wants to merge 2 commits intomasterfrom
ada-workbackai wants to merge 2 commits intomasterfrom
Conversation
Collaborator
|
@ada-workbackai eslint and prettier failed, please fix it |
The modal close button in shadow DOM was appearing last in the tab sequence instead of first, violating WCAG 2.4.3 (Focus Order). The browser's natural tab order placed light DOM content before shadow DOM elements, causing keyboard users to encounter content buttons before the close button, despite the close button being visually positioned first in the header. Modified the Tab key handler to explicitly manage focus order based on the focusableElements array, which correctly places shadow DOM elements (close button) before light DOM elements (content buttons). This ensures the focus sequence matches the visual order: close button → content buttons.
Address eslint padding-line-between-statements rule and prettier formatting in the focus order handler.
ada-workbackai
force-pushed
the
workbackai/fix/wcag-2.4.3-modal-focus-order
branch
from
055e71c to
00705f8
Compare
Contributor
Author
|
Pushed changes to fix the lint failures:
Also rebased on latest Ready for another look when you have a chance. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes WCAG 2.4.3 (Focus Order) by ensuring the modal close button receives focus before content buttons, matching the visual order.
Issue: The modal close button in shadow DOM appeared last in the keyboard tab sequence (CONTINUA → INDIETRO → Close button) despite being visually positioned first in the header. This violated WCAG 2.4.3 because the focus order didn't preserve the meaning conveyed by the visual layout.
Solution: Modified the Tab key handler to explicitly manage focus order based on the
focusableElementsarray, which correctly places shadow DOM elements (close button) before light DOM elements (content buttons). The focus sequence now matches the visual order: Close button → CONTINUA → INDIETRO.Test Plan
Evidence
View before/after screenshots and full audit details:
https://app.workback.ai/dashboard/issue/5159/
WCAG Reference:
2.4.3 Focus Order (Level A)