Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve a11y document and dropdown item (#29753)

Browse source 
Co-authored-by: silverwind <me@silverwind.io>

(cherry picked from commit e01b0014de5b732181ac42c03a77c21219f88c6a)
This commit is contained in:
wxiaoguang 2024-03-13 21:44:46 +08:00 committed by Gergely Nagy
parent f99cf911e8
commit 1d4bf7e211
No known key found for this signature in database
2 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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