Skip to content

Bug: Improve accessibility of sidebar navigation #4185

Open
@CorinaMurg

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

  1. Go to https://app.opensauced.pizza/. If already on the page, just refresh.
  2. Start pressing tab until you reach the navigation button. (Testing with a screen reader will announce the button just as "button".)
  3. 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)
  4. Press tab again. The focus will go to the Create Insights button on the main page, and not inside the navigation.

Metadata

Assignees

Labels

a11yIssues related to accessibility🐛 bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions