Page MenuHomePhabricator

Dropdown(Input)Widget/MenuSelectWidget: Tab key in dropdown boxes should pick the current selection (like Enter does)
Closed, ResolvedPublic

Description

When searching for a template in the Transclusion dialog, a list of possible matches is displayed which can be navigated using your keyboard. Pressing the Tab key on one of these should 'Select' the template for use rather than close the inspector.

Dropdown select

Tested at: https://en.wikipedia.org/wiki/Special:PagesWithProp
Alternative native select: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select (CodePen doesn't support IE 11, another alternative: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select)
Procedure: tab into the select box, press space once to open the dropdown [2], press down arrow once, and then:

pressed keyOpera 12Blink/WinChrome 83/WinChrome 83/macOSFirefox/Win+macOSIE 11SafOOUI v0.39.0
Tab
Escape [4][4] [4] [4]
Space
Enter

Legend: = confirms choice, = cancels choice, — = does nothing

Text input suggestions

Tested at: http://davidwalsh.name/demo/datalist.php
Procedure: tab into the search box, type 'Mo', press down arrow once, and then:

pressed keyOpera 12BlinkFirefoxIE 11OOUI
Tab
Escape [1]
Space [1]
Enter

Legend: = confirms choice, = cancels choice

[1] Opera 12 immediately places the suggestion into the text input. One can press the up arrow to cancel, in a way.
[2] Otherwise one can use arrow keys to change the value of the closed dropdown.
[3] Firefox doesn't let me open the dropdown with keyboard at all… I tested after clicking it with a mouse to open.
[4] Browser immediately chooses the highlighted option, leaving no way to cancel the choice.


Original task meta information:
Author: adaml
Version: unspecified
Severity: enhancement

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:47 AM
bzimport added a project: OOUI.
bzimport set Reference to bz51229.

Pressing 'enter' does the trick.

Currently tab cancels the drop-down, so im confirming there is an enhancement request here.

Im not sure tab should pick the item selected, but someone more appropriate can decide if this UI should be changed.

matmarex renamed this task from OOjs UI: Tab character in option boxes should pick the current selection (like Enter does) to OOjs UI: Tab character in dropdown boxes should pick the current selection (like Enter does).Feb 9 2015, 9:34 PM
matmarex set Security to None.
matmarex added a subscriber: matmarex.EditedFeb 9 2015, 10:33 PM

There are two separate cases where we use similar dropdown menus: as suggestions for text input (like in the original example of this task) and as actual dropdown lists.

I did some testing of the native browser behavior for both kind of controls, and guess what, everyone does them differently. (Tested on Windows 7.)

Where I say "Blink", I mean I tested with Opera 28, which generally behaves like Chrome.

Text input suggestions

Tested at: http://davidwalsh.name/demo/datalist.php
Procedure: tab into the search box, type 'Mo', press down arrow once, and then:

pressed keyOpera 12BlinkFirefoxIE 11OOjs UI
Tab
Escape [1]
Space [1]
Enter

Legend: = confirms choice, = cancels choice

[1] Opera 12 immediately places the suggestion into the text input. One can press the up arrow to cancel, in a way.

Dropdown select box

Tested at: https://en.wikipedia.org/wiki/Special:PagesWithProp
Procedure: tab into the select box, press space once to open the dropdown [2], press down arrow once, and then:

pressed keyOpera 12BlinkFirefox [3]IE 11OOjs UI [4]
Tab
Escape [5] [5] [5]
Space
Enter

Legend: = confirms choice, = cancels choice, — = does nothing

[2] Otherwise one can use arrow keys to change the value of the closed dropdown.
[3] Firefox doesn't let me open the dropdown with keyboard at all… I tested after clicking it with a mouse to open.
[4] Dropdowns are currently not focusable, tracked as T87705.
[5] Browser immediately chooses the highlighted option, leaving no way to cancel the choice.

Soooo…

  • For text input suggestions, we might want to align our Tab behavior with browsers. Everything else is okay.
  • For dropdowns, I think the prevalent browser behavior is just plain wrong, and we are correct. I'm on the fence about what to do with Tab.

Would be interesting if somebody repeated these tests on some Linux (Ubuntu, perhaps) and Mac OS.

Volker_E added a subscriber: Volker_E.EditedJan 4 2017, 9:15 AM

@matmarex An interesting question, thanks for the comparison table.
It's not completely clear though what the OOUI column refers too in comparison to the browsers…? What widget did you test for Text input suggestions? I'd extend this by testing Mac browsers behaviour…

It was a TextInputWidget with LookupElement, IIRC. I think we have that in the demo somewhere.

DLynch added a subscriber: DLynch.Jan 9 2017, 5:28 PM

For what it's worth, on MacOS, in Chrome and Safari, being in a (browser-standard) dropdown and pressing tab does nothing.

Volker_E renamed this task from OOjs UI: Tab character in dropdown boxes should pick the current selection (like Enter does) to OOUI: Tab character in dropdown boxes should pick the current selection (like Enter does).Jan 17 2018, 12:55 AM
Volker_E removed a subscriber: rmoen.
Krinkle removed a subscriber: Krinkle.Jan 22 2018, 8:32 PM
Volker_E moved this task from Backlog to Next-up on the OOUI board.Feb 2 2018, 3:00 AM
Volker_E renamed this task from OOUI: Tab character in dropdown boxes should pick the current selection (like Enter does) to Dropdown(Input)Widget/MenuSelectWidget: Tab key in dropdown boxes should pick the current selection (like Enter does).Jun 2 2020, 7:30 PM
Volker_E added a project: Accessibility.
Volker_E updated the task description. (Show Details)
Volker_E awarded a token.
Volker_E rescinded a token.
Volker_E awarded a token.
Volker_E added a subscriber: Esanders.
Volker_E updated the task description. (Show Details)Jun 2 2020, 7:43 PM
Volker_E updated the task description. (Show Details)Jun 2 2020, 7:57 PM
Volker_E updated the task description. (Show Details)Jun 2 2020, 7:59 PM
Volker_E updated the task description. (Show Details)Jun 2 2020, 8:51 PM

Given that

  • browsers do not provide a clear behaviour on either platform or browser vendor matrix and
  • the only time a tab choice, after selecting would provide possibly an unwanted behavior when we think of a navigation dropdown,

I conclude we should be bold and save the (keyboard) user hitting a different key (<Enter>) to select currently highlighted item and standardize on <tab>.

Change 599038 had a related patch set uploaded (by Bartosz Dziewoński; owner: Esanders):
[oojs/ui@master] Select current item when tabbing off an open MenuSelectWidget

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

matmarex assigned this task to Esanders.Jun 2 2020, 9:02 PM

With this patch, Tab now confirms the highlighted option (exactly like Enter), and also does not navigate to the next widget until the dropdown is closed – effectively you need to press Tab twice to move the focus.

Volker_E moved this task from Next-up to Reviewing on the OOUI board.Jun 2 2020, 9:20 PM

Change 599038 merged by jenkins-bot:
[oojs/ui@master] MenuSelectWidget: Select current item when tabbing off

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

Change 602503 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.39.1

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

Change 602503 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.39.1

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

Volker_E closed this task as Resolved.Jun 4 2020, 11:03 PM
Volker_E moved this task from Reviewing to OOUI-0.39.1 on the OOUI board.
Volker_E edited projects, added OOUI (OOUI-0.39.1); removed OOUI.
Volker_E removed a project: Patch-For-Review.