fix(v2): fix minor a11y issues

facebook · Jun 4, 2021 · e148c1f · e148c1f
1 parent f10304d
commit e148c1f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 24 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
@@ -44,38 +44,23 @@ 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
         className={clsx('react-toggle', className, {
           'react-toggle--checked': checked,
           'react-toggle--focus': focused,
           'react-toggle--disabled': disabled,
-        })}
-        role="button"
-        tabIndex={-1}
-        onClick={handleToggle}>
-        <div className="react-toggle-track">
+        })}>
+        <div
+          className="react-toggle-track"
+          role="button"
+          tabIndex={-1}
+          onClick={() => inputRef.current?.click()}>
           <div className="react-toggle-track-check">{icons.checked}</div>
           <div className="react-toggle-track-x">{icons.unchecked}</div>
+          <div className="react-toggle-thumb" />
         </div>
-        <div className="react-toggle-thumb" />
 
         <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)}
         />

diff --git a/website/src/components/showcase/ShowcaseSelect/index.js b/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>
   );
 }

diff --git a/website/src/pages/showcase/index.js b/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>