Firefox moves focus off current element when using arrow keys unlike Chrome or Safari

Question

I have a menu that the user can click. Clicking a button in the menu replaces text and image content on the page. Much like a tabs menu.

I'm working on the accessibility of this feature.

I have the following code that includes and event listener for keydown:

const tabList = document.querySelector('[role="tablist"]');
const tabs = tabList.querySelectorAll('[role="tab"]');

let tabFocus = 0;

tabList.addEventListener('keydown', (e) => {
    const keydownLeft = 37;
    const keydownRight = 39;

    if (e.keyCode === keydownLeft || e.keyCode === keydownRight) {
        tabs[tabFocus].setAttribute("tabindex", -1);
    }

    if (e.keyCode === keydownRight) {
        if (tabFocus < tabs.length-1) {
          tabFocus++;
        } else {
          tabFocus = 0;
        }

    }

    if (e.keyCode === keydownLeft) {
      if (tabFocus > 0) {
        tabFocus--;
      } else {
        tabFocus = tabs.length - 1;
      }

    }

    tabs[tabFocus].setAttribute("tabindex", 0);
    tabs[tabFocus].focus();
})

Here is the HTML:

  <div role="tablist" aria-label="destination list">
    <button role="tab" aria-selected="true" aria-controls="moon-tab"  tabindex="0">Moon</button>
    <button role="tab" aria-selected="false"  aria-controls="mars-tab"  tabindex="-1">Mars</button>
    <button role="tab" aria-selected="false"  aria-controls="europa-tab"  tabindex="-1">Europa</button>
    <button role="tab" aria-selected="false" aria-controls="titan-tab"  tabindex="-1">Titan</button>
  </div>

In Chrome 100.0.4896.127 and Safari 15.4 (17613.1.17.1.13) once the first element in the tablist has focus I can use the left and right arrow keys to move through the buttons.

However, in Firefox 99.0.1 (64-bit) when I click the arrow keys this does not happen because the focus completely leaves the tablist and the buttons.

I've Googled this and no one seems to report this issue. So I must be doing something wrong.

Any ideas how I can get this to work in Firefox?

Answer 1

I found the solution:

In Firefox go to

settings > general

In the search field type

 "Always use the cursor keys to navigate within pages"

Uncheck this setting. and

Now the arrow keys can be used to move focus.