fix(ui-patterns): reveal hover-only copy controls on keyboard focus (#50083)

## What kind of change does this PR introduce?

bug fix + a11y _ follow-up to the UI review on #50045

## What is the current behavior?

**`CodeBlock`**: the copy control lives in an `opacity-0
group-hover:opacity-100` wrapper with no focus rule, so it stays
invisible when a keyboard user tabs to it, button is focusable and
pressable, just not visible

**`DataInputs/Input`**: same wrapper, but the parent `InputGroup`
declares a *named* group (`group/input-group`), so the unnamed
`group-hover:` matched nothing. With `showCopyOnHover` the button was
invisible at all times, hover included. Only consumer today is the Edge
Functions "Download via CLI" popover.

## What is the new behavior?

├  adds `group-focus-within:opacity-100` to `CodeBlock`

| state | preview |
| -------|------|
| before | <img width="800" height="450" alt="image"
src="https://github.com/user-attachments/assets/04645fbd-3b43-4291-afe3-ba56ab961dac"
/> |
| after | <img width="800" height="450" alt="image"
src="https://github.com/user-attachments/assets/880b49aa-2244-4b78-9fbd-f554770e3a3b"
/> |

├ retargets both variants at the named group: `group-hover/input-group:`
+ `group-focus-within/input-group:` in `Input`

| state | preview |
| -------|------|
| before | <img width="542" height="261" alt="image"
src="https://github.com/user-attachments/assets/0ff85a85-5ef8-41e4-a3f0-34f7982770c4"
/> |
| after | <img width="542" height="261" alt="image"
src="https://github.com/user-attachments/assets/8ce84ea7-bcb6-47ba-a7e6-a35f6edbd332"
/> |


## Testing
1. visits `/docs/guides/ai-tools/plugins#manual-installation`
2. tabs into the code block

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Accessibility Improvements**
- Copy buttons in code blocks and input fields are now revealed when the
component or its contents receive keyboard focus, in addition to
appearing on hover.
  - Improved keyboard discoverability and access to copy actions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Anthony Lio authored and GitHub committed 2026-09-10 09:14:42 +03:00
1 parent c33d255eba
commit c708e1128f
2 files changed
+5 -2

No files matched your search

@@ -269,7 +269,7 @@ export const CodeBlock = ({
<div
className={[
'absolute right-2 top-2',
'opacity-0 group-hover:opacity-100 transition',
'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition',
`${isDarkTheme ? 'dark' : ''}`,
].join(' ')}
>
@@ -91,7 +91,10 @@ const Input = forwardRef<
<InputGroupButton
size="tiny"
variant="default"
className={cn(showCopyOnHover && 'opacity-0 group-hover:opacity-100 transition')}
className={cn(
showCopyOnHover &&
'opacity-0 group-hover/input-group:opacity-100 group-focus-within/input-group:opacity-100 transition'
)}
icon={<Copy size={16} className="text-foreground-muted" />}
onClick={() => _onCopy(props.value)}
>