Tabbing doesn't focus on first element - Use tabindex to Specify the Order of Keyboard Focus for Several Elements

Tell us what’s happening:
I have the same issue as the problem here: Applied Accessibility - Use tabindex to Specify the Order of Keyboard Focus for Several Elements

When I click into the preview pane and press tab, the first thing it jumps to is “Home”. Then it goes to “Blog”, then “Training”, and the skips the search bar and submit button entirely. This happens no matter where I click on the preview pane, except when I click along the same horizontal axis as the search bar (see attached picture).

I tried copy-pasting this code into into Atom and opened the HTML file in Chrome, and it works when I open the file. I can get it to work each time if I refresh the page, and press tab without clicking. However, once I click on the page, it exhibits the same behaviour as above. Is clicking on the page changing this behaviour? I think it might have something to do with the section I’m clicking (i.e. the enclosing element; see picture), but I’m not sure if that’s intended behaviour. If so, can this exercise be updated or changed to note this? If not, can someone explain what the issue is to me?

Thank you in advance.

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" name="search" id="search" tabindex="1">
    <input type="submit" name="submit" value="Submit" id="submit" tabindex="2">
    
    
  </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/70.0.3538.102 Safari/537.36.

Link to the challenge:

This challenge passes all tests on my end.

Hi Zootechdrum,

It passes all the tests on my end too. What I was wondering about was just the behaviour of what is meant to happen vs. what actually happened. The tests are passed fine, but when I start to tab from the page, it does not follow the behaviour as described by the explanation on the left side of the screen.

I was wondering if anyone could explain that to me, or whether it was another issue that I did not know.

Thanks,

blademagic

I have the exact same kind of problem. Maybe it is related to the freecodecamp editor.

I have tried it with the MDN documentation and it works perfectly fine
MDN tabindex documentation

Hello brothers, I found the answer from someone. What he said is that you need to click first in the output panel and then if you click tab, it’ll will directly go to the search button. It worked for me