From f99cf911e85e37684624c316094f4b6d2635728d Mon Sep 17 00:00:00 2001
From: Gergely Nagy <forgejo@gergo.csillger.hu>
Date: Sat, 23 Mar 2024 14:35:59 +0100
Subject: [PATCH 1/2] Revert "Remove inputs in dropdowns from taborder"
This reverts commit 7dc453bb398a63597bfa5f65b7a4c2ea45fc9e09.
---
web_src/js/modules/fomantic/dropdown.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
index d2d3e86843..ecf264d57b 100644
--- a/web_src/js/modules/fomantic/dropdown.js
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -39,7 +39,6 @@ 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
From 1d4bf7e211db0866774fa3f6f563e15ffadac1f6 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 13 Mar 2024 21:44:46 +0800
Subject: [PATCH 2/2] Improve a11y document and dropdown item (#29753)
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit e01b0014de5b732181ac42c03a77c21219f88c6a)
---
web_src/js/modules/fomantic/aria.md | 10 +++++-----
web_src/js/modules/fomantic/dropdown.js | 2 +-
2 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md
index a32d15f46f..f639233346 100644
--- a/web_src/js/modules/fomantic/aria.md
+++ b/web_src/js/modules/fomantic/aria.md
@@ -2,10 +2,10 @@
This document is used as aria/accessibility(a11y) reference for future developers.
-There are a lot of a11y problems in the Fomantic UI library. This `aria.js` is used
-as a workaround to make the UI more accessible.
+There are a lot of a11y problems in the Fomantic UI library. Files in
+`web_src/js/modules/fomantic/` are used as a workaround to make the UI more accessible.
-The `aria.js` is designed to avoid touching the official Fomantic UI library,
+The aria-related code is designed to avoid touching the official Fomantic UI library,
and to be as independent as possible, so it can be easily modified/removed in the future.
To test the aria/accessibility with screen readers, developers can use the following steps:
@@ -14,7 +14,7 @@ To test the aria/accessibility with screen readers, developers can use the follo
* Press `Command + F5` to turn on VoiceOver.
* Try to operate the UI with keyboard-only.
* Use Tab/Shift+Tab to switch focus between elements.
- * Arrow keys to navigate between menu/combobox items (only aria-active, not really focused).
+ * Arrow keys (Option+Up/Down) to navigate between menu/combobox items (only aria-active, not really focused).
* Press Enter to trigger the aria-active element.
* On Android, you can use TalkBack.
* Go to Settings -> Accessibility -> TalkBack, turn it on.
@@ -75,7 +75,7 @@ Fomantic Dropdown is designed to be used for many purposes:
Fomantic Dropdown requires that the focus must be on its primary element.
If the focus changes, it hides or panics.
-At the moment, `aria.js` only tries to partially resolve the a11y problems for dropdowns with items.
+At the moment, the aria-related code only tries to partially resolve the a11y problems for dropdowns with items.
There are different solutions:
diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js
index ecf264d57b..7302078dbd 100644
--- a/web_src/js/modules/fomantic/dropdown.js
+++ b/web_src/js/modules/fomantic/dropdown.js
@@ -38,7 +38,7 @@ function updateMenuItem(dropdown, item) {
if (!item.id) item.id = generateAriaId();
item.setAttribute('role', dropdown[ariaPatchKey].listItemRole);
item.setAttribute('tabindex', '-1');
- for (const a of item.querySelectorAll('a')) a.setAttribute('tabindex', '-1');
+ for (const el of item.querySelectorAll('a, input, button')) el.setAttribute('tabindex', '-1');
}
// make the label item and its "delete icon" has correct aria attributes