Page MenuHomePhabricator

Screen reader is announcing VectorMenu dropdown as checkbox
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

QA steps
  • Go to a wiki page
  • Turn on your screen reader of preference
  • Navigate to "More" and hit enter
  • Repeat for "User menu" for logged out users
  • Repeat for "User menu" for logged in users
Actual Results:
  • The screen reader reads the "More" button as checkbox
Expected Results:
  • Screen reader announce as button and aria-expanded status
Related:

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

Checkbox hidden in: 607311/checkboxHack.less

QA steps

  • Navigate to a page in beta cluster (logged in + logged out)
  • Using a screen reader or voice over, tab to the dropdown menus to check that they are read as buttons (not checkboxes)

QA Results - Beta

ACStatusDetails
1T253650#7355749
2T253650#7355749

QA Results - Beta

ACStatusDetails
1T253650#7367219
2T253650#7367219

QA Results - Prod

ACStatusDetails
1T253650#7378004
2T253650#7378004

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

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.

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

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.

Demian changed the task status from Stalled to Open.Jul 6 2020, 2:56 AM

@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 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!

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.

@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/

Jdlrobson moved this task from Triaged but Future to unsed on the Readers-Web-Backlog board.

As I understand it, role="button" on the checkbox should make it announce as a button, and the main challenge with this task is getting the expanded status to work. I can see 2 main options:

  1. Use Javascript- Similar to the approach taken in @Bkudiess-msft's patch, we use JS to update aria-expanded. I believe this is the same approach taken for the sidebar button in modern Vector, as well as the user menu button in MinervaNeue. Obvious downside is that this breaks for no js users.
  2. "Spoof" the expanded status- Described in Inclusive Components Menu under the "checkbox hack", this approach uses hidden labels and some clever CSS to simulate aria-expanded without JS.
<input type="checkbox" role="button" aria-haspopup="true" id="toggle" class="vh">
<label for="toggle" data-opens-menu>
  Difficulty
  <span class="vh expanded-text">expanded&lt;/span>
  <span class="vh collapsed-text">collapsed</span>
  <span aria-hidden="true">&#x25be;</span>
</label>

In Vector this solution would be a bit more involved, as it requires refactoring the Menu template to include a label (which IMO is a good improvement to make regardless). I believe this solution also hasn't been implemented anywhere in mediawiki yet.

The Menu template uses a h3 acting as a label. I assume we'd repurpose that, at least for the is-dropdown type? Could you throw up a proof of concept for option 2?

Change 713895 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] POC: Update the checkbox hack in the vector dropdown menu to announce as a button and with expanded status without JS

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

I like the approach here @bwang. Let's estimate the work here. Left a few notes on patch.

Change 713895 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] POC: Update the checkbox hack in the vector dropdown menu to announce as a button and with expanded status without JS

Reason:

This is only POC, another patch will be made for the real solution

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

Change 715617 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Spoof aria-expanded for dropdown menus using checkbox hack

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

Test wiki created on Patch Demo by CMing (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/3393e0286c/w/

Test wiki on Patch Demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3393e0286c/w/

Test wiki created on Patch Demo by CMing (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/76266f4724/w/

Test wiki on Patch Demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/76266f4724/w/

Test wiki created on Patch Demo by CMing (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/ba6ad1329e/w/

cjming added a subscriber: cjming.

Thanks @bwang for pushing this forward and @cjming for the reviews. I really like the general direction!

Two notes for consideration:

  1. We should actually let the long form of the Menu be read out in my opinion. “More” might make immediate sense for a visual user, but I'd think “More options” is preferable for screenreader users. Then we also don't come into the field of “More expanded”/“More collapsed”.
  2. As generated content is supported by screenreaders, I'd try not to rely on two additional DOM elements (span), but on :after of existing span in h3 and dynamically change the content.
  1. As generated content is supported by screenreaders, I'd try not to rely on two additional DOM elements (span), but on :after of existing span in h3 and dynamically change the content.

@Volker_E I had the understanding that pseudo elements should be reserved for decorative content, and that pseudo element support varies a lot across screenreaders.

cjming updated the task description. (Show Details)
cjming moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.

Change 715617 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Spoof aria-expanded for dropdown menus using checkbox hack

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to a page in beta cluster (logged in + logged out)
Using a screen reader or voice over, tab to the dropdown menus to check that they are read as buttons (not checkboxes)

I tried this by using the mouse and tabbing and got the same result.

AC1: Logged In

Screen Recording 2021-09-15 at 9.01.56 AM.mov.gif (1×666 px, 277 KB)

AC2: Logged out
Screen Recording 2021-09-15 at 9.00.09 AM.mov.gif (1×666 px, 200 KB)

Change 721399 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix aria-expanded status for user menu

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

bwang added a subscriber: Edtadros.

Change 721399 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix aria-expanded status for user menu

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to a page in beta cluster (logged in + logged out)
Using a screen reader or voice over, tab to the dropdown menus to check that they are read as buttons (not checkboxes). Verify User Menu and More Menu.

I tried this by using the mouse and tabbing and got the same result.

✅ AC1: Logged In

Screen Recording 2021-09-20 at 2.13.44 PM.mov.gif (996×694 px, 401 KB)

Screen Recording 2021-09-20 at 2.52.31 PM.mov.gif (996×686 px, 282 KB)

✅ AC2: Logged out

Screen Recording 2021-09-20 at 2.57.23 PM.mov.gif (996×686 px, 249 KB)

Screen Recording 2021-09-20 at 2.56.05 PM.mov.gif (996×686 px, 257 KB)

Change 598801 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Fixes screen reader announcing dropdown menu as checkbox

Reason:

We went with https://gerrit.wikimedia.org/r/721399 instead. If this shouldn't be abandoned, please let me know on the Phabricator ticket.

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

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to a page in prod (logged in + logged out)
Using a screen reader or voice-over, tab to the dropdown menus to check that they are read as buttons (not checkboxes). Verify User Menu and More Menu.

I tried this by using the mouse and tabbing and got the same result.

✅ AC1: Logged In

Screen Recording 2021-09-25 at 10.29.44 AM.mov.gif (870×762 px, 374 KB)

Screen Recording 2021-09-25 at 10.27.22 AM.mov.gif (870×762 px, 267 KB)

Screen Recording 2021-09-25 at 10.25.57 AM.mov.gif (870×762 px, 269 KB)

✅ AC2: Logged out

Screen Recording 2021-09-25 at 10.38.56 AM.mov.gif (870×694 px, 212 KB)

Screen Recording 2021-09-25 at 10.37.15 AM.mov.gif (870×694 px, 289 KB)

Looks good, resolving.

Test wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/ba6ad1329e/w/