From 869f4bf206cb364364a0e8cabd688ef372e21ed2 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 9 Jun 2021 14:33:08 +0300
Subject: [PATCH] fix(v2): fix minor a11y issues (#4906)

---
 .../src/theme/Toggle/index.tsx                | 30 +++++--------------
 .../components/showcase/ShowcaseCard/index.js |  3 +-
 .../showcase/ShowcaseSelect/index.js          |  2 +-
 website/src/pages/showcase/index.js           |  2 +-
 4 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
index 62ec3af78547..0a53e68ea4e7 100644
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
+++ b/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,
-        })}
-        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/ShowcaseCard/index.js b/website/src/components/showcase/ShowcaseCard/index.js
index 36fb3bd75011..bbe54bb1a865 100644
--- a/website/src/components/showcase/ShowcaseCard/index.js
+++ b/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>
   );
diff --git a/website/src/components/showcase/ShowcaseSelect/index.js b/website/src/components/showcase/ShowcaseSelect/index.js
index bb678d8e571d..8ab4c5978c46 100644
--- 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
index 8778ac8477be..c3d31c0453c0 100644
--- 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>