Initially submitted by @Etonkovidova in: T402872#11153884:
(1) Test case 1: Navigating with Tab
(1.2) Clicking Tab to navigate to the the gallery makes the whole element become selected. After that clicking on Enter or spacebar do not have any effect. Another Tab click will select the first image. The issue is present only on FF (Firefox 141 was tested)
Focus should immediately go to the first thumbnail
(2) Test case 2: Focusing on elements
(2.2) There are unreachable controls/options Share/Copy
 |  |
Popover controls should also be focusable right after they've been opened
(2.3) Clicking on x button (to return to the article page) results in lost focus
I'm unsure whether focus should return to the original image that was used to open the overlay, or to the last one that was visible in detail (in case another image was selected in VTOC); up to whoever implements this to think this through :)
Other potential improvements
We may want to improve the keyboard navigation of the Carousel component so that left and right keyboard arrows can be used to move between carousel items. Relatedly, we could update behavior of this component so that focus is always received on a specific image within the carousel (as opposed to the carousel as a whole) – this might provide a more intuitive user experience. Both of these behaviors are implemented by the Codex Tabs component (and the OOUI tab widget before that), so it should be easy to port over some relevant Vue code.
Requirement
Ensure complete keyboard accessibility for the Image Browsing carousel and overlay in the Minerva skin. Keyboard users must be able to navigate to the carousel, move between images, open and close the overlay, and reach interactive elements inside popovers using standard keyboard controls. Focus management must restore focus to the originating carousel item when the overlay is closed. Behavior must remain consistent in RTL (right-to-left) languages such as Hebrew and Arabic.
BDD
Feature: Keyboard accessibility for Image Browsing carousel and overlay
Scenario: Navigating carousel and overlay via keyboard
Given the user is viewing an article with Image Browsing enabled on Minerva
When the user navigates using the Tab key
Then the carousel component receives focus
And arrow keys move focus between carousel items
And pressing Enter opens the overlay
And pressing Escape closes the overlay
And focus returns to the previously selected carousel item
And Tab navigation reaches content inside popover widgets within the overlay
And behavior remains consistent under RTL languagesTest Steps
Test Case 1: Verify keyboard navigation in carousel and overlay
- Open https://en.wikipedia.beta.wmcloud.org/wiki/Paris?imageBrowsing=1&useskin=minerva
- Use the Tab key to navigate to the carousel component
- Use arrow keys to move between carousel items
- Press Enter to open the overlay
- Press Escape to close it
- AC1: Focus initially lands on the carousel container via keyboard
- AC2: Arrow keys move focus between carousel items
- AC3: Enter key opens overlay
- AC4: Escape key closes overlay
- AC5: Focus returns to the original carousel item after overlay close
- AC6: Tab key reaches all interactive elements in popover widgets within Detail View
- AC7: Keyboard navigation functions consistently in RTL languages (add &uselang=he or &uselang=ar to the URL)
Acceptance criteria
- Keyboard navigation through tab does not focus the carousel container but goes straight to the first thumbnail (in Firefox)
- All controls in Overlay Detail are accessible by keyboard, including those inside the share/copy popovers
- Existing the Overlay returns focus to the carousel thumbnail