- Sidebar navigation (0):
[x] Users can navigate to the sidebar area using tab.
[x] All top-level parts in the sidebar (templates and wikitext snippets) are separate tab targets.
[x] The first interactive element that can receive focus with the tab key is the template name, then the parameter search, then the parameter list.
[x] Arrow keys can be used to navigate up or down in the parameter list (1)(2). The main area should not scroll. (Only when pressing enter. This will be done via T289043.)
[x] The focus should return to the first parameter in the sidebar if users press down or (modifier key +) right arrow while focusing on the last parameter in the menu.
[x] Highlighting an unselected parameter should not add it.
[] Selection and deselection of parameters is toggled with the space key.
[] Enter makes the focus jump to the corresponding element in the main area. When the sidebar element is a template parameter, it's forced to be checked before the focus jumps.
- Specific for multi-part transclusions:
[x] One of the top-level part names in the sidebar can be select both with space and enter. It gets highlighted in blue. Only one can be selected. This selection stays when I leave the area. I can navigate to the bottom toolbar and e.g. delete or move the selected part.
[] Space does nothing but select the currently highlighted part. Enter does the same plus makes the focus jump to the content area on the right. (Same as for parameters.)
[] Assign a keyboard shortcut to the toolbar, e.g. {key Ctrl T} (Ctrl + T) would move the focus immediately to the toolbar allowing the user to directly choose which action they would like to apply to that template. **(exact shortcut TBD)**
- Main area navigation:
[x] Users should be able to navigate from the last interactive element in the sidebar to the main area using tab. (Note: See T289653 for requirements specific for screenreaders.)
[x] Users should be able to focus on the next element within the main area using tab (next interactive element, e.g. link) or modifier key + arrows (next element, e.g. message or template title if present)
- More/Less button should follow recommendations for disclosure or show/hide buttons: https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure
[] Enter and Space both "activate the disclosure control and toggles the visibility of the disclosure content."
NOTE: Ticket needs research and decision making.
**Notes:**
(0) Overall dialog navigation and detailed accessibility guidelines are not provided, since the default OOUI dialog is accessible.
(1) As discussed during Story time on July the 14th, ideally users should be able to focus on the option containing the checkbox, which would display a highlighted state, and to use arrow keys (similar to add more info) to navigate between them. A possibility would be using the ARIA role "grid" to present interactive components in a keyboard navigable list of cells. The main downside is that this solution would involve using a table element to present the parameters.
(2) We could let users know every time the focus on a parameter: "{Parameter name}. Disabled. Press `space` to enable. Press `enter` to enable and edit the parameter"