search

AccessibleForAll / AccessibleWebDev

A resource for developers wanting to learn the basics of accessibility
https://accessibleweb.dev
MIT License
172 stars 95 forks source link

Keyboard focus going on hidden elements in smaller resolutions #379

Open SatyamSetia opened 10 months ago

SatyamSetia commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

Acknowledged 👍