Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve a11y document and dropdown item #29753

Merged
merged 5 commits into from
Mar 13, 2024
Merged

Improve a11y document and dropdown item #29753

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0efb257
fix
wxiaoguang Mar 13, 2024
ce82e68
Update web_src/js/modules/fomantic/aria.md
wxiaoguang Mar 13, 2024
b9f6db5
Update web_src/js/modules/fomantic/aria.md
wxiaoguang Mar 13, 2024
e2bbfbe
Update web_src/js/modules/fomantic/aria.md
wxiaoguang Mar 13, 2024
83cacb2
Merge branch 'main' into fix-aria
wxiaoguang Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/content/contributing/guidelines-frontend.zh-cn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`），
但仍然存在许多问题需要大量的工作和时间来修复。

### 框架使用
Expand Down
10 changes: 5 additions & 5 deletions web_src/js/modules/fomantic/aria.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. Some code in Gitea's own
"js/modules/fomaintic/*.js" files is used as a workaround to make the UI more accessible.
wxiaoguang marked this conversation as resolved.
Show resolved Hide resolved

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:
Expand All @@ -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.
Expand Down Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion web_src/js/modules/fomantic/dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down