Page MenuHomePhabricator

Menus should open via tab + enter
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
alexhollender_WMF
Sep 15 2021, 4:31 PM
Referenced Files
F34888655: Screen Recording 2021-12-18 at 12.17.17 PM.mov.gif
Dec 18 2021, 8:27 PM
F34888612: Screen Recording 2021-12-18 at 11.46.44 AM.mov.gif
Dec 18 2021, 8:27 PM
F34888661: Screen Recording 2021-12-18 at 12.19.02 PM.mov.gif
Dec 18 2021, 8:27 PM
F34888608: Screen Recording 2021-12-18 at 11.39.48 AM.mov.gif
Dec 18 2021, 8:27 PM
F34888620: Screen Recording 2021-12-18 at 11.54.50 AM.mov.gif
Dec 18 2021, 8:27 PM
F34888627: Screen Recording 2021-12-18 at 12.01.12 PM.mov.gif
Dec 18 2021, 8:27 PM
F34888624: Screen Recording 2021-12-18 at 11.59.30 AM.mov.gif
Dec 18 2021, 8:27 PM
F34888632: Screen Recording 2021-12-18 at 12.05.32 PM.mov.gif
Dec 18 2021, 8:27 PM

Description

Description

If I use the tab key to focus the User menu button, and then press the enter key, I would expect the menu to open but it does not. The same goes for the Language button (however when it is show in the site header, like on Commons or Office Wiki, it does open via tab + enter), the More button in the article toolbar, and any other Menu dropdown component.

Screen Shot 2021-09-15 at 12.33.18 PM.png (307×1 px, 108 KB)

Developer notes

It might make sense to convert sidebar.js into a generic checkboxHack.js, which would handle enhancing all checkbox hacks in Vector. This would be a good opportunity for us to align with the checkbox hack markup defined in core so that we are using common selectors (i.e. 'mw-checkbox-hack-checkbox', 'mw-checkbox-hack-button', and 'mw-checkbox-hack-target').

QA steps

Browser compatibility may be an issue here so please do the following steps with Edge, Safari, Firefox, and Chrome:

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog
  2. Tab until the hamburger menu button is in focus. Use the enter key to assert the sidebar can be opened/closed. Use the space key and assert the sidebar can be opened/closed. Use a mouse click and assert the sidebar can be opened/closed.
  3. Tab until the user menu in the main header (not the sticky header) is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
  4. Tab until the "More" tab is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
  5. Tab until the language button is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.

QA Results - Beta

https://phabricator.wikimedia.org/T291096#7579236

QA Results - Prod

Event Timeline

This ticket is about keyboard accessibility primarily. I do note however that both controls the Personal Tools dropdown and the Language dropdown don't work properly in screenreaders either (the latter works a bit better than the first). The More dropdown works reasonably well in a screenreader.

(I've only tested with VoiceOver)

There is the variants menu as well.

This issue is occurring because the menu dropdown's use the checkbox hack, and checkboxes aren't activated natively on enter. The sidebar button is the only checkbox hack menu that does work on enter because it binds the correct event handlers (i.e. https://github.com/wikimedia/Vector/blob/master/resources/skins.vector.js/sidebar.js#L35-L42). The same thing must be done with the other menu dropdowns in Vector for the enter button to work (will only work with JS enabled)

@TheDJ Do you have any more details about what's not working well about those dropdown menus? I ran through with VO/Safari and I didn't notice anything off.

Could that function be moved into the mediawiki.page.ready module? It would be nice to call an init function / or have a progressive enhancement based on class that enables all checkboxes by default.

bwang removed bwang as the assignee of this task.Sep 30 2021, 4:58 PM
bwang added a subscriber: bwang.

@Jdlrobson I think it would be great to eventually move this up to core, so that all checkbox hacks are enhanced automatically. The main concern I see is that Vector uses a no-js solution to providing expanded/collapsed status (T253650), which makes the bindUpdateAriaExpandedOnInput function provided by core redundant. Since the no-js solution is exclusive to Vector currently, I'd recommend handling this within Vector for now.

It might be worth creating another task to evaluate our no-js solution with the design system team. It could be something we want to upstream to core, and if not, it might be better for Vector to be consistent with core and remove our no-js solution. At that point we could consider moving this initialization to mediawiki.page.ready.

Could that function be moved into the mediawiki.page.ready module? It would be nice to call an init function / or have a progressive enhancement based on class that enables all checkboxes by default.

I created this task to track this somewhere

Change 732731 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Make dropdown menus toggle with enter key

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

Change 732732 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Use core's checkboxHack event handlers for all .vector-menu-dropdown menus

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

Change 732734 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/core@master] POC: Change CheckboxHack cleanup API

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

Change 732731 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make dropdown menus toggle with enter key

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

Change 733022 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/core@master] Change checkboxHack `bindToggleOnSpaceEnter` function

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

Change 733026 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/core@master] Refactor checkboxHack bindDismissOnClickOutside, bindDismissOnFocusLoss functions

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

nray removed nray as the assignee of this task.Oct 22 2021, 10:43 PM
nray added a subscriber: nray.

Change 734334 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Remove duplicate `vector-menu-dropdown` class

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

Change 734334 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove duplicate `vector-menu-dropdown` class

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

Change 732734 merged by jenkins-bot:

[mediawiki/core@master] [BREAKING] Change cleanup API of checkboxHack

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

Change 733022 merged by jenkins-bot:

[mediawiki/core@master] Change checkboxHack `bindToggleOnSpaceEnter` function

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

Change 735691 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add \"skins.vector.es6\" module as a dependency of \"skins.vector.js\"

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

Change 733026 abandoned by Nray:

[mediawiki/core@master] Refactor checkboxHack bindDismissOnClickOutside, bindDismissOnFocusLoss functions

Reason:

Planning to move this to another ticket as it doesn't strictly relate to T291096

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

Change 732732 abandoned by Nray:

[mediawiki/skins/Vector@master] Use core's checkboxHack event handlers for all .vector-menu-dropdown menus

Reason:

Planning to move this to another ticket as it doesn't strictly relate to T291096

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

Change 736318 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Add comment to dropdownMenus.js regarding the CHECKBOX_HACK_BUTTON_SELECTOR

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

Was planning to move this to QA today, but spoke too soon. There are two patches left that I'd love to get merged before QA:

nray removed nray as the assignee of this task.Nov 3 2021, 12:06 AM

Change 736318 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add comment to dropdownMenus.js regarding the CHECKBOX_HACK_BUTTON_SELECTOR

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

Change 735691 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Initialize the skins.vector.es6 module before the skins.vector.js module

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

@nray is this ready for QA now or are there patches remaining?

@nray is this ready for QA now or are there patches remaining?

@Jdlrobson It's ready for QA, I'll write the QA steps today

nray claimed this task.
nray moved this task from Code Review to QA on the Readers-Web-Backlog (Kanbanana-FY-2021-22) board.
nray added a subscriber: Edtadros.
nray updated the task description. (Show Details)
nray updated the task description. (Show Details)

Test Result - Beta

Status:
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Browser compatibility may be an issue here so please do the following steps with Edge, Safari, Firefox, and Chrome:

✅ AC1: Hamburger Menu Button

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog
  2. Tab until the hamburger menu button is in focus. Use the enter key to assert the sidebar can be opened/closed. Use the space key and assert the sidebar can be opened/closed. Use a mouse click and assert the sidebar can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-07 at 6.22.56 AM.mov.gif (1×862 px, 1 MB)
Screen Recording 2021-12-07 at 6.48.24 AM.mov.gif (1×858 px, 832 KB)
Screen Recording 2021-12-07 at 6.52.06 AM.mov.gif (1×858 px, 731 KB)
Screen Recording 2021-12-07 at 6.58.32 AM.mov.gif (1×858 px, 757 KB)

✅ AC2: User Menu

  1. Tab until the user menu in the main header (not the sticky header) is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-07 at 6.27.39 AM.mov.gif (1×862 px, 790 KB)
Unable to tab to User menu
Screen Recording 2021-12-07 at 6.53.25 AM.mov.gif (1×858 px, 414 KB)
Screen Recording 2021-12-07 at 6.59.59 AM.mov.gif (1×858 px, 480 KB)

❓ AC3: More Tab

  1. Tab until the "More" tab is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.

@nray, the more tab is a bit elusive. It works on Edge, but I cannot get it to appear on Firefox or Chrome, if you know of a way please let me know and I'll retest. I was unable to tab to the tab on Safari. I am wondering if there were settings for the screen reader testing that may be impacting tabbing in Safari.

EdgeSafariFirefoxChrome
Screen Recording 2021-12-07 at 6.29.41 AM.mov.gif (1×496 px, 272 KB)
Unable to tab to More tabCannot get More menu to appearCannot get More menu to appear

❓ AC4: Language Button

  1. Tab until the language button is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.

@nray, I've left this as "Need more Info" because I'm not sure if the scope of this task included the compact language list case. If not then this is a pass. If the compact language list is in scope then we can either wait until it is fixed and pass this,

With the option below checked, focus leaves the page once it is activated. Esc and/or closing the dialog still doesn't return focus to the Language button. This is seen in all browsers. An example can be seen below in Firefox.

Screen Shot 2021-12-07 at 10.39.48 AM.png (74×437 px, 11 KB)

EdgeSafariFirefoxChrome
Screen Recording 2021-12-07 at 6.32.53 AM.mov.gif (1×858 px, 401 KB)
Unable to tab to Language buttonOnce you hit space or enter the tab focus leaves the language button.
Screen Recording 2021-12-07 at 6.55.35 AM.mov.gif (1×858 px, 1 MB)
This does work if you uncheck the "Use compact language list" button in preferences though.
Screen Recording 2021-12-07 at 7.04.47 AM.mov.gif (1×858 px, 531 KB)
Screen Recording 2021-12-07 at 10.37.52 AM.mov.gif (1×860 px, 337 KB)
Edtadros updated the task description. (Show Details)

Thank you for looking at this @Edtadros .

@nray, the more tab is a bit elusive. It works on Edge, but I cannot get it to appear on Firefox or Chrome, if you know of a way please let me know and I'll retest. I was unable to tab to the tab on Safari. I am wondering if there were settings for the screen reader testing that may be impacting tabbing in Safari.

I'm not exactly sure why the tab wouldn't be showing in Firefox or Chrome, but I'd double check that you are using the same username/page as you did in Edge. What happens when you try tabbing in Safari? For whatever reason, I was able to tab to the button in Safari:
https://jumpshare.com/v/VTa241wiKwC5SimMtFfJ

@nray, I've left this as "Need more Info" because I'm not sure if the scope of this task included the compact language list case. If not then this is a pass. If the compact language list is in scope then we can either wait until it is fixed and pass this,

I think this is working as expected. When the ULS dialog pops up, it focuses the input for easier searching. Therefore, I don't think the absence of focus on the button is an issue.

Edtadros added a subscriber: ovasileva.

@ovasileva I wanted to highlight the items marked with a ❓below. The task as I understand it is about enter, space, and mouse click functionality, not necessarily tab order or element highlighting format. I think this is a pass, and the items below might be either OK based on the browser, or will require new tasks to rectify, but I wanted to run it by you. I'm putting this task in Ready for Signoff under this assumption.

Test Result - Prod

Status: ❓ Please Review
Environment: enwiki
OS: macOS Monterey
Browser: Edge, Safari, Firefox, Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Browser compatibility may be an issue here so please do the following steps with Edge, Safari, Firefox, and Chrome:

✅ AC1: Hamburger Menu Button

  1. Visit https://en.wikipedia.org/wiki/Dog
  2. Tab until the hamburger menu button is in focus. Use the enter key to assert the sidebar can be opened/closed. Use the space key and assert the sidebar can be opened/closed. Use a mouse click and assert the sidebar can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-18 at 11.39.48 AM.mov.gif (932×858 px, 1 MB)
Screen Recording 2021-12-18 at 11.52.29 AM.mov.gif (932×858 px, 1 MB)
Screen Recording 2021-12-18 at 12.05.32 PM.mov.gif (932×858 px, 1 MB)
Screen Recording 2021-12-18 at 12.18.18 PM.mov.gif (932×858 px, 871 KB)

❓AC2: User Menu

  1. Tab until the user menu in the main header (not the sticky header) is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-18 at 11.41.24 AM.mov.gif (932×858 px, 839 KB)
❓Unable to tab to user menu unless CTRL-TAB is used
Screen Recording 2021-12-18 at 11.54.50 AM.mov.gif (932×858 px, 1 MB)
Screen Recording 2021-12-18 at 11.59.30 AM.mov.gif (932×858 px, 447 KB)
Screen Recording 2021-12-18 at 12.17.17 PM.mov.gif (932×858 px, 417 KB)
Screen Recording 2021-12-18 at 12.19.02 PM.mov.gif (932×858 px, 575 KB)

❓ AC3: More Tab

  1. Tab until the "More" tab is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-18 at 11.46.44 AM.mov.gif (932×858 px, 301 KB)
❓Must use CTRL-TAB
Screen Recording 2021-12-18 at 12.01.12 PM.mov.gif (932×858 px, 318 KB)
❓The highlighting for elements in focus is different for the wordmark as well as the tab items.
Screen Recording 2021-12-18 at 12.08.28 PM.mov.gif (932×858 px, 599 KB)
Screen Recording 2021-12-18 at 12.19.22 PM.mov.gif (932×858 px, 470 KB)

✅ AC4: Language Button

  1. Tab until the language button is in focus. Use the enter key to assert it can be opened/closed. Use the space key and assert it can be opened/closed. Use a mouse click and assert it can be opened/closed.
EdgeSafariFirefoxChrome
Screen Recording 2021-12-18 at 11.49.30 AM.mov.gif (932×858 px, 655 KB)
❓Must use CTRL-TAB
Screen Recording 2021-12-18 at 12.03.25 PM.mov.gif (932×858 px, 651 KB)
Screen Recording 2021-12-18 at 12.09.55 PM.mov.gif (932×858 px, 537 KB)
Screen Recording 2021-12-18 at 12.19.46 PM.mov.gif (932×858 px, 778 KB)

Thanks @Edtadros. I'm not sure why the difference is there for Safari. @bwang - do you know by any chance?

@Edtadros I'm not sure why regular tab isnt working for you on Safari, but I know that by default tab will only highlight certain items in Safari (i.e. input elements) and not links. On my computer "Option+tab" will tab through more items by default, and there's a setting to make "tab" behave more similarly to Firefox and Chrome.

Regardless, I tested this in prod in Safari and it seems to be working well for me with both "tab" and "option+tab". I believe this should be a pass!