Page MenuHomePhabricator

[Bug] Pressing enter key on mobile site's hamburger menu opens search overlay
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

Steps to reproduce

  1. Go to https://en.m.wikipedia.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile
  2. Tab so that the hamburger menu icon is focused
  3. Press enter key

Expected results

  • Hamburger menu opens

Actual results

  • Search overlay opens

2021-10-22 17.58.22.gif (898×2 px, 1 MB)

Environments observed

  • Browser version: Chrome
  • OS version: MacOS Big Sur
  • Device model: MacBook Pro
  • Device language: en

Check any additional observations

Developer notes

The hamburger menu is wrapped in a form and contains a button element. The default behavior of a button with no type attribute is to to act as a submit button. The hamburger menu uses the checkbox hack with a focusable checkbox. When the user presses the enter key with the checkbox in focus, a "click" event is triggered on the button which makes the search overlay appear.

QA Results - Beta

ACStatusDetails
1T294164#7634973

QA Results - Prod

ACStatusDetails
1T294164#7634980

Event Timeline

Jdlrobson added a subscriber: Jdlrobson.

Suggest high since this seems like a big accessibility problem.

nray removed nray as the assignee of this task.Nov 24 2021, 12:48 AM

Moved this to upcoming. I'm not sure exactly what the best solution to this is yet, but hopefully the dev notes are enough to at least estimate this ticket. If not, feel free to move back to needs analysis

Jdlrobson lowered the priority of this task from High to Medium.Nov 29 2021, 6:42 PM

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

[mediawiki/skins/MinervaNeue@master] WIP: Move the form element in Minerva's header and apply core checkbox hack consistently to toggle lists

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

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

[mediawiki/core@master] Update checkbox hack documentation, attributes, and JS enhancement functions

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

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

[mediawiki/skins/Vector@master] Temporarily use local version of checkboxHack

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

bwang removed bwang as the assignee of this task.Dec 17 2021, 7:59 PM
bwang added a subscriber: bwang.

Change 747961 abandoned by Bernard Wang:

[mediawiki/skins/Vector@master] Temporarily use local version of checkboxHack

Reason:

Opting to make the core patch backwards compatible

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

Change 747877 merged by jenkins-bot:

[mediawiki/core@master] Update checkbox hack to apply button attributes and functionality to the checkbox.

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

Change 747877 merged by jenkins-bot:

[mediawiki/core@master] Update checkbox hack to apply button attributes and functionality to the checkbox.

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

This change deprecates bindToggleOnSpaceEnter with bindToggleOnEnter listed as its replacement. bindToggleOnEnter is not exported and usable however, meaning code that uses the checkbox hack with bindToggleOnSpaceEnter cannot fix its deprecation issues.

Change 750450 had a related patch set uploaded (by Mainframe98; author: Mainframe98):

[mediawiki/core@master] Export bindToggleOnEnter

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

Change 750450 merged by jenkins-bot:

[mediawiki/core@master] Export bindToggleOnEnter

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

Thanks @Mainframe98 for taking care of that issue.

Change 747628 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Move the form element in Minerva's header and apply core checkbox hack consistently to toggle lists

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

Steps to reproduce
Go to https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile
Tab so that the hamburger menu icon is focused
Press enter key

✅ AC1: Expected results
Hamburger menu opens

Screen Recording 2022-01-19 at 2.51.54 PM.mov.gif (290×800 px, 228 KB)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Steps to reproduce
Go to https://en.m.wikipedia.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile
Tab so that the hamburger menu icon is focused
Press enter key

✅ AC1: Expected results
Hamburger menu opens

Screen Recording 2022-01-19 at 2.56.46 PM.mov.gif (290×800 px, 262 KB)