Re: [csswg-drafts] [css-ui] Add a property controlling the navigation order

> I think `visual` value would be nice, but wonder it can cover all the factors which affect the visual order.
> The factors would be:
> 
> * Absolute positioning
> * Fixed positioning
> * Sticky positioning
> * Float positioning
> * Flexbox layout
>    `flex-direction: row | row-reverse | column | column-reverse`
>    `order: < number >`
> * Grid layout
> * [writing-mode](https://drafts.csswg.org/css-writing-modes-3/#block-flow) (text can be focusable with 'tabindex')

Thank you for pointing this out again! As I [wrote earlier](https://github.com/w3c/csswg-drafts/issues/1764#issuecomment-326274118), absolute, fixed, sticky and float positioning can easily be handled regarding the visual order. It may also apply to Flexbox, Grid Layout and the writing mode, though that needs to be discussed.

Could be that it needs to be renamed to `logical`, or `logical` needs to be introduced as a third option, so it can be defined to follow the most expected order.

> Also, the navigation order is affected by the value of 'tabindex' and it isn't always the same with the document order nor visual order.
> The `structural` value considers the order by 'tabindex' attribute?

The `nav-order` property only defines the **default** navigation order. It can be overwritten for individual elements via the `tabindex` attribute, the `nav-index` property suggested in #1748, or other properties like the `nav-up`/`nav-right`/`nav-down`/`nav-left` properties [defined in CSS UI 4](https://drafts.csswg.org/css-ui-4/#nav-dir).

Short example:

```html
<form id="myform">
  <input id="firstname"/>
  <input id="lastname"/>
  <input id="dateofbirth" type="date"/>
  <input id="city"/>
</form>
```

```css
#myform {
  display: flex;
  flex-direction: row-reverse;
  nav-order: visual;
}
```

This would result in the order to be `#city`, `#dateofbirth`, `#lastname`, `#firstname` for LTR writing modes.

```css
#myform {
  display: flex;
  nav-order: visual;
}

#firstname { order: 2; }
#lastname { order: 4; }
#dateofbirth { order: 1; }
#city { order: 3; }
```

⇒ `#dateofbirth`, `#firstname`, `#city`, `#lastname` (as that's the visual order).

Sebastian

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

Received on Tuesday, 5 September 2017 07:38:36 UTC