mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
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)}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user