From 5c018eb201c61d7d30bc74fae5996cb2840e4310 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Tue, 28 Feb 2023 17:29:44 +0100
Subject: [PATCH] fix(a11y/forms) correctly label <Checkbox> components

just swap some dom elements in the internals of <Checkbox> to make it
usable for screen reader users and easier to use for mouse users:

- the text is now the actual label of the input. Before that, it wasn't,
so screen reader users could have trouble guessing what the input was
about
- since the text is now the label, we can click/tap on it to toggle the
checkbox
---
 react/features/base/ui/components/web/Checkbox.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/react/features/base/ui/components/web/Checkbox.tsx b/react/features/base/ui/components/web/Checkbox.tsx
index 6051e1e02..3a102c55e 100644
--- a/react/features/base/ui/components/web/Checkbox.tsx
+++ b/react/features/base/ui/components/web/Checkbox.tsx
@@ -156,8 +156,8 @@ const Checkbox = ({
     const isMobile = isMobileBrowser();
 
     return (
-        <div className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
-            <label className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
+        <label className = { cx(styles.formControl, isMobile && 'is-mobile', className) }>
+            <div className = { cx(styles.activeArea, isMobile && 'is-mobile', disabled && styles.disabled) }>
                 <input
                     checked = { checked }
                     disabled = { disabled }
@@ -165,13 +165,14 @@ const Checkbox = ({
                     onChange = { onChange }
                     type = 'checkbox' />
                 <Icon
+                    aria-hidden = { true }
                     className = 'checkmark'
                     color = { disabled ? theme.palette.icon03 : theme.palette.icon01 }
                     size = { 18 }
                     src = { IconCheck } />
-            </label>
-            <label>{label}</label>
-        </div>
+            </div>
+            <div>{label}</div>
+        </label>
     );
 };