From c708e1128f3d34901548168e19df39c2f5045424 Mon Sep 17 00:00:00 2001
From: Anthony Lio <lionnet.ant@gmail.com>
Date: Thu, 10 Sep 2026 09:14:42 +0300
Subject: [PATCH] fix(ui-patterns): reveal hover-only copy controls on keyboard
 focus (#50083)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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 -->
---
 packages/ui-patterns/src/CodeBlock/CodeBlock.tsx | 2 +-
 packages/ui-patterns/src/DataInputs/Input.tsx    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
index fbd3345554e..8d41e769e0b 100644
--- a/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
+++ b/packages/ui-patterns/src/CodeBlock/CodeBlock.tsx
@@ -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(' ')}
             >
diff --git a/packages/ui-patterns/src/DataInputs/Input.tsx b/packages/ui-patterns/src/DataInputs/Input.tsx
index 98efedae67f..128eb19c963 100644
--- a/packages/ui-patterns/src/DataInputs/Input.tsx
+++ b/packages/ui-patterns/src/DataInputs/Input.tsx
@@ -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)}
               >