[csswg-drafts] [selectors-4] and a11y: pseudo-elements for ::label, ::description, ::active-descendent, etc. (#6719)

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

== [selectors-4] and a11y: pseudo-elements for ::label, ::description, ::active-descendent, etc. ==
It is sometimes difficult to select the right corresponding element that has a significant relationship to another element, if the two elements do not appear in an order that allows the styling of one to be based on the state of the other. 

For instance, if author want to style a label based on the validity of an input, they could do something like this:

```
input:invalid + label { color: red }
```
...but that only works if the label is after the input, because there is no parent selector or previous sibling selector. However, the UA should know after the parsing the html and before the styling assignment which label is associated with which input, whether through `for` or `aria-labeledby`, or by being the parent of the input, or some other mechanism. So I am proposing that the following would work to select that label (or element acting as a label for the input):

```
input:invalid::label { color: red }
```
So, `::label` is a pseudo-element that selects the labeling element, wherever it exists in the DOM, for the element the pseudo is attached to. 

This `::label` pseudo could also select certain of label-like elements with the proper defined relationships, such as a `<th>` that "labels" a `<td>`. 

Similarly, `::description` would select the element that the subject was `aria-describedby`, and `::active-descendent` would select the valid `aria-activedescendent` of the subject (which might not be a DOM descendent, thanks to `aria-owns`).

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


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

Received on Sunday, 10 October 2021 03:48:13 UTC