Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Improve accessibility of sidebar navigation #4185

Open
CorinaMurg opened this issue Oct 28, 2024 · 6 comments
Open

Bug: Improve accessibility of sidebar navigation #4185

CorinaMurg opened this issue Oct 28, 2024 · 6 comments
Assignees
Labels
a11y Issues related to accessibility 🐛 bug Something isn't working

Comments

@CorinaMurg
Copy link
Contributor

CorinaMurg commented Oct 28, 2024

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.
@CorinaMurg CorinaMurg added 🐛 bug Something isn't working 👀 needs triage labels Oct 28, 2024
Copy link
Contributor

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please comment on this issue.

For full info on how to contribute, please check out our contributors guide.

@CorinaMurg CorinaMurg changed the title Bug: Bug: Improve accessibility of sidebar navigation Oct 29, 2024
@nickytonline
Copy link
Member

nickytonline commented Oct 29, 2024

Would you like to with in this @CorinaMurg ? If so, feel free to .take it.

Copy link
Contributor

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

1 similar comment
Copy link
Contributor

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

Copy link
Contributor

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

@nickytonline nickytonline added the a11y Issues related to accessibility label Oct 29, 2024
@CorinaMurg
Copy link
Contributor Author

.take

CorinaMurg added a commit to CorinaMurg/open-sauced_app that referenced this issue Nov 14, 2024
…ans with aria-hidden

wrap lucide icons (used for open and close sidebar buttons) in spans with aria-hidden

fix open-sauced#4185
CorinaMurg added a commit to CorinaMurg/open-sauced_app that referenced this issue Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issues related to accessibility 🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants