fix(v2): fix minor a11y issues (#4906)

packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx

@@ -44,22 +44,6 @@ const Toggle = memo(
     const [checked, setChecked] = useState(defaultChecked);
     const [focused, setFocused] = useState(false);
     const inputRef = useRef<HTMLInputElement>(null);
-    const handleToggle = (e) => {
-      const checkbox = inputRef.current;
-
-      if (!checkbox) {
-        return;
-      }
-
-      if (e.target !== checkbox) {
-        e.preventDefault();
-        checkbox.focus();
-        checkbox.click();
-        return;
-      }
-
-      setChecked(checkbox?.checked);
-    };
 
     return (
       <div
@@ -67,15 +51,16 @@ const Toggle = memo(
           'react-toggle--checked': checked,
           'react-toggle--focus': focused,
           'react-toggle--disabled': disabled,
-        })}
+        })}>
+        <div
+          className="react-toggle-track"
           role="button"
           tabIndex={-1}
-        onClick={handleToggle}>
-        <div className="react-toggle-track">
+          onClick={() => inputRef.current?.click()}>
           <div className="react-toggle-track-check">{icons.checked}</div>
           <div className="react-toggle-track-x">{icons.unchecked}</div>
-        </div>
           <div className="react-toggle-thumb" />
+        </div>
 
         <input
           ref={inputRef}
@@ -84,6 +69,7 @@ const Toggle = memo(
           className="react-toggle-screenreader-only"
           aria-label="Switch between dark and light mode"
           onChange={onChange}
+          onClick={() => setChecked(!checked)}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
         />

website/src/components/showcase/ShowcaseCard/index.js

@@ -18,8 +18,7 @@ function TagIcon({label, description, icon}) {
     <span
       className={styles.tagIcon}
       // TODO add a proper tooltip
-      title={`${label}: ${description}`}
-      aria-label={`${label}: ${description}`}>
+      title={`${label}: ${description}`}>
       {icon}
     </span>
   );

website/src/components/showcase/ShowcaseSelect/index.js

@@ -13,10 +13,10 @@ function ShowcaseSelect({tag, label, onChange, value, children}) {
   const id = `showcase_select_id_${tag};`;
   return (
     <div className={styles.selectContainer}>
+      <label htmlFor={id}>{label}</label>
       <select id={id} name={tag} onChange={onChange} value={value}>
         {children}
       </select>
-      <label htmlFor={id}>{label}</label>
     </div>
   );
 }

website/src/pages/showcase/index.js

@@ -117,7 +117,6 @@ function ShowcaseFilters({selectedTags, toggleTag, operator, setOperator}) {
               <ShowcaseCheckbox
                 // TODO add a proper tooltip
                 title={`${label}: ${description}`}
-                aria-label={`${label}: ${description}`}
                 name={tag}
                 label={
                   icon ? (
@@ -137,6 +136,7 @@ function ShowcaseFilters({selectedTags, toggleTag, operator, setOperator}) {
         <div className="col col--2">
           <ShowcaseSelect
             name="operator"
+            label="Filter: "
             value={operator}
             onChange={(e) => setOperator(e.target.value)}>
             <option value="OR">OR</option>