From 7dc453bb398a63597bfa5f65b7a4c2ea45fc9e09 Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Tue, 12 Mar 2024 02:03:30 +0100 Subject: [PATCH] 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. --- web_src/js/modules/fomantic/dropdown.js | 1 + 1 file changed, 1 insertion(+) diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js index c053256dd5..36b2b4ca04 100644 --- a/web_src/js/modules/fomantic/dropdown.js +++ b/web_src/js/modules/fomantic/dropdown.js @@ -39,6 +39,7 @@ function updateMenuItem(dropdown, item) { item.setAttribute('role', dropdown[ariaPatchKey].listItemRole); item.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