Skip to content

Feat: Add aria attributes to sidebar toggle button and current page link #2254

New issue

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

#

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

Already on GitHub? # to your account

Jump to bottom
Merged
merged 20 commits into from
Nov 30, 2023
Merged

Feat: Add aria attributes to sidebar toggle button and current page link #2254

merged 20 commits into from
Nov 30, 2023

Conversation

jhildenbiddle
Copy link
Member

@jhildenbiddle jhildenbiddle commented Oct 9, 2023 •
edited
Loading

Summary

These updates align with accessibility best practices.

  1. Add aria attributes to sidebar toggle to indicate expanded/collapsed state
  2. Add aria attributes to indicate current page

Before

  • No indication of current page in sidebar navigation
  • Sidebar toggle does not indicate purpose or current state
2254-before.mp4

After

  • Current page is indicated in sidebar navigation
  • Sidebar toggle indicated purpose and current state
2254-after.mp4

Tip: Use built-in screen readers for testing on macOS and Windows

macOS VoiceOver

VoiceOver User Guide

  1. Turn VoiceOver on. ⌘ + F5
  2. Open the Rotor CTRL + ⌥ + U
  3. Use the ← and → arrow keys until you reach the "Landmark" list.
  4. Navigate the list using the ↑ and ↓ arrow keys.
  5. Press ↵ or SPACE to select to jump to the current item (rotor closes afterwards).

Windows Narrator

Complete guide to Narrator

  1. Press the Windows key + Ctrl + Enter together to start Narrator. Press these keys again to stop Narrator. On many keyboards, the Windows logo key is located on the bottom row of keys, to the left or right of the Alt key.
  2. Press the Windows key + Ctrl + N to open Narrator settings, and then turn on the toggle under Use Narrator.

Related issue, if any:

#658
#2226

What kind of change does this PR introduce?

  • Feature

Does this PR introduce a breaking change?

No

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari
  • Edge

@vercel
Copy link

vercel bot commented Oct 9, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docsify-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 30, 2023 5:28am

@jhildenbiddle jhildenbiddle changed the title Add aria attributes to sidebar toggle, search field, and current page Feat: Add aria attributes to sidebar toggle, search field, and current page Oct 14, 2023
This was referenced Oct 17, 2023
Closed
Closed
trusktr
trusktr reviewed Oct 22, 2023
View reviewed changes
@jhildenbiddle jhildenbiddle mentioned this pull request Oct 22, 2023
Merged
4 tasks
@jhildenbiddle jhildenbiddle marked this pull request as ready for review November 2, 2023 16:07
@jhildenbiddle jhildenbiddle requested review from a team and trusktr November 2, 2023 16:07
@jhildenbiddle jhildenbiddle linked an issue Nov 16, 2023 that may be closed by this pull request
Sidebar button does not have a description useful for screen reader users #658
Closed
Koooooo-7
Koooooo-7 previously approved these changes Nov 17, 2023
View reviewed changes
@jhildenbiddle
Merge branch 'develop' into 658-aria
d555117 
# Conflicts:
#	src/core/render/tpl.js
#	test/integration/__snapshots__/docs.test.js.snap
@jhildenbiddle
Fix aria-current implementation
9f3212b 
Allow active heading links to also announce “current page”
@jhildenbiddle
Fix sidebar expand/collapse announcement
705912a
@jhildenbiddle jhildenbiddle changed the title Feat: Add aria attributes to sidebar toggle, search field, and current page Feat: Add aria attributes to sidebar toggle, current page, and search elements. Nov 30, 2023
@jhildenbiddle jhildenbiddle changed the title Feat: Add aria attributes to sidebar toggle, current page, and search elements. Feat: Add aria attributes to sidebar toggle button and current page link Nov 30, 2023
@jhildenbiddle jhildenbiddle mentioned this pull request Nov 30, 2023
Merged
4 tasks
@jhildenbiddle
Copy link
Member Author

@Koooooo-7 --

Would you mind approving this PR again? I had to merge develop which cleared your previous approvals. Thx!

@jhildenbiddle jhildenbiddle merged commit e7414e0 into develop Nov 30, 2023
@jhildenbiddle jhildenbiddle deleted the 658-aria branch November 30, 2023 05:40
@jhildenbiddle jhildenbiddle mentioned this pull request Dec 1, 2023
Closed
@Suriya617 Suriya617 mentioned this pull request Dec 4, 2023
Closed
# for free to join this conversation on GitHub. Already have an account? # to comment
Reviewers

@Koooooo-7 Koooooo-7 Koooooo-7 approved these changes

@sy-records sy-records sy-records approved these changes

@trusktr trusktr Awaiting requested review from trusktr

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
4 participants
@jhildenbiddle @trusktr @Koooooo-7 @sy-records