Flexbox Order and Tabbing Navigation

user_6386345 0
Viewed 5728

I would like to use display: flex to change the order of divs with line class, but I'd like to maintain this TAB navigation order: A → B → C → D.

As you can see in the snippets, the first example works fine (the DOM sequence is the same of the Order), but in the second example the tab follow the DOM sequence.

Any chance without using javascript?

.container {
  display: flex;
  flex-direction: column;
}

.line {
  padding: 5px;
  border: 1px solid gray;
  margin-bottom: 5px;
}

.line span {
  margin-left: 7px;
}
<h2>
  Tabbing navigation OK
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>2nd div - Order: 2</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 4;"><input value="D"><span>4th div - Order: 4</span></div>
</div>

<h2>
  Tabbing navigation KO
</h2>
<div class="container">
  <div class="line" style="order: 1;"><input value="A"><span>1st div - Order: 1</span></div>
  <div class="line" style="order: 4;"><input value="C"><span>2nd div - Order: 4</span></div>
  <div class="line" style="order: 3;"><input value="C"><span>3rd div - Order: 3</span></div>
  <div class="line" style="order: 2;"><input value="B"><span>4th div - Order: 2</span></div>
</div>

JSFiddle link here.

Thanks in advance

flexbox css html
3 Answers

There is no currently good way to change the visual order via css whether by utilizing flex or floating the content and still maintain the tab order.

Assigning the tabindex attribute when there are many other fields on the page incurs a maintenance issue that shouldn't be present. Opera supposedly assigns tab index as items flow on the page, no other browsers currently do.

user_22684550
Related