From 29392213f50263c1babfaa87edd4a510a0ca62e5 Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 14:00:59 -0400
Subject: [PATCH 1/6] [Fix Accessibility] Add focus-visible styles to Mobile
 Table of Contents component

---
 src/components/table-of-contents.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js
index d8abb5972c5..35f3e5f4f6e 100644
--- a/src/components/table-of-contents.js
+++ b/src/components/table-of-contents.js
@@ -53,6 +53,10 @@ 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',
+            },
           }}
           leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}
         >

From c2f83d30a79d42661b2799808595cea7c42471e5 Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 14:42:59 -0400
Subject: [PATCH 2/6] [Fix Accessibility] Remove outlineOffset from
 focus-visible styles in ClipboardCopy component

---
 src/mdx/code.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/mdx/code.js b/src/mdx/code.js
index 05880b4d535..cfb9ec79dcf 100644
--- a/src/mdx/code.js
+++ b/src/mdx/code.js
@@ -35,8 +35,7 @@ const ClipboardCopy = ({value, ...props}) => {
         ...props.sx,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: '-webkit-focus-ring-color',
-          outlineOffset: '2px',
+          outlineColor: '-webkit-focus-ring-color'
         },
       }}
     >

From faa96d4757274e442dd797c96d0f0ff7e00d2e75 Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 14:43:12 -0400
Subject: [PATCH 3/6] Fix Accessibility: Add missing comma in focus-visible
 styles for ClipboardCopy component

---
 src/mdx/code.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mdx/code.js b/src/mdx/code.js
index cfb9ec79dcf..6140d85f16d 100644
--- a/src/mdx/code.js
+++ b/src/mdx/code.js
@@ -35,7 +35,7 @@ const ClipboardCopy = ({value, ...props}) => {
         ...props.sx,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: '-webkit-focus-ring-color'
+          outlineColor: '-webkit-focus-ring-color',
         },
       }}
     >

From 69d7e32507665e8fbfc3ecc49d631fd8c4973fcd Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 14:43:20 -0400
Subject: [PATCH 4/6] Fix Accessibility: Add focus-visible styles to
 ActionMenu.Button in VariantMenu component

---
 src/components/variant-select.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/variant-select.js b/src/components/variant-select.js
index a8c614fbcb5..2f8ed6144e8 100644
--- a/src/components/variant-select.js
+++ b/src/components/variant-select.js
@@ -53,7 +53,16 @@ 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',
+            },
+          }}
+        >
           {title}
         </ActionMenu.Button>
         <StyledOverlay width="auto" onEscape={() => setOpen(false)}>

From e5cf4b222bcd68603ed8b29ca3f8b06c1994bb06 Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 15:07:22 -0400
Subject: [PATCH 5/6] Fix Accessibility: Add focus-visible styles with
 outlineOffset to various components

---
 src/components/nav-drawer.js        | 26 ++++++++++++++++++++++++--
 src/components/search.js            | 13 ++++++++++++-
 src/components/table-of-contents.js |  1 +
 src/components/variant-select.js    |  1 +
 src/mdx/code.js                     |  1 +
 5 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/nav-drawer.js b/src/components/nav-drawer.js
index 6c595afe0ee..29305b00e8a 100644
--- a/src/components/nav-drawer.js
+++ b/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>
diff --git a/src/components/search.js b/src/components/search.js
index 2028e73a8f1..6dbaa47bd6d 100644
--- a/src/components/search.js
+++ b/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>
       )}
diff --git a/src/components/table-of-contents.js b/src/components/table-of-contents.js
index 35f3e5f4f6e..ec358a17ef3 100644
--- a/src/components/table-of-contents.js
+++ b/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}
diff --git a/src/components/variant-select.js b/src/components/variant-select.js
index 2f8ed6144e8..bb7ba9ca8e5 100644
--- a/src/components/variant-select.js
+++ b/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',
             },
           }}
         >
diff --git a/src/mdx/code.js b/src/mdx/code.js
index 6140d85f16d..083051aa5f9 100644
--- a/src/mdx/code.js
+++ b/src/mdx/code.js
@@ -36,6 +36,7 @@ const ClipboardCopy = ({value, ...props}) => {
         '&:focus-visible': {
           outline: '2px solid',
           outlineColor: '-webkit-focus-ring-color',
+          outlineOffset: '1px',
         },
       }}
     >

From 08761c63cab4e4fee7515664d08dc0b5594995c8 Mon Sep 17 00:00:00 2001
From: jpg619 <jpg619@github.com>
Date: Mon, 22 Sep 2025 15:12:56 -0400
Subject: [PATCH 6/6] Fix Accessibility: Remove focus-visible styles from Close
 button in NavDrawer component

---
 src/components/nav-drawer.js | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/nav-drawer.js b/src/components/nav-drawer.js
index 29305b00e8a..a60e1aa5ba8 100644
--- a/src/components/nav-drawer.js
+++ b/src/components/nav-drawer.js
@@ -123,17 +123,7 @@ function NavDrawer() {
               }}
             >
               <SiteTitle />
-              <Button
-                aria-label="Close"
-                onClick={() => setOpen(false)}
-                sx={{
-                  '&:focus-visible': {
-                    outline: '2px solid',
-                    outlineColor: 'accent.fg',
-                    outlineOffset: '2px',
-                  },
-                }}
-              >
+              <Button aria-label="Close" onClick={() => setOpen(false)}>
                 <XIcon />
               </Button>
             </DarkTheme>