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

@@ -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>
     );
 };