Skip to content

Conversation

@jivey
Copy link
Member

@jivey jivey commented Feb 9, 2026

@jivey jivey requested a review from a team as a code owner February 9, 2026 20:10
@jivey jivey requested a review from RoyEJohnson February 9, 2026 20:10
@TomWoodward TomWoodward temporarily deployed to rex-web-core-1590-remov-hz8uqv February 9, 2026 20:10 Inactive
@jivey jivey marked this pull request as draft February 9, 2026 20:26
@jivey jivey temporarily deployed to rex-web-core-1590-remov-hz8uqv February 9, 2026 23:05 Inactive
@jivey jivey temporarily deployed to rex-web-core-1590-remov-hz8uqv February 10, 2026 13:41 Inactive
@jivey jivey marked this pull request as ready for review February 10, 2026 14:49
@jivey jivey changed the title remove tabindex from images in media modals media modals: remove tabindex from images and tab trap Feb 10, 2026
@jivey jivey requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 15:48 Abandoned
@jivey jivey requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 15:57 Abandoned
@RoyEJohnson RoyEJohnson force-pushed the CORE-1590-remove-tabindex-modal-image branch from ad1c374 to 7eb9fd6 Compare February 12, 2026 16:27
@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 16:28 Abandoned
@RoyEJohnson RoyEJohnson requested a review from Copilot February 12, 2026 16:32
Copy link
Contributor

Copilot AI left a 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 useTrapTabNavigation to 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 default tabIndex behavior.

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.

Comment on lines 79 to 90
@@ -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'>
Copy link

Copilot AI Feb 12, 2026

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.

Copilot uses AI. Check for mistakes.
Copy link
Contributor

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.

Copy link
Contributor

@RoyEJohnson RoyEJohnson left a 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.

Copy link
Contributor

@RoyEJohnson RoyEJohnson left a 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.

@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 16:43 Abandoned
@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 17:18 Abandoned
@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 18:13 Abandoned
@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 18:39 Abandoned
@TomWoodward TomWoodward requested a deployment to rex-web-core-1590-remov-hz8uqv February 12, 2026 21:29 Abandoned
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