[csswg-drafts] [selectors] :focus-visible on a <select> element (#5822)

mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] :focus-visible on a <select> element ==
Spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

Checking the WPT tests for `:focus-visible` I've just found that Chromium and Firefox behave differently for the case of a `<select>` element focused via mouse click. 

A very simple example would be something like:
```html
<style>
:focus-visible {
  outline: 5px solid green;
}

:focus:not(:focus-visible) {
  outline: 0;
  background-color: red;
}
</style>
<select id="target">
  <option>Click me!</option>
  <option>foo</option>
  <option>bar</option>
</select>
```

When you click the `<select>` element in Chromium you get a green outline (so `:focus-visible` matches), but in Firefox you get a red background.
You can test it live in at: https://codepen.io/mrego/pen/xxEXWBg

I guess the relevant test on the spec is this:
> * Any element which supports keyboard input (such as an input element, or any other element which may trigger a virtual keyboard to be shown on focus if a physical keyboard is not present) should always match :focus-visible when focused.

`<select>` somehow supports keyboard input, as you can move up&down on the different options, so I guess that's why Chromium make it match `:focus-visible`.
BTW something similar happens with radio buttons, that you can use the keyboard arrows to move between them, however in that case when you click on a radio button neither Chromium or Firefox match `:focus-visible`.

CC @alice @emilio @robdodson 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5822 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 23 December 2020 14:45:00 UTC