CODEWITHSUNDEEP
htmltabindex
sameer
sameer

Reputation: 320

element with tabindex 0 to next element with tabindex 1+ is not focused

I am having a HTML template with set of <a> tags. Added tabindex for the elements.

Issue is on clicking tab button to focus, element with tabindex 1+ is not focusing.

Requirement is focus should happen on changing the focus from element with tabindex 0 to an element with tabindex 1+.

<div>
    <ul class="gn-filter-anchor-list">

        <li>
            <a title="Under $25.00" tabindex="0" href="/"><span class="off-screen">from Price</span> Under $25.00</a></li>
        <li>
            <a title="$25.00-$49.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $25.00-$49.00</a></li>
        <li>
            <a title="$50.00-$74.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $50.00-$74.00</a></li>
        <li>
            <a title="$75.00-$99.00" tabindex="0" href="/"><span class="off-screen">from Price</span> $75.00-$99.00</a></li>
        <li>
            <a title="Over $100.00" tabindex="0" href="/"><span class="off-screen">from Price</span> Over $100.00</a></li>
  </ul>
</div>
<div >
    <div class="dept-large"><a href="/" tabindex="2">xxx</a></div>
    <div class="dept-large"><a href="/" tabindex="1">xxx</a></div>
    <div class="dept-large"><a href="/" tabindex="1">xxx</a></div>  
</div>
<div >
    <ul class="pagination" >
        <li class="current"><a href="#" >1</a></li>
        <li class="odd first"><a href="#" >2</a></li>
        <li class="even"><a href="#" >3</a></li>
        <li class="odd"><a href="#" >4</a></li>
    </ul>
</div>

https://jsfiddle.net/sameer_ngl/mjps7ufs/

Upvotes: 0

Views: 2012

Answers (1)

salih0vicX
salih0vicX

Reputation: 1373

See below:

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values:

  • a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
  • 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
  • a positive value means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document.

An element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

Upvotes: 2

Related Questions