SC1410 / 211 -- Reflow and zoom issues with menu

[damiansian]

URL

https://demo.fileyourstatetaxes.org/

Issue

When the page is zoomed to 400%, the mobile menu appears.

Mobile menu issues

• The menu is not keyboard accessible.
• The menu appears at a breakpoint where the other nav items are also visible
• Focus doesn't move to the X close button.
• The overlay cannot be scrolled vertically.

WCAG

SC 1.4.10: Reflow (Level AA)
SC 2.1.1: Keyboard (Level A)

User Impact

For users who rely on zooming in on the content in a webpage, we have to ensure all functionality and content remains intact.

Suggested fix

Refer to either:

• https://pauljadam.com/demos/hamburger-menu.html or
• https://techservicesillinois.github.io/accessibility/examples/responsive-nav.html

Current

<a 
   data-component="ClientMenuTrigger" 
   class="client-menu-trigger is-desktop-hidden toolbar__item text--small">
Menu
</a>