USWDS - Modal: Restore page content when the opener has left the document - #6786
Open
vssinghh wants to merge 1 commit into
Open
USWDS - Modal: Restore page content when the opener has left the document#6786vssinghh wants to merge 1 commit into
vssinghh wants to merge 1 commit into
Conversation
Closing a modal only removed aria-hidden and data-modal-hidden from non-modal content inside an if (menuButton && returnFocus) guard. returnFocus resolves from the modal's data-opener attribute, so when the opener is no longer in the document the guard fails and the whole page stays hidden from assistive technology after the modal closes. Opening hides unconditionally, so the two paths were asymmetric. Move the restore out of the guard and leave only the focus call inside it. Closes uswds#6785
Contributor
|
✅ All commits on this PR have a verified signature. Thanks! |
chandracarney
added
the
Affects: Accessibility 🟡
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
Closing a modal now always restores screen reader access to the page. If the element that opened the modal was gone by the time it closed, page content kept
aria-hidden="true"and stayed invisible to assistive tech until reload.Breaking change
This is not a breaking change.
Related issue
Closes #6785
Problem statement
Opening a modal hides everything outside it from screen readers. Closing should undo that, but the undo sat inside
if (menuButton && returnFocus).returnFocuscomes from the modal'sdata-openerattribute. If that element isn't in the document anymore, the lookup returns null and the attributes never come off. You get no modal on screen and a page that's still entirelyaria-hidden, with no way out except a reload.Opening always hid. Closing only sometimes unhid.
Solution
Moved the unhide out of the guard so it always runs, and left
returnFocus.focus()inside it.Focus return can't work if the opener is gone, but that shouldn't keep the page hidden.
I left the
menuButtoncondition on the focus call alone. Dropping it might be fine too, but it would change focus behavior in a case unrelated to this bug. Happy to change it if you'd prefer.Testing and review
The test removes the clicked opener while the modal is open, closes it, then checks nothing is left with
data-modal-hidden. A second opener stays on the page, somenuButtonis still truthy and onlyreturnFocusis missing.npx gulp unitTests: 802 passing. Reverting the fix but keeping the test gives 800 passing, 2 failing, and the only failures are the new test. It runs twice because the spec covers a modal initialized atdocument.bodyand at the modal element.I also checked this outside the unit tests, on a static page with Playwright, against published 3.13.0 and
develop. Opener left alone restores fine, opener removed leaks, Escape leaks the same way. Can share that if useful.