starred/webmail
1
0
Fork 0
mirror of https://github.com/bulwarkmail/webmail.git synced 2026-10-31 00:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: show a contact's copy and compose buttons on keyboard focus and touch

Browse Source
This commit is contained in:
Linus Rath
2026-10-29 17:53:51 +01:00
parent a876064ec8
commit 693687dc0b
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/contacts/__tests__/contact-detail.test.tsx
+8
View File
@@ -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();
components/contacts/contact-detail.tsx
+3 -1
View File
@@ -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>
);