Use tabindex to Specify the Order of Keyboard Focus for Several Elements, Do this work in here?

HTML-CSS
1

Tell us what’s happening:
Well, I did as supposed, it passed the test too, but after I added tabindex=“1” and “2”, the submit and search inputs didnt get focus at all

Your code so far


<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>
    
    
    <input type="search" tabindex="1" name="search" id="search">
    <input type="submit" tabindex="2"name="submit" value="Submit" id="submit">
    
    
  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:

2

Hi,

I face the same issue.

What I’ve noticed that if we adjust the negative tabindex to the a tags then everything works fine.

        <li><a tabindex="-1" href="">Home</a></li>
        <li><a tabindex="-1" href="">Blog</a></li>
        <li><a tabindex="-1"  href="">Training</a></li>

There is something like an issue on that specific page or with browser.

2 Likes
3

For example, on the MDN page related to the tabindex attribute everything works fine:

4

Thanks, I was interested if anyone has the same problem. I searched on MDN too and it works there as explained even here, on FCC, so it seems tome that the problem is in embedded exercise window of FCC

5

it seems the placement of the tabindex attribute is important.

    <input tabindex="1" type="search" name="search" id="search">
    <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">

this passes the test
the attribute must be the first attribute declared after the html tag

6

Hi,

This code snippet will also pass the test.

 <input type="search" name="search" id="search" tabindex="1">
 <input type="submit" name="submit" value="Submit" id="submit" tabindex="2">

The issue is reproduced when you specified tabindex for those inputs. Then you click the OUTPUT AREA (on the very right) and start pushing the TAB button, it never switches to those two input elements.

3 Likes