W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2020

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

From: Brad Kemper via GitHub <sysbot+gh@w3.org>
Date: Fri, 03 Jul 2020 21:36:31 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-650773271-1593812190-sysbot+gh@w3.org>
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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:11 UTC