mirror of
https://github.com/bulwarkmail/webmail.git
synced 2026-11-03 16:16:59 +00:00
fix: keep the command palette field's focus outline inside the dialog
The search field fills the header of a dialog with overflow hidden, so the global focus outline, drawn 2px outside it, lost its top edge and crossed the header's bottom border. focus-inset draws it inside the field. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
66351e0d31
commit
b419065d8d
@@ -53,6 +53,9 @@ describe('command palette', () => {
|
||||
const input = screen.getByRole('combobox');
|
||||
expect(input).toHaveFocus();
|
||||
expect(input).toHaveAttribute('aria-controls', screen.getByRole('listbox').id);
|
||||
// The field fills the header of a dialog that clips its overflow: the
|
||||
// focus outline goes inside it, or the dialog cuts its top edge off.
|
||||
expect(input).toHaveClass('focus-inset');
|
||||
|
||||
act(() => { fireEvent.keyDown(input, { key: 'Escape' }); });
|
||||
expect(screen.queryByRole('dialog')).toBeNull();
|
||||
|
||||
@@ -347,7 +347,7 @@ function CommandPalette({ onClose, onShowShortcuts }: { onClose: () => void; onS
|
||||
placeholder={t("placeholder")}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
|
||||
className="h-12 flex-1 min-w-0 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-inset"
|
||||
/>
|
||||
<kbd className="hidden sm:inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">Esc</kbd>
|
||||
{/* Full screen on a phone: no backdrop to tap and no Escape key (R4). */}
|
||||
|
||||
Reference in New Issue
Block a user