W3C home > Mailing lists > Public > public-css-archive@w3.org > September 2017

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

From: Jihye Hong via GitHub <sysbot+gh@w3.org>
Date: Wed, 06 Sep 2017 05:33:39 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-327379428-1504676010-sysbot+gh@w3.org>
> Short example:

Nice example! How about for the Grid layout?
For example, there is a sample like this:

```html
<div id="grid">
  <div id="section1">
    <button id="btn1">Button</button>
    <button id="btn2">Button</button>
  </div>
  <div id="section2">
    <button id="btn3">Button</button>
    <button id="btn4">Button</button>
    </button>
  </div>
  <div id="section3">
    <button id="btn5">Button</button>
    <button id="btn6">Button</button>
</div>

```
```css
#grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}

#section1 {
  grid-column: 1 / 3;
}

#section2 {
  grid-column: 2;
 grid-row: 2;
}

#section3 {
  grid-column: 1 ;
  grid-row: 2;
}
```
The DOM order (structural order) is `#btn1`, `#btn2`, `#btn3`, `#btn4`, `#btn5`, `#btn6` and it is the default tab order. You can see how it works[ here](https://jihyerish.github.io/focus-grid/).
Is it right that if `nav-order: visual` is given to `#grid`, then the tab order is changed to `#btn1`, `#btn2`, `#btn5`, `#btn3`, `#btn6`, `#btn4`?

-- 
GitHub Notification of comment by jihyerish
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1764#issuecomment-327379428 using your GitHub account
Received on Wednesday, 6 September 2017 05:33:36 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:17 UTC