1

I have an HTML page with a bunch of HTML audio elements (with enabled controls) interwined with text input elements. Audio elements have tabindex="-1", and text inputs have positive tabindex. This does not prevent Chrome from iterating over 6 control elements when doing TAB key navigation.

Maybe audio controls are exempt from tabindex behavior: https://github.com/w3c/webcomponents/issues/762 but if not:

Can one disallow them from getting focus from keyboard (without JavaScript; my JS workaround is below)? I'd like the user to be able to use TAB to iterate only text inputs (and use mouse to play audio if necessary), it's for a crowdsourcing scenario, so saving user effort is important.

Following @makusium's comment I came up with the following JavaScript workaround:

function onkeydown_(evt)
{
        const tab = evt.keyCode == 9, shift = evt.shiftKey;
        const tabIndex = (document.activeElement || {tabIndex : -1}).tabIndex;
        if(tab)
        {
                const newTabIndex = shift ? Math.max(0, tabIndex - 1) : tabIndex + 1;
                const newElem = document.querySelector(`[tabindex="${newTabIndex}"`);
                if(newElem)
                        newElem.focus();
                return false;
        }
        return true;
}

document.addEventListener('keydown', onkeydown_);
Vadim Kantorov
  • 930
  • 1
  • 10
  • 28

0 Answers0