Page MenuHomePhabricator

Keyboard navigation is broken for watchstar popover
Open, In Progress, Needs TriagePublicBUG REPORT

Description

When tabbing through a wiki page's nagivation links, activating the watchstar (or watch link) correctly opens the popover but does not transfer keyboard focus to the first field in the popover. This is marked as a todo in the code.

The expiry field should be focused when the popover opens, and in general terms the first field should be focused (which may be the expiry, the labels, or just the unwatch button, depending on configuration).

Tabbing back out of the popover should refocus the watchstar, and pressing enter on that should close the popover.


Derived Requirement

  1. Activating the watchstar popover using keyboard input must automatically move focus to the first interactive element within the popover.
  2. The first focusable element must be context-aware and may be the expiry field, labels field, or unwatch button depending on configuration.
  3. Keyboard navigation within the popover must allow users to tab through all interactive elements in a logical order.
  4. Tabbing out of the popover must return keyboard focus to the watchstar control.
  5. Activating the watchstar control again using the keyboard must close the popover.
  6. The watchstar popover must remain fully operable using keyboard-only interaction without requiring a mouse.

Test Steps

Test Case 1: Verify focus moves to first field when popover opens via keyboard

  1. Open any wiki page.
  2. Use the Tab key to navigate to the watchstar control.
  3. Press Enter to activate the watchstar.
  4. Observe focus immediately after the popover opens.
  5. ✅❓❌⬜ AC1: Keyboard focus moves to the first interactive element in the popover when it opens.

Test Case 2: Verify correct element receives initial focus based on configuration

  1. Open any wiki page.
  2. Navigate to the watchstar control using Tab.
  3. Press Enter to open the popover.
  4. Identify which elements are present (expiry field, labels, or unwatch button).
  5. Observe which element receives focus.
  6. ✅❓❌⬜ AC2: The first available interactive element in the popover receives focus based on configuration.

Test Case 3: Verify tab navigation within the popover

  1. Open any wiki page.
  2. Navigate to and activate the watchstar using keyboard input.
  3. Use the Tab key to move through all elements inside the popover.
  4. Observe the order of focus movement.
  5. ✅❓❌⬜ AC3: Keyboard focus moves through all popover elements in a logical and sequential order.

Test Case 4: Verify focus returns to watchstar after tabbing out

  1. Open any wiki page.
  2. Activate the watchstar popover using keyboard input.
  3. Press Tab repeatedly until focus exits the popover.
  4. Observe where focus lands after exiting.
  5. ✅❓❌⬜ AC4: Focus returns to the watchstar control after tabbing out of the popover.

Test Case 5: Verify pressing Enter on watchstar closes the popover

  1. Open any wiki page.
  2. Activate the watchstar popover using keyboard input.
  3. Tab out of the popover to return focus to the watchstar.
  4. Press Enter on the watchstar.
  5. Observe popover behavior.
  6. ✅❓❌⬜ AC5: Pressing Enter on the watchstar closes the popover when it is open.

Test Case 6: Ensure accessibility behavior remains functional with browser zoom enabled

Set browser zoom to 200%.
Navigate to an article page using keyboard navigation only.
Open and navigate through the watchstar popover.
Observe focus visibility and keyboard navigation behavior.
✅❓❌⬜ AC6: Keyboard focus remains visible and navigation behavior remains functional at increased browser zoom levels.

Test Case 6: Verify full keyboard-only interaction with watchstar popover

  1. Open any wiki page.
  2. Use only the keyboard to navigate to the watchstar.
  3. Open the popover using Enter.
  4. Interact with fields inside the popover using Tab and keyboard input.
  5. Exit and close the popover using keyboard controls.
  6. ✅❓❌⬜ AC7: The watchstar popover can be fully operated using keyboard-only interaction without loss of functionality.

QA Results -Beta

Details

Event Timeline

Change #1276515 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/core@master] Watchstar popover: Handle tabbing into and out of the popover

https://gerrit.wikimedia.org/r/1276515

Samwilson added a subscriber: TheresNoTime.

@TheresNoTime This is ready for review. I went with the idea that while the popover is open you should be able to tab through all of its focussable elements, returning to the watchstar (and shift-tabbing goes the other way around). Then, to get back to the normal tab flow, clicking enter on the watchstar closes the popover (which was raised in T423013). See what you think.

Change #1276515 merged by jenkins-bot:

[mediawiki/core@master] Watchstar popover: Handle tabbing into and out of the popover

https://gerrit.wikimedia.org/r/1276515

@Samwilson Can you review AC3-AC5? This is more on validating if the process is correct, thanks!

Test Result - Beta

Status: ✅ PASS / ❓ Need More Info
Environment: Beta
OS: macOS Tahoe 26.4.1
Browser: Chrome 147
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.beta.wmcloud.org/wiki/Polar_bear
Test Steps

Test Case 1: Verify focus moves to first field when popover opens via keyboard

  1. Open any wiki page.
  2. Use the Tab key to navigate to the watchstar control.
  3. Press Enter to activate the watchstar.
  4. Observe focus immediately after the popover opens.
  5. AC1: Keyboard focus moves to the first interactive element in the popover when it opens.

Test Case 2: Verify correct element receives initial focus based on configuration

  1. Open any wiki page.
  2. Navigate to the watchstar control using Tab.
  3. Press Enter to open the popover.
  4. Identify which elements are present.
  5. Observe which element receives focus.
  6. AC2: The first available interactive element in the popover receives focus based on configuration.

Test Case 3: Verify tab navigation within the popover

  1. Open any wiki page.
  2. Navigate to and activate the watchstar using keyboard input.
  3. Use the Tab key to move through all elements inside the popover.
  4. Observe the order of focus movement.
  5. AC3: Keyboard focus moves through all popover elements in a logical and sequential order.

When I click "Enter" to Watch, the popup appears. I have to than click "Tab" to focus on the Watchlist time period: dropdown box. To open the dropdown box I have to select "Enter". To select a time period, it's not "Tab" but up and down arrows to move through the options. Is that the correct process?

Test Case 4: Verify focus returns to watchstar after tabbing out

  1. Open any wiki page.
  2. Activate the watchstar popover using keyboard input.
  3. Press Tab repeatedly until focus exits the popover.
  4. Observe where focus lands after exiting.
  5. AC4: Focus returns to the watchstar control after tabbing out of the popover.

After Tab repeatedly when the popover, it clicks on the dropdown box, click "Tab" again, it does nothing, click "Tab" again it goes to the URL and starts from the top as seen in the video. Just confirming is that what you want?

Test Case 5: Verify pressing Enter on watchstar closes the popover

  1. Open any wiki page.
  2. Activate the watchstar popover using keyboard input.
  3. Tab out of the popover to return focus to the watchstar.
  4. Press Enter on the watchstar.
  5. Observe popover behavior.
  6. AC5: Pressing Enter on the watchstar closes the popover when it is open.

After tabbing out of the popover, it goes to the URL. If I click "Enter" over or select an option using the arrows and click "Enter", it does not close the popover. It just opens the dropdown box a number of times before it timely disappears, as seen in the vvideo.

Test Case 6: Ensure accessibility behavior remains functional with browser zoom enabled

  1. Set browser zoom to 200%.
  2. Navigate to an article page using keyboard navigation only.
  3. Open and navigate through the watchstar popover.
  4. Observe focus visibility and keyboard navigation behavior.
  5. ✅ AC6: Keyboard focus remains visible and navigation behavior remains functional at increased browser zoom levels.

Test Case 7: Verify full keyboard-only interaction with watchstar popover

  1. Open any wiki page.
  2. Use only the keyboard to navigate to the watchstar.
  3. Open the popover using Enter.
  4. Interact with fields inside the popover using Tab and keyboard input.
  5. Exit and close the popover using keyboard controls.
  6. AC7: The watchstar popover can be fully operated using keyboard-only interaction without loss of functionality.

As long the process above is correct, then this passes

GMikesell-WMF changed the task status from Open to In Progress.Mon, May 11, 8:23 PM
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from QA to In Development on the Community-Tech (Fox Squad) board.