- Sidebar navigation (0):
- Users can navigate to the sidebar area using tab.
- All top-level parts in the sidebar (templates and wikitext snippets) are separate tab targets.
- The first interactive element that can receive focus with the tab key is the template name, then the parameter search, then the parameter list.
- 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.)
- 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.
- 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:
- 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.)
- Keyboard shortcuts moved to T290262: Add keyboard shortcuts for VE template dialog
- Main area navigation:
- 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.)
- 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."
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"