From 693687dc0ba5430a31aa3be8587fd0ae993b5cb1 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 29 Oct 2026 15:44:08 +0100
Subject: [PATCH] fix: show a contact's copy and compose buttons on keyboard
 focus and touch

---
 components/contacts/__tests__/contact-detail.test.tsx | 8 ++++++++
 components/contacts/contact-detail.tsx                | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/contacts/__tests__/contact-detail.test.tsx b/components/contacts/__tests__/contact-detail.test.tsx
index c933d5a46..a06d4e1c3 100644
--- a/components/contacts/__tests__/contact-detail.test.tsx
+++ b/components/contacts/__tests__/contact-detail.test.tsx
@@ -45,6 +45,14 @@ describe('ContactDetail', () => {
     expect(link.closest('a')).toHaveAttribute('href', 'mailto:alice@example.com');
   });
 
+  it('shows the copy and compose buttons on keyboard focus and touch, not only on hover', () => {
+    render(<ContactDetail contact={contact} onEdit={vi.fn()} onDelete={vi.fn()} />);
+    const copy = screen.getByRole('button', { name: 'detail.copy_email' });
+    const actions = copy.closest('[data-row-actions]') as HTMLElement;
+    expect(actions.className).toContain('group-focus-within:opacity-100');
+    expect(actions.className).toContain('pointer-coarse:opacity-100');
+  });
+
   it('displays phone numbers', () => {
     render(<ContactDetail contact={contact} onEdit={vi.fn()} onDelete={vi.fn()} />);
     expect(screen.getByText('+33612345678')).toBeInTheDocument();
diff --git a/components/contacts/contact-detail.tsx b/components/contacts/contact-detail.tsx
index af8e2986c..a2f1ea4e4 100644
--- a/components/contacts/contact-detail.tsx
+++ b/components/contacts/contact-detail.tsx
@@ -517,8 +517,10 @@ function FieldRow({ icon: Icon, label, children }: { icon: React.ComponentType<{
 }
 
 function RowActions({ children }: { children: React.ReactNode }) {
+  // Shown on hover, while the keyboard is in the row and always on touch
+  // screens, which have no hover (WCAG 2.1.1, 2.4.7).
   return (
-    <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+    <div data-row-actions className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 pointer-coarse:opacity-100 transition-opacity">
       {children}
     </div>
   );