From 0efb2571e8514621b7efb424b12fbecf917d664a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 13 Mar 2024 11:19:29 +0800 Subject: [PATCH 1/4] fix --- docs/content/contributing/guidelines-frontend.zh-cn.md | 2 +- web_src/js/modules/fomantic/aria.md | 10 +++++----- web_src/js/modules/fomantic/dropdown.js | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/content/contributing/guidelines-frontend.zh-cn.md b/docs/content/contributing/guidelines-frontend.zh-cn.md index ace0d97f497c4..b5fb8964b3427 100644 --- a/docs/content/contributing/guidelines-frontend.zh-cn.md +++ b/docs/content/contributing/guidelines-frontend.zh-cn.md @@ -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`）， 但仍然存在许多问题需要大量的工作和时间来修复。 ### 框架使用 diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md index a32d15f46fe8d..5eed504e4d28a 100644 --- a/web_src/js/modules/fomantic/aria.md +++ b/web_src/js/modules/fomantic/aria.md @@ -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. -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: diff --git a/web_src/js/modules/fomantic/dropdown.js b/web_src/js/modules/fomantic/dropdown.js index c053256dd5f0d..caba8a2f282de 100644 --- a/web_src/js/modules/fomantic/dropdown.js +++ b/web_src/js/modules/fomantic/dropdown.js @@ -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 From ce82e689449c17d6e3a5e88cee5495935a7252a2 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 13 Mar 2024 14:48:38 +0800 Subject: [PATCH 2/4] Update web_src/js/modules/fomantic/aria.md Co-authored-by: Lunny Xiao --- web_src/js/modules/fomantic/aria.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md index 5eed504e4d28a..622ca3362c7a7 100644 --- a/web_src/js/modules/fomantic/aria.md +++ b/web_src/js/modules/fomantic/aria.md @@ -2,7 +2,7 @@ This document is used as aria/accessibility(a11y) reference for future developers. -There are a lot of a11y problems in the Fomantic UI library. Some code in GItea's own +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. The aria-related code is designed to avoid touching the official Fomantic UI library, From b9f6db52f3733c9b242b9fa47a1345dbb59eadc1 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 13 Mar 2024 21:28:06 +0800 Subject: [PATCH 3/4] Update web_src/js/modules/fomantic/aria.md Co-authored-by: silverwind --- web_src/js/modules/fomantic/aria.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md index 622ca3362c7a7..013a405b92e13 100644 --- a/web_src/js/modules/fomantic/aria.md +++ b/web_src/js/modules/fomantic/aria.md @@ -3,7 +3,7 @@ This document is used as aria/accessibility(a11y) reference for future developers. 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. +"js/modules/fomantic/*.js" files is used as a workaround to make the UI more accessible. 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. From e2bbfbe79061053fbf70d49ca9e58e5f41114f9c Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 13 Mar 2024 21:32:03 +0800 Subject: [PATCH 4/4] Update web_src/js/modules/fomantic/aria.md Co-authored-by: silverwind --- web_src/js/modules/fomantic/aria.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/modules/fomantic/aria.md b/web_src/js/modules/fomantic/aria.md index 013a405b92e13..f639233346c21 100644 --- a/web_src/js/modules/fomantic/aria.md +++ b/web_src/js/modules/fomantic/aria.md @@ -2,8 +2,8 @@ This document is used as aria/accessibility(a11y) reference for future developers. -There are a lot of a11y problems in the Fomantic UI library. Some code in Gitea's own -"js/modules/fomantic/*.js" files 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-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.