Bug: Improve accessibility of sidebar navigation #4185
Open
Description
Describe the bug
The sidebar navigation and its toggle button have accessibility issues that affect keyboard and screen reader users:
- the toggle button does not have a name
- missing
aria-expanded
attribute to convey to screen reader users that activating the button will open a menu - once opened, the focus is still on the main page. It should be on the navigation or the Close button, and should stay trapped inside until the user decides to exit.
These are fixes that will allow keyboard and screen reader users access the button. There are a few other issues affecting elements inside the navigation and should be part of another ticket.
Steps to reproduce
- Go to
https://app.opensauced.pizza/
. If already on the page, just refresh. - Start pressing
tab
until you reach the navigation button. (Testing with a screen reader will announce the button just as "button".) - Press
Enter
to activate the button and open the menu. (The screen reader will not announce anything, so the user does not know that the navigation menu is open) - Press
tab
again. The focus will go to theCreate Insights
button on the main page, and not inside the navigation.