diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 162843678b..a5ac84e446 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 442a83980c..4677eeac0c 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();