[Navigation] Mobile navigation incorrect component pattern

[svinkle]

Issue summary

The current implementation of the Dawn theme mobile navigation component generates a disclosure pattern (show/hide). Due to the visual affordance and design of the mobile navigation component being full height/width of the viewport, the current implementation could cause a frustration or confusing user experience.

Note: this issue was raised by a Shopify merchant during an accessibility audit.

Screenshots

Current code

<details id="Details-menu-drawer-container">
  <summary
    aria-label="Menu"
    role="button"
    aria-expanded="false"
    aria-controls="menu-drawer"
  >
    <!-- Icon -->
  </summary>
  <div id="menu-drawer">
    <!-- Navigation content -->
  </div>
</details>

Steps to reproduce

1. Navigate to the Accessibility Demo Store with any mobile browser (or desktop browser with a mobile viewport.)
2. With an active screen reader, navigate to the Menu control and activate.

Behavior

Expected

• Screen reader to announce the presence of a modal window upon activation.

Actual

• Screen reader conveys a disclosure pattern (expanded/collapsed state) instead of a modal window.

Recommendation

1. Remove the aria-expanded and aria-controls attributes from the summary element
2. Add aria-modal="true", aria-label="Menu", and role="dialog" to the div#menu-drawer element
3. Add aria-haspopup="dialog" to the summary element
4. Add a new, visually hidden button with aria-label="Close menu" as the label inside the div#menu-drawer element
5. Upon activation, shift focus to the Close menu button
6. Ensure to trap keyboard foucs within the modal window
7. Dismiss the modal window upon activation of the Close menu button or Esc key press

With this change, screen readers will announce the presence of a modal window upon activation, providing a more consistent and predictable user experience.

• See details-modal.js for an example.

Recommended code

HTML

<details id="Details-menu-drawer-container">
  <summary aria-label="Menu" role="button" aria-haspopup="dialog">
    <!-- Icon -->
  </summary>
  <div id="menu-drawer" role="dialog" aria-modal="true" aria-label="Menu">
    <button type="button" aria-label="Close menu">
      <!-- Close icon -->
    </button>
    <!-- Navigation content -->
  </div>
</details>

Specifications

• Browser: Any
• OS: Any
• Component: Navigation
• WCAG Principal: Perceivable, Operable, Robust
• WCAG SC: 1.3.1 Info and Relationships, 2.4.3 Focus Order, 4.1.2 Name, Role, Value
• Severity: High
• Effort: High