Page MenuHomePhabricator

Allow keyboard navigation for selecting the language
Closed, ResolvedPublic2 Estimated Story Points

Description

The language selection element can't be reached when using keyboard navigation.

W3 example: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
Better example: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/

Acceptance Criteria

  • The language selection can be focused using the tab key.
  • Pressing the space bar expands the language selection menu.
  • The cursor up/down keys can be used to highlight an option.
  • The Enter and the space bar key can be used to select an option.

Event Timeline

kai.nissen set the point value for this task to 5.
AbbanWMDE updated the task description. (Show Details)
gabriel-wmde changed the point value for this task from 5 to 3.Apr 23 2024, 9:54 AM
Tanuja_Doriya moved this task from Doing to Review on the WMDE-FUN-Sprint-2024-04-23 board.
Tanuja_Doriya subscribed.

we should also do:

  • add another aria label to the drop down item: "Sprachauswahl öffnen/ open language selection" (new entry in fundraising-frontend-content)
  • add aria-haspopup=true to the item

(- research whether there is something like an aria indicator for screenreaders that tells the user that this is the language switcher/selector on the page)

gabriel-wmde changed the point value for this task from 3 to 2.May 7 2024, 10:11 AM

The alternative seems to work much better. Orca doesn't read any label in the non-radio button one. Only thing I noticed is that the screen reader on Windows reads the aria label of the globe and the "show select language menu" as one sentence, which sounds weird. Can we separate this better?