@cryptotaxi247 / documentation-1 / commits / 32c64a6

[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" />

Jithin Prabhakaran Girija committed Sep 22, 2025 at 16:29 UTC 32c64a659017648a1c111806dd3adadbde40f1d4
5 files changed +42 -4
src/components/nav-drawer.js
+13 -1
@@ -76,7 +76,19 @@ function NavDrawer() {
76
77 return (
78 <>
79 - <Button aria-label="Menu" aria-expanded={open} onClick={() => setOpen(true)} sx={{ml: 3}}>
79 + <Button
80 + aria-label="Menu"
81 + aria-expanded={open}
82 + onClick={() => setOpen(true)}
83 + sx={{
84 + ml: 3,
85 + '&:focus-visible': {
86 + outline: '2px solid',
87 + outlineColor: '-webkit-focus-ring-color',
88 + outlineOffset: '1px',
89 + },
90 + }}
91 + >
92 <ThreeBarsIcon />
93 </Button>
94 <LightTheme as={Drawer} isOpen={open} onDismiss={() => setOpen(false)}>
src/components/search.js
+12 -1
@@ -113,7 +113,18 @@ export const Mobile = ({
113 return (
114 <>
115 {!isMobileSearchOpen && (
116 - <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={handleSearchToggle}>
116 + <Button
117 + aria-label="Search"
118 + aria-expanded={isMobileSearchOpen}
119 + onClick={handleSearchToggle}
120 + sx={{
121 + '&:focus-visible': {
122 + outline: '2px solid',
123 + outlineColor: '-webkit-focus-ring-color',
124 + outlineOffset: '1px',
125 + },
126 + }}
127 + >
128 <SearchIcon />
129 </Button>
130 )}
src/components/table-of-contents.js
+5
@@ -53,6 +53,11 @@ export const Mobile = withTableOfContents(({items}) => {
53 borderBottomWidth: open ? 1 : 0,
54 borderBottomLeftRadius: open ? 0 : 2,
55 borderBottomRightRadius: open ? 0 : 2,
56 + '&:focus-visible': {
57 + outline: '2px solid',
58 + outlineColor: '-webkit-focus-ring-color',
59 + outlineOffset: '1px',
60 + },
61 }}
62 leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}
63 >
src/components/variant-select.js
+11 -1
@@ -53,7 +53,17 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
53 Select CLI Version:
54 </Box>
55 <ActionMenu anchorRef={anchorRef} open={open} onOpenChange={setOpen}>
56 - <ActionMenu.Button aria-describedby={labelId} sx={{width: ['100%', null, 'auto']}}>
56 + <ActionMenu.Button
57 + aria-describedby={labelId}
58 + sx={{
59 + width: ['100%', null, 'auto'],
60 + '&:focus-visible': {
61 + outline: '2px solid',
62 + outlineColor: '-webkit-focus-ring-color',
63 + outlineOffset: '1px',
64 + },
65 + }}
66 + >
67 {title}
68 </ActionMenu.Button>
69 <StyledOverlay width="auto" onEscape={() => setOpen(false)}>
src/mdx/code.js
+1 -1
@@ -36,7 +36,7 @@ const ClipboardCopy = ({value, ...props}) => {
36 '&:focus-visible': {
37 outline: '2px solid',
38 outlineColor: '-webkit-focus-ring-color',
39 - outlineOffset: '2px',
39 + outlineOffset: '1px',
40 },
41 }}
42 >