Page MenuHomePhabricator

Improve keyboard navigation for Wikipedia Preview plugin
Open, LowPublic

Description

Problem

The current implementation of keyboard navigation within the Wikipedia Preview plugin skips the language selector, directly jumping to adding the preview.

Solution

Revise the plugin's keyboard navigation logic to ensure a clear and accessible flow. Steps include:
While adding a preview

  • Ensuring the Tab key progresses from the close icon to the language selector.
  • Enabling the use of arrow keys within the language selector for language selection.
  • Allowing the Enter key to confirm selections within the language selector and search results.
  • Ensuring that after selecting a language or confirming a search result, the focus moves logically to the next interactive element.

After preview is added
After the preview is added, enhance the tab navigation order to improve accessibility further. The focus should sequentially move to

  • Close icon
  • Change icon
  • Remove
  • "Continue Reading" or "Read more on Wikipedia" link.
  • Enter key need to be utilized to activate the focused option such as executing action for Close, Change, Remove buttons, or following the "Continue Reading" or "Read more Wikipedia" links.
Test Scenarios
  • A user can tab to the Language selector after opening the Wikipedia Preview tool, select a language with arrow keys, and confirm with Enter.
  • After selecting a language, tabbing continues to the list of search results, where a user can select an article with arrow keys and confirm with Enter to add the preview.
  • Verify that pressing Tab after a preview is added moves focus in the sequence: Close icon, Change, Remove, and "Continue Reading"/"Read more on Wikipedia.
  • Confirm that pressing Enter activates the focused option, whether it's closing the preview, opening the edit options, or navigating to the Wikipedia page.
Acceptance Criteria
  • Tabbing order logically progresses from the close icon to the language selector, and then to search results.
  • The Enter key can be used to select and confirm the language, search results, and adding the preview.
  • Arrow keys allow selection within the Language selector dropdown.
  • After a preview is added, the tabbing order and Enter key functionality must allow users to interact with the Close icon, Change, Remove options, and "Continue Reading"/"Read more on Wikipedia" link efficiently.