Improve a11y document and dropdown item (#29753)

Co-authored-by: silverwind <me@silverwind.io>
go-gitea · Mar 13, 2024 · e01b001 · e01b001
1 parent 3e94ac5
commit e01b001
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/docs/content/contributing/guidelines-frontend.zh-cn.md b/docs/content/contributing/guidelines-frontend.zh-cn.md
@@ -53,7 +53,7 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。
 ### 可访问性 / ARIA
 
 在历史上，Gitea大量使用了可访问性不友好的框架 Fomantic UI。
-Gitea使用一些补丁使Fomantic UI更具可访问性（参见`aria.js`和`aria.md`），
+Gitea 使用一些补丁使 Fomantic UI 更具可访问性（参见 `aria.md`），
 但仍然存在许多问题需要大量的工作和时间来修复。
 
 ### 框架使用

diff --git 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
@@ -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