[css-ui][css-anchor] Anchors in Focus Navigation properties `nav-*`

[Crissov]

The nav-… properties for directional focus navigation in CSS UI 4 are among a small set of properties that accept a local URL in the host document as their value.

nav-up =
nav-down =
nav-right =
nav-left = auto 
         | <id> [ current | root | <target-name> ]?

It’s simply <id> here, is always unquoted and starts with the usual hash sign #. In comparison, the cross-reference target-…() functions use [<string> | <url>] as their prime argument. There is #12590 to discuss whether or how that is a bad design decision.

I don’t really know the full specification and implementation history of these properties – CanIUse.com, MDN etc. are rather quiet on them, but did skim over some older drafts. They were punted to Level 4 after the 2017 CR of CSS UI Level 3.

Although the Spatial Navigation module has been drafted in the meantime, these properties cannot simply be dropped, because apparently they have been available in special-purpose TV browsers for many years since support for them is mandatory in specifications like CEA-2014-A / ANSI/CTA-2014-B (“CE-HTML”, “Web4CE”), OIPF and HbbTV 1.5/2.0. However, they were not included in the now retired CSS TV profile, which also got referenced normatively in non-obsolete standards for consumer electronics products.

((In earlier working drafts, there also used to be a numeric nav-index property that was intended to correspond with the tabindex attribute in HTML. It was dropped in early 2015 although OIPF, for instance, mandated support for it.))

Note that the <id> property value cannot really come from an attribute value in the host language because attr() is intentionally crippled for URLs. #12340

h2 {
  nav-up: #toc;
  nav-left: attr(data-prev-chapter type(<url>));
  nav-right: attr(data-next-chapter type(<url>));
}
a[href^="#"], a:local-link {
  nav-down: attr(href type(<url>));
}

Therefore, could these four properties for spatial navigation, i.e. nav-up, nav-down, nav-right and nav-left, reuse CSS-internal implicitly and explicitly defined, named anchors as their targets, …

h2 {
  nav-right: --next-chapter;
  nav-down: --chapter-start;
}
h2:focus ~ h2 {
  anchor-name: --next-chapter;
}
h2:focus + p {
  anchor-name: --chapter-start;
}

… possibly using a new function related to existing cross-references?

h2 {
  anchor-name: --chapter, ident("--" attr(id));
  nav-up: target(auto);
  nav-left: target(previous --chapter);
  nav-right: target(next --chapter);
  nav-down: target(next --chapter-start), target(next element);
}
h2 + p {
  anchor-name: --chapter-start;
}