From e8ac6a9aeacf0adf21982abc51baa8938e5dd6bb Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
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):

<details>


![image](https://user-images.githubusercontent.com/2114189/214480937-3a54d36f-55c3-49de-9c45-c4bb21f1f4c6.png)

</details>
---
 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 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: <div class="ui checkbox"><label /><input /></div>
+  // It doesn't work well with <label><input />...</label>
+  // 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();