[csswg-drafts] [css-overflow-5] Giving ::scroll-marker-group a name (and optionally text) (#12176)

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

== [css-overflow-5] Giving ::scroll-marker-group a name (and optionally text) ==
The `::scroll-marker-group` pseudo-element is often used to implement a [tablist](https://w3c.github.io/aria/#tablist) following the [tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) pattern, however currently this pseudo-element cannot define content. The tab list [should be able to be labeled by the author](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties):

> If the tab list has a visible label, the element with role tablist has [aria-labelledby](https://w3c.github.io/aria/#aria-labelledby) set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by [aria-label](https://w3c.github.io/aria/#aria-label).

There are a few ways we could address this,
1. @vmpstr has suggested we add alt text to the `scroll-marker-group` property to give it a label, e.g.
   ```css
   .scroller {
     scroll-marker-group: before / "Slides";
   }
   ```
   This however **would not** support adding a visual label.

2. Support the full [content property](https://drafts.csswg.org/css-content/#content-property) with [alt text](https://drafts.csswg.org/css-content/#valdef-content---string--counter--attr) on the `::scroll-marker-group` pseudo-element, e.g.
   ```css
   .scroller::scroll-marker-group {
     content: "Slides";
   }
   ```
   This would create the visible text "Slides" preceding the `::scroll-marker` pseudo-elements. Alternately, empty content text with alt text could be used to only give it an accessible label without a visual one. The challenge with this model is that it may be difficult to get the layout for the label that you want.

3. Use a `::before` pseudo-element to provide content at the start of the `::scroll-marker-group`, e.g.
   ```css
   .scroller::scroll-marker-group::before {
     content: "Slides";
   }
   ```
   This would create the visible text "Slides" `::before` pseudo-element preceding the `::scroll-marker` pseudo-elements. Alternately, empty content text with alt text could be used to only give it an accessible label without a visual one. One benefit over option 2 is that this also allows for customization other properties to better control how the "Slides" text flows w.r.t. the `::scroll-marker` pseudo-elements, e.g. `display: block | inline-block` or `position: absolute` to label it out of flow.

4. Introduce a new pseudo-element, e.g. `::label`?
   ```css
   .scroller::scroll-marker-group::label {
     content: "Slides";
   }
   ```
   This is a less baked idea, similar to option 3 but may allow us to infer more semantic meaning on the generated content (i.e. that it serves as a label for its owning element).

My preference is option 2, as it directly supports also adding the label visually when this makes sense, and feels like a more canonical place to put content for the `::scroll-marker-group` than giving it a `::before` pseudo-element. This would also be useful when using nested `::scroll-marker-group` pseudo-elements #11601 to label subgroups of scroll markers.

However, I think that we should support `::before` and `::after` (i.e. option 3) on the `::scroll-marker-group` and `::scroll-marker` pseudo-elements as well as it is just generally useful. I only think requiring this to label the group feels awkward and less intuitive than directly labelling the group.

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


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

Received on Thursday, 8 May 2025 15:56:17 UTC