[csswg-drafts] [css-ui-4] nav-top/down/left/right to switch to its previous and next focusable element in document order

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

== [css-ui-4] nav-top/down/left/right to switch to its previous and next focusable element in document order ==
Sometimes, it's useful for `nav-*` group properties to switch to previous and next focusable element in document order. For example

```
<ol id="tv-forecast">
 <li id="mon-1am" tabindex="0">...</li>
 <li id="mon-2am" tabindex="0">...</li>
 <li id="mon-3am" tabindex="0">...</li>
 ...
</ol>
```

When a navigatable list is long or frequently adjusted, the `nav-*` properties become unrealistic to maintain via pure CSS. Although scripting can do the job, it's not a pretty idea for script to directly care about and mess with styling.

So I'd like to suggest we add two values **`previous`**, **`next`** to those `nav-*` properties, letting them to switch to its previous and next focusable element in document order.

Now the job can be done with static CSS, regardless how long the list or how frequent its adjustment would be:

```
html:not([data-vert-rl]) ol#tv-forecast > li
{
 nav-up: previous;
 nav-down: next;
}

html[data-vert-rl] ol#tv-forecast > li
{
 nav-right: previous;
 nav-left: next;
}

... /*Special values of nav-* for li:first-child and li:last-child*/
```

I am looking forward to hearing from your opinions.

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

Received on Tuesday, 7 August 2018 07:37:20 UTC