[Fix Accessibility] Add focus-visible styles to keyboard navigation (#1722)

## 📁 File Changes (5 files modified):

- `nav-drawer.js` - Added focus-visible styles to mobile menu button
- `search.js` - Added focus-visible styles to mobile search button
- `table-of-contents.js` - Added focus-visible styles to mobile TOC
summary button
- `variant-select.js` - Added focus-visible styles to CLI version
selector button
- `code.js` - Updated outlineOffset from 2px to 1px for clipboard copy
button

## 📋 Summary:
This PR improves keyboard accessibility by adding consistent
focus-visible outline styles to interactive buttons across mobile
components, ensuring better visual feedback for keyboard navigation
users.


### `Keyboard focus indicator is not visible on 'search' icon`
<img width="702" height="635" alt="image"
src="https://github.com/user-attachments/assets/cd462a2e-49e1-4f42-8355-c459f601c10a"
/>

### `Keyboard focus indicator is not visible on the 'Select CLI Version'
button`
<img width="687" height="635" alt="image"
src="https://github.com/user-attachments/assets/3435c1e1-f508-4031-bbb1-e6b70fb3b88b"
/>

### `Keyboard focus indicator is not visible on 'Table of contents`
<img width="687" height="635" alt="image"
src="https://github.com/user-attachments/assets/dafabd03-fece-4245-8d2a-b6ef0c27c163"
/>

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

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

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

src/components/variant-select.js

@@ -53,7 +53,17 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
         Select CLI Version:
       </Box>
       <ActionMenu anchorRef={anchorRef} open={open} onOpenChange={setOpen}>
-        <ActionMenu.Button aria-describedby={labelId} sx={{width: ['100%', null, 'auto']}}>
+        <ActionMenu.Button
+          aria-describedby={labelId}
+          sx={{
+            width: ['100%', null, 'auto'],
+            '&:focus-visible': {
+              outline: '2px solid',
+              outlineColor: '-webkit-focus-ring-color',
+              outlineOffset: '1px',
+            },
+          }}
+        >
           {title}
         </ActionMenu.Button>
         <StyledOverlay width="auto" onEscape={() => setOpen(false)}>

src/mdx/code.js

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