Skip to content

Super sidebar menu section button aria-expanded

What does this MR do and why?

Add aria-expanded to the <button> in menu_section.vue to provide audible feedback to screen-readers that a toggle button is expanded or not when reading through menu items.

Chnages

  • Remove <section> elements from menu
  • Restore aria-expanded attribute on menu section buttons
  • Restore aria-controls attribute on menu section buttons
  • Restore gl-mb-1 on menu section buttons
  • Add tests for aria-controls and aria-expanded attributes

Screenshots or screen recordings

Before After
CleanShot_2023-04-28_at_15.43.22 CleanShot_2023-04-28_at_15.42.02
127.0.0.1_3000_dashboard_todos 127.0.0.1_3000_dashboard_todos__1_
127.0.0.1_3000_dashboard_merge_requests_assignee_username_root__1_ 127.0.0.1_3000_dashboard_merge_requests_assignee_username_root

How to set up and validate locally

  1. Enable super sidebar (if not currently on)
    1. In rails c enable feature flag Feature.enable(:super_sidebar_nav)
    2. Toggle on "new navigation" in user menu
  2. Toggle menu section with screen-reader
  3. Review spacing between nav items

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 #408938 (closed)

Merge request reports

Loading