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.

Sign up for GitHub

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

Jump to bottom

Keyboard focus going on hidden elements in smaller resolutions #379

Open
SatyamSetia opened this issue Oct 24, 2023 · 3 comments · May be fixed by #380
Open

Keyboard focus going on hidden elements in smaller resolutions #379

SatyamSetia opened this issue Oct 24, 2023 · 3 comments · May be fixed by #380
Assignees
@SatyamSetia

Comments

@SatyamSetia
Copy link
Member

Describe the bug
When Navigation items are opened on smaller resolutions and keyboard is used for navigation elements on the page then focus goes to page elements (which are actually hidden) after nav list.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://accessibleweb.dev/ (in mobile view)
  2. Click on hamburger menu icon on top right
  3. Use keyboard to navigate through focusable elements
  4. Focus will move to hidden elements after completing nav list

Expected behavior
Focus should not move to hidden elements.

Recording
https://github.com/AccessibleForAll/AccessibleWebDev/assets/17885747/7f25aeb7-878f-4b56-8f50-5d6b10c3d4ee
@SatyamSetia
Copy link
Member Author

Hey, @EmmaDawsonDev
Just wanted to share my interest on working this bug fix.
My proposal for the fix - Removing page content from DOM when NavPrimaryMobile component is rendered.

@EmmaDawsonDev
Copy link
Member

Hi @SatyamSetia thanks for noticing the issue. Since this is not a modal element it does not need to hold the focus and the page content should remain in the DOM. A better solution would be that the mobile menu closes when the last element is tabbed out of. This is how the theme picker element behaves. I will assign you.

@SatyamSetia
Copy link
Member Author

Acknowledged 👍

@SatyamSetia SatyamSetia linked a pull request Nov 1, 2023 that will close this issue
Open
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SatyamSetia SatyamSetia

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: close mobile nav on blur of nav list SatyamSetia/AccessibleWebDev
2 participants
@SatyamSetia @EmmaDawsonDev