commit 68562ee3f5eabfed9a480bfeb08d3d6bc7daa205
author yu han <yuzhehan@chromium.org> Tue Oct 29 02:52:53 2019
committer Commit Bot <commit-bot@chromium.org> Tue Oct 29 02:52:53 2019
tree d237e4a8d0505d2def31424c0a7f0d5c22322251
parent 55e18ed69fd965e213337efd20f32fa3c59d71d5

Fixes non-contiguous select via keyboard in a multi-select Listbox.

Previous to this CL, non-contiguous selection via the keyboard is not
supported in a multi-select Listbox. The user was only able to select
a contiguous section of options via the shift key + [up/down] arrows.

Non-contiguous selection via the keyboard is not specified in the
standard. However, Mozilla's Firefox has already implemented this feature,
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select.
This implementation will match the behavior set by Firefox.
* Ctrl+[Up|Down] - moves the focus independently from selection.
* [Ctrl+Space|Spacebar] - toggles selection of the currently focused item.
* For Mac, Cmd key will be used to in place of Ctrl key.

This CL has gone through a few iterations. I considered three approaches.
Initially, I made options focusable inside a multi-select. However,
it an unintended side effect of changing the tab order. Each tab press
moves the focus to the next option, which is not the user's intention.
A tab keypress should shift the focus outside of the select element and
move to the next focusable element. Next, I modified :focus pseudo-class
on handling <option> focus via keyboard. It introduced a problem with
document.querySelectorAll(':focus') returning both the <select> and
<option> elements.  after discussions from the code review, we've decided
the best way forward is to create a new internal pseudo-class to handle
the drawing of the focus ring.

Focus Ring behavior: non-contiguous selection requires a focus ring
drawn around the current option. The ring gives a visual indication
on which option is focused and selected if the spacebar is pressed.
This behavior is a change from how it works currently. Multi-select
doesn't have a focus ring on its options. I debated between the logic
around showing the focus ring. The focus ring on option is shown only
when in non-contiguous selection mode which is triggered by
cmdKey + up/down arrow keys on Mac and ctrlKey+arrow keys on other
platforms. This behavior, when to display focus ring, avoids styling conflicts
with spatial navigation while still provides visual cues to the user
when choosing a selection via the keyboard.

Using the new internal pseudo-class creates a problem that the
focus ring around the <option> isn't user style-able. This behavior
is consistent with Firefox. Its multi-select <option> focus ring
isn't style-able either. But the user can disable it by applying a
css class: option { outline: none; }

Bug: 982450
Change-Id: I31ea37d25f2e924420af3904163ad343f9715e6f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1872939
Commit-Queue: Yu Han <yuzhehan@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710166}