Keyborder

Navigating through the DOM while using flexbox’s order property is not an easy task. Keyborder to the rescue!

HTML

<div class="container-a" style="display: flex">
  <a href="/" style="order: 3;">One</a>      
  <a href="/" style="order: 2;">Two</a>      
  <a href="/" style="order: 1;">Three</a>
</div>

<div class="container-b" style="display: flex">
  <div class="box a" style="order: 3" tabindex="0">A</div>
  <div class="box b" style="order: 1" tabindex="0">B</div>
  <div class="box c" style="order: 2" tabindex="0">C</div>
</div>

JavaScript

new Keyborder('.container-a');
new Keyborder('.container-b');

Focusable Elements

Non Focusable Elements

A
B
C