Skip to content

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 singular findToggle()
  • 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

CleanShot_2023-01-24_at_17.50.44_2x

  • 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.

Related to #394972 (closed)

Edited by Scott de Jonge

Merge request reports

Loading