Files
supabase/packages/ui-patterns/src/DataInputs
Anthony Lio c708e1128f 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 -->
2026-09-10 09:14:42 +03:00
..