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_);