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>

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

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) => {
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        const target = e.target as HTMLElement;
+      <div
-        // Prevent a double-click to highlight summary text
+        role="button"
-        if (isInSummary(target) && e.detail > 1) {
+        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();
-        }
+          if (collapsed) {
-      }}
+            setCollapsed(false);
-      onClick={(e) => {
+            setOpen(true);
-        e.stopPropagation(); // For isolation of multiple nested details/summary
+          } else {
-        const target = e.target as HTMLElement;
+            setCollapsed(true);
-        const shouldToggle =
+            // setOpen(false); // Don't do this, it breaks close animation!
-          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);
         }}>
-        <div className={styles.collapsibleContent}>{children}</div>
+        {summary}
-      </Collapsible>
+
+        <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>
   );
 };