-
Notifications
You must be signed in to change notification settings - Fork 1
media modals: remove tabindex from images and tab trap #2763
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
ad1c374 to
7eb9fd6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
Improves media modal keyboard accessibility by removing an unnecessary tab stop on modal images and introducing a focus trap within the modal dialog.
Changes:
- Removed
tabIndex={0}from the modal-rendered<img>so images are no longer in the tab order. - Added
useTrapTabNavigationto the media modal wrapper to trap Tab navigation within the dialog while open. - Updated related tests to stop relying on
img[tabindex="0"]selectors and to reflect the new defaulttabIndexbehavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/app/content/components/Page/mediaModalManager.tsx |
Stops adding tabIndex to the modal image content. |
src/app/content/components/Page/mediaModalManager.spec.tsx |
Updates expectation for the modal image’s tabIndex to reflect default behavior without an explicit attribute. |
src/app/content/components/Page/MediaModal.tsx |
Adds a ref + useTrapTabNavigation to trap keyboard tabbing inside the modal dialog. |
src/app/content/components/Page/MediaModal.spec.tsx |
Minor formatting-only change. |
src/app/content/components/Page.spec.tsx |
Updates DOM queries in tests to locate the modal image via the dialog container rather than tabindex. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -83,7 +87,7 @@ const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, children }) => | |||
| overlay={true} | |||
| zIndex={theme.zIndex.highlightSummaryPopup} | |||
| /> | |||
| <ModalWrapper aria-modal='true' role='dialog' aria-label='Enlarged media'> | |||
| <ModalWrapper ref={wrapperRef} aria-modal='true' role='dialog' aria-label='Enlarged media'> | |||
Copilot
AI
Feb 12, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useTrapTabNavigation(wrapperRef, isOpen) introduces new keyboard-navigation behavior for the media modal, but the existing MediaModal.spec.tsx coverage doesn’t exercise tab trapping (e.g., Tab/Shift+Tab wrapping and ensuring focus can’t leave the dialog). Consider adding a DOM-based test (similar to mediaModalManager.spec.tsx) that opens the modal, focuses the close button, dispatches Tab/Shift+Tab keydown events, and asserts focus remains within the modal elements.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a good idea, too.
RoyEJohnson
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I adjusted the failing test. I was a little surprised it came out -1 rather than null or something, but I'm guessing that's an implicit default for image?
In any case, the behavior is as expected.
RoyEJohnson
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have to concede that Copilot makes a good point about testing the tab-trapping.
https://openstax.atlassian.net/browse/CORE-1590
https://openstax.atlassian.net/browse/CORE-1546