Fix Accessibility: Add focus-visible styles with outlineOffset to various components

Author: jpg619

src/components/nav-drawer.js

@@ -76,7 +76,19 @@ function NavDrawer() {
 
   return (
     <>
-      <Button aria-label="Menu" aria-expanded={open} onClick={() => setOpen(true)} sx={{ml: 3}}>
+      <Button
+        aria-label="Menu"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        sx={{
+          ml: 3,
+          '&:focus-visible': {
+            outline: '2px solid',
+            outlineColor: '-webkit-focus-ring-color',
+            outlineOffset: '1px',
+          },
+        }}
+      >
         <ThreeBarsIcon />
       </Button>
       <LightTheme as={Drawer} isOpen={open} onDismiss={() => setOpen(false)}>
@@ -111,7 +123,17 @@ function NavDrawer() {
               }}
             >
               <SiteTitle />
-              <Button aria-label="Close" onClick={() => setOpen(false)}>
+              <Button
+                aria-label="Close"
+                onClick={() => setOpen(false)}
+                sx={{
+                  '&:focus-visible': {
+                    outline: '2px solid',
+                    outlineColor: 'accent.fg',
+                    outlineOffset: '2px',
+                  },
+                }}
+              >
                 <XIcon />
               </Button>
             </DarkTheme>

src/components/search.js

@@ -113,7 +113,18 @@ export const Mobile = ({
   return (
     <>
       {!isMobileSearchOpen && (
-        <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={handleSearchToggle}>
+        <Button
+          aria-label="Search"
+          aria-expanded={isMobileSearchOpen}
+          onClick={handleSearchToggle}
+          sx={{
+            '&:focus-visible': {
+              outline: '2px solid',
+              outlineColor: '-webkit-focus-ring-color',
+              outlineOffset: '1px',
+            },
+          }}
+        >
           <SearchIcon />
         </Button>
       )}

src/components/table-of-contents.js

@@ -56,6 +56,7 @@ export const Mobile = withTableOfContents(({items}) => {
             '&:focus-visible': {
               outline: '2px solid',
               outlineColor: '-webkit-focus-ring-color',
+              outlineOffset: '1px',
             },
           }}
           leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}

src/components/variant-select.js

@@ -60,6 +60,7 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
             '&:focus-visible': {
               outline: '2px solid',
               outlineColor: '-webkit-focus-ring-color',
+              outlineOffset: '1px',
             },
           }}
         >

src/mdx/code.js

@@ -36,6 +36,7 @@ const ClipboardCopy = ({value, ...props}) => {
         '&:focus-visible': {
           outline: '2px solid',
           outlineColor: '-webkit-focus-ring-color',
+          outlineOffset: '1px',
         },
       }}
     >