From e8ac6a9aeacf0adf21982abc51baa8938e5dd6bb Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 25 Jan 2023 23:52:10 +0800 Subject: [PATCH] Add ARIA support for Fomantic UI checkboxes (#22599) Replace #22593 This is a general approach to add ARIA support for all Fomantic UI checkboxes (including radioboxes) * Pros: * General approach, it works for all Fomantic UI checkboxes / radioboxes * No need to write IDs manually everywhere * No need to tell new contributors to write IDs again and again * Cons: * Slightly affects performance, but it's really trivial, because there was already a heavy `$('.ui.checkbox').checkbox()` for Fomantic UI before. So everything is still fine. Screenshot (from the repo setting page, which has various checkboxes):
![image](https://user-images.githubusercontent.com/2114189/214480937-3a54d36f-55c3-49de-9c45-c4bb21f1f4c6.png)
--- web_src/js/features/aria.js | 17 +++++++++++++++++ web_src/js/features/common-global.js | 4 ++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 162843678..a5ac84e44 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -98,3 +98,20 @@ function attachOneDropdownAria($dropdown) { export function attachDropdownAria($dropdowns) { $dropdowns.each((_, e) => attachOneDropdownAria($(e))); } + +export function attachCheckboxAria($checkboxes) { + $checkboxes.checkbox(); + + // Fomantic UI checkbox needs to be something like:
+ // It doesn't work well with + // To make it work with aria, the "id"/"for" attributes are necessary, so add them automatically if missing. + // In the future, refactor to use native checkbox directly, then this patch could be removed. + for (const el of $checkboxes) { + const label = el.querySelector('label'); + const input = el.querySelector('input'); + if (!label || !input || input.getAttribute('id')) continue; + const id = generateAriaId(); + input.setAttribute('id', id); + label.setAttribute('for', id); + } +} diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 442a83980..4677eeac0 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -4,7 +4,7 @@ import {mqBinarySearch} from '../utils.js'; import {createDropzone} from './dropzone.js'; import {initCompColorPicker} from './comp/ColorPicker.js'; import {showGlobalErrorMessage} from '../bootstrap.js'; -import {attachDropdownAria} from './aria.js'; +import {attachCheckboxAria, attachDropdownAria} from './aria.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {initTooltip} from '../modules/tippy.js'; import {svg} from '../svg.js'; @@ -111,7 +111,7 @@ export function initGlobalCommon() { }); attachDropdownAria($uiDropdowns); - $('.ui.checkbox').checkbox(); + attachCheckboxAria($('.ui.checkbox')); $('.tabular.menu .item').tab(); $('.tabable.menu .item').tab();