[Fix Accessibility] Add focus-visible styles to Clipboard Copy button (#1716)
### Add focus-visible styles to clipboard copy button for improved accessibility - **Files Changed** code.js - **Summary** This change adds proper focus-visible styling to the clipboard copy button, providing a clear visual indicator when users navigate to the button using keyboard controls while maintaining system-consistent focus ring colors for better accessibility compliance. ## BEFORE <img width="878" height="228" alt="image" src="https://github.com/user-attachments/assets/a7c21e39-9003-4f63-9df7-071e17b1d763" /> ## AFTER <img width="851" height="232" alt="image" src="https://github.com/user-attachments/assets/e59dede0-4dee-4d19-875b-60af30d3dac6" />
Jithin Prabhakaran Girija committed
Sep 22, 2025 at 13:45 UTC
395867f277c28605da23a493108b9806ce7d5bd5
1 file changed
+8
src/mdx/code.js
+8
@@ -31,6 +31,14 @@ const ClipboardCopy = ({value, ...props}) => {
31
setCopied(true)
32
announce(`Copied to clipboard`)
33
}}
34
+ sx={{
35
+ ...props.sx,
36
+ '&:focus-visible': {
37
+ outline: '2px solid',
38
+ outlineColor: '-webkit-focus-ring-color',
39
+ outlineOffset: '2px',
40
+ },
41
+ }}
42
>
43
<Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'success.fg' : 'fg.muted'}} />
44
</Button>