mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-10 01:05:14 +00:00
Improve a11y document and dropdown item (#29753)
Co-authored-by: silverwind <me@silverwind.io> (cherry picked from commit e01b0014de5b732181ac42c03a77c21219f88c6a)
This commit is contained in:
parent
f99cf911e8
commit
1d4bf7e211
|
@ -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:
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue