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

[flackr]

The ::scroll-marker-group pseudo-element is often used to implement a tablist following the tabs pattern, however currently this pseudo-element cannot define content. The tab list should be able to be labeled by the author:

If the tab list has a visible label, the element with role tablist has aria-labelledby set to a value that refers to the labelling element. Otherwise, the tablist element has a label provided by 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.

   .scroller {
     scroll-marker-group: before / "Slides";
   }

   This however would not support adding a visual label.

2. Support the full content property with alt text on the ::scroll-marker-group pseudo-element, e.g.

   .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.

   .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?

   .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.