realaravinth/forgejo-federation
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity

Remove inputs in dropdowns from taborder

Browse source 
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
1 changed files with 1 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web_src/js/modules/fomantic/dropdown.js
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