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,7 +50,11 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
         styles.details,
         {[styles.isClient]: isClient},
         props.className,
-      )}
+      )}>
+      {/* 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
@@ -87,6 +91,7 @@ const Details = ({summary, children, ...props}: DetailsProps): JSX.Element => {
           }}>
           <div className={styles.collapsibleContent}>{children}</div>
         </Collapsible>
+      </div>
     </details>
   );
 };