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-hidden
attribute setting on super sidebar - Add
aria-controls="super-sidebar"
attribute to sidebar toggle buttons - Add
aria-expanded
attribute to sidebar toggle buttons - Resolve Firefox not supporting inert property
- Use
gl-visibility-hidden
class to maintain transform transition - Add
gl-visibility-hidden
class 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