Screen reader is announcing VectorMenu dropdown as checkbox
Open, MediumPublicBUG REPORT
Actions

Description

Steps to Reproduce:

Go to a wiki page
Turn on your screen reader of preference
Navigate to "Move" and hit enter

Actual Results:

The screen reader reads the "Move" button as checkbox

Expected Results:

Screen reader announce as button and aria-expanded status

T246420: Limit content width, and refine alignment & styling of relevant elements
T243126: Investigate accessibility of checkbox hacks

Checkbox hidden in: 607311/checkboxHack.less

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/Vector	master	+17 -10	Fixes screen reader announcing dropdown menu as checkbox

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved	Goal	ovasileva	T242131 [GOAL] Deploy new header to at least one test wiki
Resolved		Jdlrobson	T240856 [EPIC] New header for desktop improvements project
Resolved		ovasileva	T236176 [EPIC] Build opt-in/opt-out mechanism for desktop improvements project
Resolved	Spike	ovasileva	T237561 [SPIKE 10hrs] Investigate how skin suboptions can be presented in Special:Preferences
Resolved	Spike	phuedx	T237635 [SPIKE] What should feature management look like in desktop improvements?
Resolved		ovasileva	T237636 [SPIKE 10hrs] Build new header within the Vector skin
Resolved	Spike	Volker_E	T240489 [Epic] Determine the optimum Vector DOM structure for a11y and performance
Open		None	T243126 Investigate accessibility of checkbox hacks
Open	BUG REPORT	Bkudiess-msft	T253650 Screen reader is announcing VectorMenu dropdown as checkbox
Resolved	Spike	ovasileva	T242419 [SPIKE] Instrument opt-in/opt-out mechanism for desktop improvements project
Resolved		ovasileva	T242381 Add a Vector skin version preference
Resolved	BUG REPORT	matmarex	T245793 [Firefox 73] Infusing a RadioOptionWidget changes first-child alignment
Resolved		ovasileva	T243281 Build opt-out link for logged-in users with new vector on
Resolved		Jdlrobson	T245456 [Dev] Adopt template partials in Vector and revise sidebar component
Resolved		phuedx	T113095 A cached server-side HTML template should update when you change a partial template which it includes
Resolved		nray	T250093 Add title attribute to opt-out link
Resolved		Mayakp.wiki	T243071 Update PrefUpdate schema to include edit count
Resolved		Mayakp.wiki	T246028 Data QA for Editcount on PrefUpdate schema
Stalled		ovasileva	T242835 RFC: Standard method for feature-management in skins/extensions
Open		None	T249918 Desktop Improvements opt-out takes multiple user actions and network roundtrips
Resolved		Edtadros	T248644 Cannot link to subsections on Special:Preferences
Open		None	T251405 Change description of desktop improvements opt-in preference
Open		None	T260570 Improve opt-out functionality in sidebar

Event Timeline

Bkudiess-msft created this task.May 26 2020, 4:33 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 26 2020, 4:33 PM

cc @Volker_E

See role=button discussion on checkbox hack in T243126. We will all live in a better world very soon!
Keeping this task open as it is good to have it filed under Vector as well.

Volker_E added a parent task: T243126: Investigate accessibility of checkbox hacks.May 26 2020, 5:01 PM

Change 598801 had a related patch set uploaded (by Bkudiess-msft; owner: Bkudiess-msft):
[mediawiki/skins/Vector@master] Fixes screen reader announcing dropdown menu as chackbox

https://gerrit.wikimedia.org/r/598801

gerritbot added a project: Patch-For-Review.May 26 2020, 5:01 PM

@Bkudiess-msft which screenreader do you use?

@Demian I use Windows Narrator

Jdlrobson moved this task from Needs triage to Menus on the Vector board.May 29 2020, 1:13 AM

Stalled on T243126

ovasileva triaged this task as Medium priority.Jun 1 2020, 8:52 AM

Moving to backlog given this is stalled on T243126. We should pull that one in if we want to move this along.

@Bkudiess-msft: Recent changes in T246420 made the checkbox hidden and the button react to events:
https://github.com/wikimedia/Vector/blob/bfc95effdbcac20ebbd30a03c9bdbc5ef8b6fbdc/resources/skins.vector.styles/checkboxHack.less#L39

Could you check how this setup fares in your screen reader?

• Demian updated the task description. (Show Details)Jul 6 2020, 2:59 AM

@Demian Do you have this deployed somewhere for testing?

Yes, the above commit is from the master branch which is continuously deployed to BETA.

@Demian Tested with windows narrator, screen reader is announcing the correct text (expanded or collapsed) instead of announcing it as checkbox. But now I'm not able to interact with this button hack using only the keyboard, only works with a mouse click. This is reproable without a screen reader as well.

Thanks for the test!

In T253650#6283276, @Bkudiess-msft wrote:

But now I'm not able to interact with this button hack using only the keyboard, only works with a mouse click.

I've been working hard on that for the best part of the weekend: T257075: Simplify the checkboxHack API
Team will discuss it today. I tried to make a patchdemo for it, but the long list of patches somehow confused the system, that I have yet to resolve.

ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.Jul 7 2020, 3:49 PM

In T253650#6283276, @Bkudiess-msft wrote:

@Demian But now I'm not able to interact with this button hack using only the keyboard, only works with a mouse click.

The DEMO is ready: http://patchdemo.wmflabs.org/wikis/cedef736804997e570ad35c605f6322b/w/

The DEMO is ready: http://patchdemo.wmflabs.org/wikis/cedef736804997e570ad35c605f6322b/w/

@Demian URL not found

Screen reader is announcing VectorMenu dropdown as checkboxOpen, MediumPublicBUG REPORTActions