[csswg-drafts] [css-ui-4] ‘user-select’ to control focusability (#5283)

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

== [css-ui-4] ‘user-select’ to control focusability  ==
https://drafts.csswg.org/css-ui-4/#content-selection describes how the `user-select` property can control what is selectable. I propose this be extended to also control what is focusable.

This is important when trying to enhance accessibility in widgets, to make some things focusable and other things un-focusable, often dynamically. Typically, this is currently done by setting the `tabindex` HTML attribute or `tabIndex` HTML property to either -1 (to make it non-focusable) or 0 (to make it focusable in DOM order).

Previously there were proposals for a `tab-index` (or `nav-index`) property to accomplish this, so that it could be handled with little or no scripting, and with the ease and power of selectors and CSS rules. But `-1` and `0` are the primarily important values for most accessibility concerns of focus management, and actual order of sequential navigation is a whole other matter (and can of worms).

So, I am proposing that we overload the user-select property just a little, to allow compound values, where the optional second value part is to say whether or not the element can be focused. So probably all|none|auto. `All` means it is focusable; `none` means it is not. The initial value of `auto` means that it should follow the platform conventions for which items are focusable (which on Mac can be changed by the user).

For example:

```
html.dialog-open body * {
    user-select: none none;
}

html.dialog-open body > .dialog * {
    user-select: auto auto;
}

html.dialog-open body > .dialog H1:first-child {
    user-select: auto all;
}

span.my-fake-dropdown {
    user-select: none all;
}

[tabindex^="-"] {
    user-select: auto none; /* UA stylesheet, maybe */
}
```

The following would just become blurred and un-focusable as soon as it got focus:

```
.foo:focus {
    user-select: auto none;
}
```

If we don’t want to overload user-select, we could just make this a new property with a finagle value, e.g. `user-focus: all|none|auto`. That would also make it easier to extend in the future, with additional values for other focus-related needs.



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

Received on Friday, 3 July 2020 21:36:35 UTC