From 69b11a8546e45b2055612958f296b9dfd5ce5fc2 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 12 Aug 2021 22:33:31 +0800
Subject: [PATCH] polish: bind key listener to light/dark toggle + a11y lint
 fixes (#5341)

* Fix Details a11y

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Remove keydown logic

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix toggle

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Proper way to fix toggle

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Proper way to fix details

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Put callback back

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>
---
 .../src/theme/Toggle/index.tsx                |  6 ++
 .../src/components/Details/index.tsx          | 75 ++++++++++---------
 2 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
index 7bfe3db259..251488b17b 100644
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx
@@ -53,6 +53,7 @@ const Toggle = memo(
           'react-toggle--focus': focused,
           'react-toggle--disabled': disabled,
         })}>
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
         <div
           className="react-toggle-track"
           role="button"
@@ -73,6 +74,11 @@ const Toggle = memo(
           onClick={() => setChecked(!checked)}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              inputRef.current?.click();
+            }
+          }}
         />
       </div>
     );
diff --git a/packages/docusaurus-theme-common/src/components/Details/index.tsx b/packages/docusaurus-theme-common/src/components/Details/index.tsx
index 1645d4edbd..87f6edec13 100644
--- a/packages/docusaurus-theme-common/src/components/Details/index.tsx
+++ b/packages/docusaurus-theme-common/src/components/Details/index.tsx
@@ -50,43 +50,48 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
         styles.details,
         {[styles.isClient]: isClient},
         props.className,
-      )}
-      onMouseDown={(e) => {
-        const target = e.target as HTMLElement;
-        // Prevent a double-click to highlight summary text
-        if (isInSummary(target) && e.detail > 1) {
+      )}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        role="button"
+        tabIndex={0}
+        onMouseDown={(e) => {
+          const target = e.target as HTMLElement;
+          // Prevent a double-click to highlight summary text
+          if (isInSummary(target) && e.detail > 1) {
+            e.preventDefault();
+          }
+        }}
+        onClick={(e) => {
+          e.stopPropagation(); // For isolation of multiple nested details/summary
+          const target = e.target as HTMLElement;
+          const shouldToggle =
+            isInSummary(target) && hasParent(target, detailsRef.current!);
+          if (!shouldToggle) {
+            return;
+          }
           e.preventDefault();
-        }
-      }}
-      onClick={(e) => {
-        e.stopPropagation(); // For isolation of multiple nested details/summary
-        const target = e.target as HTMLElement;
-        const shouldToggle =
-          isInSummary(target) && hasParent(target, detailsRef.current!);
-        if (!shouldToggle) {
-          return;
-        }
-        e.preventDefault();
-        if (collapsed) {
-          setCollapsed(false);
-          setOpen(true);
-        } else {
-          setCollapsed(true);
-          // setOpen(false); // Don't do this, it breaks close animation!
-        }
-      }}>
-      {summary}
-
-      <Collapsible
-        lazy={false} // Content might matter for SEO in this case
-        collapsed={collapsed}
-        disableSSRStyle // Allows component to work fine even with JS disabled!
-        onCollapseTransitionEnd={(newCollapsed) => {
-          setCollapsed(newCollapsed);
-          setOpen(!newCollapsed);
+          if (collapsed) {
+            setCollapsed(false);
+            setOpen(true);
+          } else {
+            setCollapsed(true);
+            // setOpen(false); // Don't do this, it breaks close animation!
+          }
         }}>
-        <div className={styles.collapsibleContent}>{children}</div>
-      </Collapsible>
+        {summary}
+
+        <Collapsible
+          lazy={false} // Content might matter for SEO in this case
+          collapsed={collapsed}
+          disableSSRStyle // Allows component to work fine even with JS disabled!
+          onCollapseTransitionEnd={(newCollapsed) => {
+            setCollapsed(newCollapsed);
+            setOpen(!newCollapsed);
+          }}>
+          <div className={styles.collapsibleContent}>{children}</div>
+        </Collapsible>
+      </div>
     </details>
   );
 };