pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request '[port] gitea#29753: Improve a11y document and dropdown item' (#2745) from algernon/forgejo:gitea/port/29753 into forgejo

Browse source 
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2745
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
Earl Warren 2024-03-23 14:50:50 +00:00
parent 012ed7019a 1d4bf7e211
commit 5f73b2bd5b
2 changed files with 6 additions and 7 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:

3
web_src/js/modules/fomantic/dropdown.js
View file

@ -38,8 +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');
for (const input of item.querySelectorAll('input')) input.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