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

Question

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/

Please make your question more clear, exact requirements, example of expected behavior perhaps? — EaziLuizi, Sep 21 '16 at 08:15

score 2 · Answer 1 · answered Sep 21 '16 at 08:21

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

Just found this one: http://stackoverflow.com/questions/4115953/where-do-tabindex-0-html-elements-end-up-in-the-tabbing-order — salih0vicX, Sep 21 '16 at 08:23

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

1 Answers1