Change Details

- Sidebar navigation: [] (Current behavior) Users can navigate to the sidebar area (current behavior) using tab [] The first interactive element that can receive focus is the parameter search, then the parameter list [] Arrow keys can be used to navigate up or down in the parameter list, changing focus between parameters and the main dialog should also scroll as needed (1) [] The focus should return to the first parameter in the sidebar if users press down arrow (or modifier key + right arrow) while focusing on the last parameter in the menu [] Focusing an unselected parameter should not add it: the selection and deselection of parameters will be toggled using the `space` key [] Pressing tab would move the focus away from the sidebar and place it on the next interactive element or area. (2) - Main area navigation: [] Users should be able to navigate from the last interactive element in the sidebar to the main area using tab: an element wrapper (recommended) or hidden link should announce the new section to them (e.g. "edit parameters of {{template name}}") [] 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 [x] Enter and Space both "activate the disclosure control and toggles the visibility of the disclosure content." (Seems to be already working) - ... 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) This is dependent on (1): if we don't make it possible for users to navigate between params using up/down arrows, they won't be able to tab away from the sidebar unless they reach the last parameter - How do we facilitate navigation between the left and right panels? Evaluate option mentioned by Thiemo: "Space toggles the checkbox but doesn't change the focus. Enter jumps to the parameter on the right." 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"

- 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. [] Focusing 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. - Main area navigation: [] Users should be able to navigate from the last interactive element in the sidebar to the main area using tab: an element wrapper (recommended) or hidden link should announce the new section to them (e.g. "edit parameters of {{template name}}") [] 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"

- Sidebar navigation (0): [] (Current behavior) Users can navigate to the sidebar area (current behavior) using tab. [] The first interactive element that can receive focus is the parameter search, then the parameter listAll top-level parts in the sidebar (templates and wikitext snippets) are separate tab targets. [] Arrow keysThe first interactive element that can be used to navigate up or down ireceive focus with the tab key is the template name, then the parameter listsearch, changing focus betweenthen the parameters and the main dialog should also scroll as needed (1) list. [] The focus should return to the first parameter in the sidebar if users press down arrow (or modifier key + right arrow) while focusing on the last parameter in the menuArrow 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. [] Focusing an unselected parameter should not add it: the selection and deselection of parameters will be toggled using the `space` keyit. [] Pressing tab would move the focus away from the sidebar and place it on the next interactive element or area.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, (2)it's forced to be checked before the focus jumps. - Main area navigation: [] Users should be able to navigate from the last interactive element in the sidebar to the main area using tab: an element wrapper (recommended) or hidden link should announce the new section to them (e.g. "edit parameters of {{template name}}") [] 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 [x] Enter and Space both "activate the disclosure control and toggles the visibility of the disclosure content." (Seems to be already working) - ... 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) This is dependent on (1): if we don't make it possible for users to navigate between params using up/down arrows, they won't be able to tab away from the sidebar unless they reach the last parameter - How do we facilitate navigation between the left and right panels? Evaluate option mentioned by Thiemo: "Space toggles the checkbox but doesn't change the focus. Enter jumps to the parameter on the right." 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"