fix: enhance accessibility for sidebar toggle button

[sy-records]

Summary

Related issue, if any:

Fix #2599

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

For any code change,

• Related documentation has been updated, if needed
• Related tests have been added or updated, if needed

Does this PR introduce a breaking change?

• Yes
• No

Tested in the following browsers:

• Chrome
• Firefox
• Safari
• Edge

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docsify-preview	Ready	Preview	Comment	Sep 17, 2025 9:08am

[sy-records]

@msftedad Could you please test it at https://docsify-preview-git-fork-sy-records-fix-2599-docsifyjs.vercel.app/preview/#/?

[msftedad]

@sy-records, As verified this issue in docsify. We observed that when the screen reader first focuses on the control, it announces 'Toggle Primary navigation button '. After pressing Enter or Space to hide or show the left navigation, the screen reader announces, 'Show primary navigation/Hide primary navigation, button, '.

As discussion with the PWD team, they recommended that when the screen reader initially focuses on the control, it should announce the button's accessible label as 'Hide primary navigation', indicate its role as a button, and provide the shortcut key hint, such as 'Use shortcut key '.

Please let us know if you need any further information. Thanks

[sy-records]

Thank you for your feedback. I've made the changes.

[paulhibbitts]

Thanks @sy-records @msftedad , testing on Mac OS and VoiceOver things look good and hopefully @msftedad can confirm the latest change.

[msftedad]

Hi @paulhibbitts,
Currently, the screen reader announces: "Hide primary navigation, Use shortcut key , button, " because the shortcut hint is included within the aria-label along with aria-keyshortcuts.

To fix this, set them separately as:
aria-label="Hide primary navigation"
and
aria-keyshortcuts="Use shortcut key "

[sy-records]

Shouldn't it be aria-keyshortcuts="Use shortcut key \"?

[msftedad]

@sy-records, Yes, it should be. I noticed that there’s an issue when adding comments — the \ is automatically removed.

Currently, the screen reader announces: "Hide primary navigation, Use shortcut key \ , button \ , " because the shortcut hint is included within the aria-label along with aria-keyshortcuts.

To fix this, set them separately as:
aria-label="Hide primary navigation \ "
and
aria-keyshortcuts="Use shortcut key \ "

Please let us know if any further information is required.

[sy-records]

Okay, I've made the changes. Please retest.

[msftedad]

@sy-records, As verified this issue on docsify, and it appears to be resolved. Now, when the screen reader focus moves to the Left navigation pane show/hide button, it announces 'Hide primary navigation, button, Use shortcut key \ '. When Enter or Space is pressed, the screen reader announces, 'Show primary navigation, button, Use shortcut key \ '.

Thank you.

[paulhibbitts]

Thanks very much @msftedad for confirming these changes, I am learning as we go through this very helpful process!