Make focusable element impractical on webkit
When the node parameter has a tabIndex parameter (other than -1), clicking on it will give it focus. Removing the tabIndex parameter should stop this behavior for the click to have no effect.
However, in webkit, after a node has a tabIndex, even after removing the tabIndex, the node can be clicked and focused. Setting tabIndex = -1 also has the same click issue.
Does anyone know a workaround for this problem?
<div id="one">one (no initial tabindex)</div>
<div id="two" tabindex=0>two (initially tabindex=0)</div>
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', 0)">set tabindex on first div</button>
<button type=button onclick="document.getElementById('one').removeAttribute('tabindex', 0)">remove tabindex on first div</button>
<button type=button onclick="document.getElementById('two').removeAttribute('tabindex', 0)">remove tabindex on second div</button>
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', -1)">set tabindex=1 on first div</button>
<button type=button onclick="document.getElementById('two').setAttribute('tabindex', -1)">set tabindex=1 on second div</button>
a source to share
Try removing the second parameter from removeAttribute. You will end up with something like this:
<div id="one">one (no initial tabindex)</div>
<div id="two" tabindex=0>two (initially tabindex=0)</div>
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', 0)">set tabindex on first div</button>
<button type=button onclick="document.getElementById('one').removeAttribute('tabindex')">remove tabindex on first div</button>
<button type=button onclick="document.getElementById('two').removeAttribute('tabindex')">remove tabindex on second div</button>
<button type=button onclick="document.getElementById('one').setAttribute('tabindex', -1)">set tabindex=1 on first div</button>
<button type=button onclick="document.getElementById('two').setAttribute('tabindex', -1)">set tabindex=1 on second div</button>
Let me know how it works for you.
a source to share
One way to avoid focusing on elements is to use the onfocus event.
For example, element.onfocus = function () { this.blur(); }
but this is undesirable as it makes navigation through TAB useless. .blur()
resets the current index, so when it reaches that element, TABbing starts at 0.
An alternative might be to find the next custom element and focus on it rather than blur at all. This, thought, also breaks shift + tab, so it is still not recommended.
The only way to fix this issue is to fix it yourself in WebKit or wait for it to be fixed.
a source to share