test1234
/
gitea
forked from gitea/gitea
1
0
Fork 0
Code Pull Requests Activity

Improve a11y document and dropdown item (#29753) 

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2024-03-13 21:44:46 +08:00 committed by GitHub
parent 3e94ac5c7c
commit e01b0014de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/contributing/guidelines-frontend.zh-cn.md
View File

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

10
web_src/js/modules/fomantic/aria.md
View File

@ -2,10 +2,10 @@
This document is used as aria/accessibility(a11y) reference for future developers. 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 There are a lot of a11y problems in the Fomantic UI library. Files in
as a workaround to make the UI more accessible. `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. 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: 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. * Press `Command + F5` to turn on VoiceOver.
* Try to operate the UI with keyboard-only. * Try to operate the UI with keyboard-only.
* Use Tab/Shift+Tab to switch focus between elements. * 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. * Press Enter to trigger the aria-active element.
* On Android, you can use TalkBack. * On Android, you can use TalkBack.
* Go to Settings -> Accessibility -> TalkBack, turn it on. * 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. Fomantic Dropdown requires that the focus must be on its primary element.
If the focus changes, it hides or panics. 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: There are different solutions:

2
web_src/js/modules/fomantic/dropdown.js
View File

@ -38,7 +38,7 @@ function updateMenuItem(dropdown, item) {
if (!item.id) item.id = generateAriaId(); if (!item.id) item.id = generateAriaId();
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 el of item.querySelectorAll('a, input, button')) el.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