WordPress.org

Making WordPress.org

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#3048 closed defect (fixed)

Missing keyboard accessibility of the Handbook Chapter menu

Reported by: rianrietveld Owned by: SergeyBiryukov
Milestone: Priority: normal
Component: Handbooks Keywords:
Cc:

Description

Issues:

  • At the moment the Chapter menu, added to the handbook pages misses keyboard functionality and screen reader feedback. The toggle to open the submenus is placed in a, empty<span> that doesn't get keyboard focus. The same style of menu is very well done in the Twenty Fifteen theme. I suggest implementing the structure/semantics as done there.
  • There is no visible focus style. Suggest using the hover style also for the focus style.

Attachments (3)

chapter-menu-handbook.png (110.1 KB) - added by rianrietveld 3 months ago.
example chapter menu handbook
chapter-menu.png (23.8 KB) - added by rianrietveld 3 months ago.
Chapter menu handbook (the right image)
3048.diff (2.5 KB) - added by Kau-Boy 3 months ago.

Download all attachments as: .zip

Change History (16)

@rianrietveld
3 months ago

example chapter menu handbook

@rianrietveld
3 months ago

Chapter menu handbook (the right image)

#1 @rianrietveld
3 months ago

First image was the wrong one, sorry for that

This ticket was mentioned in Slack in #accessibility-docs by rianrietveld. View the logs.


3 months ago

This ticket was mentioned in Slack in #meta by sami.keijonen. View the logs.


3 months ago

This ticket was mentioned in Slack in #meta by kau-boy. View the logs.


3 months ago

#5 @Kau-Boy
3 months ago

  • Keywords has-patch needs-testing added

Unfortunately I couldn't test my patch locally, as the handbook has no content, so it would be nice, if someone else could test it.

The patch was implemented at the Contributor Days of WordCamp Brighton and WordCamp Zagreb.

@Kau-Boy
3 months ago

#6 @SergeyBiryukov
3 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 5871:

Breathe: Make handbook Chapters menu accessible from keyboard, add screen reader feedback and visible focus style.

Props Kau-Boy.
Fixes #3048.

#7 @rianrietveld
3 months ago

Hey @Kau-Boy
I did some testing, and the keyboard a11y is perfect.

However I found one issue with the aria-expanded.
If you are on a sub menu page, like
https://make.wordpress.org/accessibility/handbook/get-involved/
That sub menu is open (visible), but the get involved icon is an arrow down and the aria expanded is false, although this menu item is open.

#8 @SergeyBiryukov
3 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#9 @SergeyBiryukov
3 months ago

  • Keywords needs-patch added; has-patch needs-testing removed

#10 @SergeyBiryukov
3 months ago

Additionally, clicking the arrow should trigger aria-expanded="true" on the button, not on the list item.

#11 @SergeyBiryukov
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 5875:

Breathe: Properly set the .active class and aria-expanded attribute for the current menu item in handbook Chapters menu.

Fixes #3048.

#12 @SergeyBiryukov
3 months ago

  • Keywords needs-patch removed

#13 @Kau-Boy
3 months ago

Thanks @SergeyBiryukov! While I am still on my way back from WordCamp Zagreb, you are fixing my issue. That's how I like my community ;)

Note: See TracTickets for help on using tickets.