Super sidebar collapse button improve accessibility
What does this MR do and why?
Firefox does not support the inert HTML attribute, previous usage of aria-hidden did not work as expected for interactive elements within the super sidebar. When collapsed these were still exposed to keyboard tab and DOM searches in Firefox. When keyboard users toggled super sidebar visibility focus needs to be moved to the relative toggle button.
Changes
- Move focus to "Expand sidebar" button when "Collapse sidebar" pressed
- Remove
aria-hiddenattribute setting on super sidebar - Add
aria-controls="super-sidebar"attribute to sidebar toggle buttons - Add
aria-expandedattribute to sidebar toggle buttons - Resolve Firefox not supporting inert property
- Use
gl-visibility-hiddenclass to maintain transform transition - Add
gl-visibility-hiddenclass on component mount - Replace
findToggles()with singularfindToggle() - Update spec tests
Screenshots or screen recordings
| Before | After |
|---|---|
| CleanShot_2023-03-23_at_16.10.30 | CleanShot_2023-03-23_at_16.09.23 |
How to set up and validate locally
- Enable the feature flag in rails console with
rails c
Feature.enable(:super_sidebar_nav)
- Enable the "New navigation" setting toggle from the user dropdown
- Toggle super sidebar being collapsed
- Focus should be moved to the toggle button when collapsing
- Focus should be moved to the sidebar whemn expanding
- Firefox should not have sidebar contents in tabindex when collapsed
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #394972 (closed)
Edited by Scott de Jonge
