[Header] Hidden mobile content focusable

[svinkle]

Issue summary

When a mobile submenu is active, visually hidden links below the currently visible menu are discoverable when using swipe navigation or the virtual cursor. This may result in a confusing user experience for screen reader users who should only be able to access the current set of visible links.

Screenshots

Steps to reproduce

1. Go to a Dawn theme store with any supported mobile browser
2. Open the main navigation, then a sub-navigation section
3. With an active screen reader, navigate through the content via swipe gestures

Behavior

Expected

• Only visible content to be discoverable.

Actual

• Links "under" the current set of visible links are discoverable using swipe gestures.

Recommendation

Set any underlying content as visibility: hidden in order to prevent discoverability.

Specifications

• Browser: Any
• Dawn version: 2.2.0
• Component: Collection page
• WCAG Principal: Operable
• WCAG SC: 2.4.3: Focus Order
• Severity: Medium
• Effort: High