[csswg-drafts] [css-pseudo-4] ::self-link pseudo, for self-linking (#10498)

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

== [css-pseudo-4] ::self-link pseudo, for self-linking ==
A very common UI pattern these days is to have headings (and sometimes other elements with an ID) provide a link to themselves, to make it easy to grab a link specifically to that element. Both Bikeshed and ReSpec specs do this for all headings (and for some other elements); GitHub does this for headings in Markdown files; tools like <https://github.com/daviddarnes/heading-anchors> exist to make it easy to get this effect in HTML; etc.

We should consider adding this as a pseudo-element for convenience to authors, so they don't have to either add some busywork markup, run a preprocessing step, or run JS over their page, just to get useful self-links.

Previously this wasn't really doable; at the moment, pseudo-elements aren't focusable in Chrome, for example. But we're fixing that for Carousel-related purposes, since that proposal *also* has navigation-related pseudo-elements that need to be part of the page's focus order. I'll assume that this is indeed fixed in UAs, so a pseudo can participate in the focus order and other AT features the same as an actual link element; we could put a requirement in the spec that UAs have this behavior before they implement this pseudo.

Proposed behavior:

* New pseudo, named ::self-link (or ::anchor-link, or something else).
* Similar to ::before/etc, only exists if `content` isn't `none`. Also requires the originating element to be linkable, per the host language's semantics. (In HTML, this means the element has an ID.)
* If created, functions as a hyperlink to its originating element.
* In the box tree, placed immediately after ::before, I think? Possibly we can go with an approach like Carousel and have a property that controls whether it shows up at the start (just after ::before) or at the end (just before ::after) of the originating element.
* AT-wise, treated identically to an actual link, in the host language's semantics, placed at that location. The UA can automatically provide a more informative accessible name, tho. (Rather than the symbol that's usually used for its content.)

--------

This is *potentially* better done as an HTML feature, fwiw, tho that would require adding an attribute or whatever to every element you want to apply this to. That's certainly far *less* work than adding the markup by hand is today, but it's not *nothing*, and generally you'll want to apply this to *all* headings/etc in your document, with identical behavior across all of them, so having an HTML attribute isn't great usability-wise.

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


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

Received on Tuesday, 25 June 2024 23:35:21 UTC