docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.78k stars 5.68k forks source link

Incorrect name and no state is defined for the ‘Hamburger’ menu button. #2308

Closed msftedad closed 11 months ago

msftedad commented 11 months ago

Bug Report

Steps to reproduce

  1. Open the URL: PWABuilder - Packaging for the Google Play Store in browser.
  2. Turn on the narrator through Ctrl+ Windows+ Enter key.
  3. Navigate to the hamburger menu through tab key.
  4. Observe the issue.

Current behaviour

Incorrect name and no state are defined for the ‘Hamburger’ menu button, Screen reader is only announcing as ‘Menu button.

Attachments:

Incorrect name and no state is defined for the ‘Hamburger’ menu button (2)

https://github.com/docsifyjs/docsify/assets/93735775/441887f2-5c74-48ad-80ce-8ad04e2971ed

Expected behaviour

Proper name and state should be defined for the ‘Hamburger’ menu button.Screen reader should announce as ‘Hamburger menu’ button 'collapsed’ when it is in collapsed state and expanded when it is in expanded state.

Other relevant information

Please create a reproducible sandbox

(https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/307qqv236)](https://docs.pwabuilder.com/#/)

Mention the docsify version in which this bug was not present (if any)

NA

paulhibbitts commented 11 months ago

Thanks very much for reporting this issue @msftedad . Re: un-merged PR #2304 might it still be possible to consider the status 'collapsed' and 'expanded' to the aria-labels for the hamburger menu element @jhildenbiddle ?

Perhaps another option instead of using a UI element name (which might not be familiar to all users) something more action-related like "Expand sidebar, button" and "Collapse sidebar, button" might be label options to consider?

jhildenbiddle commented 11 months ago

Fixed via #2254.

These updates will be available in the next release. Until then, you can verify the changes by visiting the develop branch preview.