Why Won't Tabindex Work with Firefox

tabindex not working same in chrome and firefox

Solutions for your problem is to add negative tab index (tabindex="-1") to links inside your <li>.

For more details on tabindex you may read this.

https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

* {

  margin: 0;

  padding: 0;

}

.menu ul {

  list-style: none;

}

.menu ul > li {

  display: inline-block;

  position: relative;

}

.menu ul > li a {

  display: block;

  padding: 5px 10px;

}

.menu ul > li > ul {

  position: absolute;

  display: none;

}

.menu ul > li.open > ul,

.menu ul > li:hover > ul {

  display: block;

}

<div class="menu">

  <ul>

    <li tabindex="0"><a tabindex="-1" href="#">Link 1</a></li>

    <li tabindex="0" ><span>dropdown 1</span>

      <ul>

        <li><a href="#">Link 1</a></li>

        <li><a href="#">Link 2</a></li>

        <li><a href="#">Link 3</a></li>

        <li><a href="#">Link 4</a></li>

      </ul>

    </li>

    <li tabindex="0"><a tabindex="-1" href="#">Link 2</a></li>

    <li tabindex="0"><a href="#">Link dropdown</a>

      <ul>

        <li><a href="#">Link 1</a></li>

        <li><a href="#">Link 2</a></li>

        <li><a href="#">Link 3</a></li>

        <li><a href="#">Link 4</a></li>

        <li><a href="#">Link 4</a></li>

      </ul>

    </li>

  </ul>

</div>

How to allow keyboard focus of links in Firefox?

Ok, somebody explained this to me. It's a Mac problem. Mozilla is being true to operating system settings in Mac OS.

There are two distinct ways around this on the user side. Both seem to work:

1. In System Preferences → Keyboard, in the Shortcuts pane, check the “all controls” radio at the bottom.

2. In Firefox, type "about:config" in the URL bar. There is no accessibility.tabfocus preference on the mac, so you'll have to make one. Right click in the window, create a new "integer" pref, and set it to 7.

Neither of these are terribly obvious. Also, neither of these are a server-side solution for developers, which is frustrating.

Cannot get keyboard focused for a link elements in SVG under Firefox

Tabindex and focus/blur support for SVG has just been implemented in Firefox and will appear in version 51.

You can see it in a Nightly right now if you want.

---

Related Topics