Fix #1409 -- Add Keyboard Accessibility To Hamburger Menu

[ontowhee]

Fix for #1409

This changes the menu button from a div to a button element so the keyboard is able to tab to it. The border is set to 0 to override the default button border style.

Before - It wasn't able to tab to the menu button

After - It is able to tab to the menu button with the red border around it

Other notes

• When you tab to the menu it should be obvious you're on it (look how the dark mode button works), probably using css :focus selector It already shows a red outline when you tab to it.
• When you hit space it should activate, again like the dark mode toggle It already does open/close the menu when you hit SPACE or ENTER.
• When the menu is open, the first time we press the tab key, it should bring the focus to the first menu item on the list. Right now it jumps to the light/dark theme button.
• Should the menu button be in a nav element?
• Should there be aria-expanded and aria-label attributes on the menu button?
• When the menu is closed and you hit tab, should the focus go first to the light/dark theme button, and then to the menu button?

[knyghty]

@thibaudcolas what do you think?

This doesn't fix the issue that you can tab through the links without expanding the nav but this still seems like an improvement.

[thibaudcolas]

Working great! Thank you @ontowhee

[ontowhee]

@thibaudcolas @CuriousLearner Thank you for the approval! Do we want to create an issue for the "Other Notes" mentioned in the description above?

Is this a duplicate of PR #1400?

[thibaudcolas]

When the menu is open, the first time we press the tab key, it should bring the focus to the first menu item on the list. Right now it jumps to the light/dark theme button.

Yes – please open an issue

Should the menu button be in a nav element?

I don’t think it matters too much

Should there be aria-expanded and aria-label attributes on the menu button?

aria-expanded definitely

When the menu is closed and you hit tab, should the focus go first to the light/dark theme button, and then to the menu button?

I’d expect the focus to go first to a "Skip link" on the page (#1367), then to the Django logo, then theme toggle, then menu toggle.