mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55:06 +03:00
## 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 -->