title: How to navigate between buttons using keyboard arrow keys?
body: <p>I have an html structure like this</p>
  
  <pre><code>&lt;div class="my-class" role="tablist" aria-label="upcoming week"&gt;
    &lt;button id="Thu" class="title-box" role="tab" aria-controls="Thu-tab" aria-selected="false"&gt;Thu &lt;/button&gt;
    &lt;button id="Fri" class="title-box selected" role="tab" tabindex="0" aria-controls="Fri-tab" aria-selected="true"&gt;Fri&lt;/button&gt;
    &lt;button id="Sat" class="title-box" role="tab" tabindex="0" aria-controls="Sat-tab" aria-selected="false"&gt;Sat&lt;/button&gt;
    &lt;button id="Sun" class="title-box" role="tab" tabindex="0" aria-controls="Sun-tab" aria-selected="false"&gt;Sun&lt;/button&gt;
    &lt;button id="Mon" class="title-box" role="tab" tabindex="0" aria-controls="Mon-tab" aria-selected="false"&gt;Mon&lt;/button&gt;
    &lt;button id="Tue" class="title-box" role="tab" tabindex="0" aria-controls="Tue-tab" aria-selected="false"&gt;Tue&lt;/button&gt;
    &lt;button id="Wed" class="title-box" role="tab" tabindex="0" aria-controls="Wed-tab" aria-selected="false"&gt;Wed&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With using keyboard tab key, I can move to the next button. But with keyboard arrow keys it is not working.</p>
  
  <p>Is it possible to navigate between these buttons using keyboard arrow keys to move forward or backward?</p>
  
  <p>What attributes I am missing for the keyboard arrow keys?</p>