Skip to content

[Fix Accessibility] Add focus-visible styles to Clipboard Copy button #1716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Sep 22, 2025
Merged

[Fix Accessibility] Add focus-visible styles to Clipboard Copy button #1716

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56c3c2a
fix: add focus-visible styles to ClipboardCopy button
jpg619 Sep 17, 2025
924c260
fix: remove outlineColor from focus-visible styles in ClipboardCopy b…
jpg619 Sep 17, 2025
7434efe
fix: ensure color is inherited in focus-visible styles for ClipboardC…
jpg619 Sep 17, 2025
9be71b0
fix: update focus-visible styles in ClipboardCopy button to inherit c…
jpg619 Sep 17, 2025
b698441
empty commit
jpg619 Sep 17, 2025
de31343
fix: merge props styles into ClipboardCopy component
jpg619 Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/mdx/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,13 @@ const ClipboardCopy = ({value, ...props}) => {
setCopied(true)
announce(`Copied to clipboard`)
}}
sx={{
'&:focus-visible': {
outline: '2px solid',
outlineColor: '-webkit-focus-ring-color',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using -webkit-focus-ring-color ensures the focus indicator matches what users expect from their operating system

outlineOffset: '2px',
},
}}
>
<Octicon icon={copied ? CheckIcon : CopyIcon} sx={{color: copied ? 'success.fg' : 'fg.muted'}} />
</Button>
Expand Down
Loading