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.

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

@Bkudiess-msft which screenreader do you use?

@Demian I use Windows Narrator

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

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

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

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

@Jdlrobson Yep here's the patch: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/713895
Patch demo: https://patchdemo.wmflabs.org/wikis/549622230d/wiki/Main_Page

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/

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.

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.

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

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

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

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

✅ AC2: Logged out

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 wiki on Patch demo by CMing (WMF) using patch(es) linked to this task was deleted:

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