Re: [csswg-drafts] Please add "tab-index" to CSS specification

@jihyerish Your example can be handled without defining any order, as the default order is how the elements appear in the DOM.

So, a better example is when you want to toggle through them in a different order. E.g. let's say we want the order to be `#b1`, `#b3`, `#b5`, `#b2`, `#b4`, then the CSS would look like this:

```css
button#b1 {
  nav-index: 1;
}
button#b2 {
  nav-index: 4;
}
button#b3 {
  nav-index: 2;
}
button#b4 {
  nav-index: 5;
}
button#b5 {
  nav-index: 3;
}
```

vs.

```css
button#b1 {
  nav-next: #b3;
}
button#b2 {
  nav-pre: #b5;
  nav-next: #b4;
}
button#b3 {
  nav-pre: #b1;
  nav-next: #b5;
}
button#b4 {
  nav-pre: #b2;
}
button#b5 {
  nav-pre: #b3;
  nav-next: #b2;
}
```

> If I want to add a new button element(#new) and make it have a tab order between the button #b2 and the button #b3, I have to modify the tab order of all the next button element after the button #new when using 'nav-index'.

That's probably the biggest disadvantage of having an absolute index property. One big advantage is that it corresponds to the `tabindex` HTML attribute.

> But when using nav-pre & nav-next, I need to modify the tab order the very previous and next button of the button #new. This way is easier to use.

As it probably doesn't make sense to specify two different navigation paths for forward and backward, I think only `nav-next` is needed. Applied to the example above this would then be:

```css
button#b1 {
  nav-next: #b3;
}
button#b2 {
  nav-next: #b4;
}
button#b3 {
  nav-next: #b5;
}
button#b5 {
  nav-next: #b2;
}
```

And the backward navigation is automatically inferred from the forward navigation.

>> Regarding nav-up, nav-right, nav-down, nav-left - it is good idea for table DATA layouts (like online emulation of MS Excel) but... it generates id-itis. All elements need to have "id". Is there possibility to avoid of it (too many id's)?
>
> I think we can just give the direction to find the previous or the next element to nav-pre or nav-next. So the previous or the next element will be the closest element in the direction.
For example, the value type can be ray() that specifies the straight line with an angle starting from the element.
nav-next: ray(45%) means that the next element is the closest element which is at 45 degree angle from the current element.

In my opinion, navigation should initially have specified that way, i.e. regarding the visual placement of the element for the default navigation order.

Your idea sounds quite interesting, though I'm not sure whether that's feasible. It requires people to calculate the angle between the elements to get the right order. What if there's no element in that direction?

In regard of my previous sentence, what about introducing a property that allows to specify a visual navigation order? E.g.:

```css
nav-order: strutural | visual;
```

With `visual` just doing The Right Thing™ regarding writing mode.

Having said that, this might be introduced additionally to any explicit way to set a navigation index.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1748#issuecomment-324283133 using your GitHub account

Received on Wednesday, 23 August 2017 10:04:28 UTC