[css-overflow-5] Default UA styles for scroll markers and scroll buttons

[flackr]

When developers create scroll markers and scroll buttons, they should provide good default UA styles to be accessible and usable. With nothing spec'd it takes a lot of styles to get these controls usable.

I propose, scroll buttons be styled like buttons by the UA stylesheet. I'd suggest copying the UA button styles, including pseudo-class states (e.g. :focus).

Scroll markers behave as links, and as such I think should use the UA link styles. :visited will never apply to pseudo-element scroll markers, so that part can be skipped.

I think ::scroll-marker-group should have a specified size large enough to fit a line of ::scroll-marker elements, perhaps scrolling by default if the list is too large.

The end goal is that with no specific styling applied these controls should all work reasonably without any particular styling attention.

[flackr]

In #11216 we hinted at this idea of scroll buttons using button style, however I don't think we formally resolved on it.
I'd like to propose that we resolve the following:

1. The default UA stylesheet should style ::scroll-button(*) the same as a <button>, using the same default appearance: auto which can be changed to appearance: none for greater customization.
2. The default UA stylesheet should style ::scroll-marker the same as an unvisited link, as this indicates to the user the expected behavior.

@tabatkins do you know if / where these styles are specified to link to?

Open questions,

• Should appearance not switch button styling as it does with regular <button> elements? (inline issue)?
• Should ::scroll-marker have a UA :target-current style?

[flackr]

@tabatkins do you know if / where these styles are specified to link to?

I did a search, and as far as I can tell, there is no specification of what an appearance: none button looks like in css-ui-4 and only a non-normative specification of how links could be styled in css-color-4, so this suggests that if we want these to align it should just make reference to being styled the same as buttons and links.

[tabatkins]

Right, there's no definition of the "primitive appearance" right now. It exists only in the browsers' own UA stylesheets.

I agree we should just say that they're styled "like buttons", with reference to button's "native appearance" and "primitive appearance".

[flackr]

Here's an example page that only sets the content property and otherwise uses the default UA styles as rendered on Chrome Canary on a Mac:

The ::scroll-button pseudo-elements appear the same as buttons and the ::scroll-marker pseudo-elements appear the same as links that never match :visited.

[css-meeting-bot]

The CSS Working Group just discussed [css-overflow-5] Default UA styles for scroll markers and scroll buttons, and agreed to the following:

• RESOLVED: Default styling for scroll markers will match default styling for links. Default styling for scroll buttons will match default styling for buttons (and appearance will apply accordingly).

The full IRC log of that discussion

<fantasai> flackr: We want to have a reasonable default styling for scroll markers and buttons, so they're visible
<fantasai> flackr: Our suggestion is to make scroll buttons to render like buttons, including handling 'appearance'.
<fantasai> flackr: and scroll markers would look like links
<fantasai> flackr: since they're interactive etc.
<TabAtkins> q+
<astearns> ack TabAtkins
<fantasai> TabAtkins: you did bring up question of appearance?
<fantasai> flackr: I implemented it, think it should
<fantasai> TabAtkins: agree
<astearns> ack fantasai
<kbabbitt> fantasai: the interesting question is whether the scroll markers match the ? pseudo class
<TabAtkins> :visited/:link
<kbabbitt> fantasai: technically they can't because :link by itself selects elements but not pseudos
<kbabbitt> fantasai; wondering what we want to do about that
<fantasai> s/;/:/
<fantasai> TabAtkins: So if page author changes their :link style, wouldn't change scroll markers?
<fantasai> fantasai: right
<chrishtr> q+
<fantasai> flackr: agree that would be nice... open to suggestions?
<JoshT> q+
<chrishtr> q-
<fantasai> astearns: If we don't find a way of having link styling apply to scroll marker, then what we're doing is requiring authors to add the ::scroll-marker selector to their link styling block
<fantasai> fantasai: which they're not going to remember to do
<fantasai> JoshT: Why are they being styled as links rather than buttons?
<fantasai> flackr: They scroll to content, just like regular links do
<chrishtr> it seems unlikely to me that developers won't notice that these Pseudos have the wrong colors, and then go fix it
<fantasai> JoshT: In the past, authors probably would have implemented as buttons; but I see the logic
<fantasai> TabAtkins: it depends what you're doing. Carousel dots, more like buttons; but for ToC, more like a link.
<chrishtr> the colors being wrong will make their scroll markers look invisible or totally wrong in prominent site ui
<fantasai> JoshT: What is the aria role?
<fantasai> flackr: They're tabs, with scroll marker group being the tablist
<fantasai> astearns: Should we resolve on this, and then try to figure out link styling? Or is this a fundamental question we need to solve?
<fantasai> fantasai: the goal of default styling is to make it visible... if not visible, not a good thing?
<fantasai> TabAtkins: As chrishtr points out, authors will almost always tweak them anyway
<fantasai> TabAtkins: so they're going to notice if looks bad on the page.
<fantasai> TabAtkins: same as if they put a blue background; will notice links are invisible
<fantasai> TabAtkins: so probably fine
<fantasai> astearns: Whether or not fine, could resolve today on default styling for scroll markers matching link styling, and scroll buttons taking button styling
<chrishtr> +1 to this proposed resolution
<fantasai> astearns: anything about appearance?
<fantasai> TabAtkins: appearance applies to scroll buttons same as regular buttons
<fantasai> PROPOSED: Default styling for scroll markers will match default styling for links. Default styling for scroll buttons will match default styling for buttons (and appearance will apply accordingly).
<fantasai> RESOLVED: Default styling for scroll markers will match default styling for links. Default styling for scroll buttons will match default styling for buttons (and appearance will apply accordingly).
<fantasai> flackr: I'll open a separate issue for the :link-matching