Remove inputs in dropdowns from taborder

Inputs are normally present in the taborder of a website. When they are
inside a dropdown, this means a user could theoretically also tab
through them.

With the current dropdown approach, however, this can result in the
focus being trapped, because the dropdown is closed after the focus
switches to the next element.

In this case, the focus moves to the end of the page, breaking keyword
navigation and making parts of the page inaccessible with a keyboard.

I was only able to reproduce this in Firefox.

This patch removes inputs inside dropdowns from taborder. It should be
generally safe even with potential side-effects, because *nothing*
inside dropdowns should be in the tab order.

This is a hotfix for https://codeberg.org/forgejo/forgejo/issues/2635,
but I acknowledge it is not an ideal solution.
This commit is contained in:
Otto Richter 2024-03-12 02:03:30 +01:00
parent 16a63a16b3
commit 7dc453bb39

View file

@ -39,6 +39,7 @@ function updateMenuItem(dropdown, item) {
item.setAttribute('role', dropdown[ariaPatchKey].listItemRole); item.setAttribute('role', dropdown[ariaPatchKey].listItemRole);
item.setAttribute('tabindex', '-1'); item.setAttribute('tabindex', '-1');
for (const a of item.querySelectorAll('a')) a.setAttribute('tabindex', '-1'); for (const a of item.querySelectorAll('a')) a.setAttribute('tabindex', '-1');
for (const input of item.querySelectorAll('input')) input.setAttribute('tabindex', '-1');
} }
// make the label item and its "delete icon" has correct aria attributes // make the label item and its "delete icon" has correct aria attributes