feat(housekeeping): finish accessible command deck

This commit is contained in:
Simo committed 2026-08-30 18:49:10 +02:00
1 parent 85ad0452d3
commit a113e48880
55 files changed
+17064 -509

No files matched your search

@@ -276,7 +276,7 @@ export function CommandDeck({
aria-haspopup="dialog"
aria-expanded={open}
onClick={() => setOpen(true)}
className="flex items-center gap-2 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm text-[var(--admin-text)]"
className="flex min-w-0 items-center gap-2 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 text-sm text-[var(--admin-text)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
<span>{labels.trigger}</span>
<kbd className="text-xs text-[var(--admin-text-muted)]">Ctrl+K</kbd>
@@ -286,14 +286,14 @@ export function CommandDeck({
role="dialog"
aria-modal="true"
aria-label={labels.trigger}
className="fixed inset-0 z-50 flex items-start justify-center bg-[var(--admin-canvas)]/80 p-4 pt-[10vh]"
className="fixed inset-0 z-50 flex items-start justify-center bg-[var(--admin-canvas)]/80 p-2 sm:p-4 pt-4 sm:pt-[10vh]"
>
<div className="w-full max-w-2xl rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] shadow-xl">
<div className="max-h-[calc(100dvh-2rem)] min-w-0 w-full max-w-2xl overflow-hidden rounded-lg border border-[var(--admin-border)] bg-[var(--admin-surface)] shadow-xl">
<div className="flex justify-end border-b border-[var(--admin-border)] p-2">
<button
type="button"
onClick={close}
className="rounded px-2 py-1 text-sm text-[var(--admin-text-muted)]"
className="rounded px-2 py-1 text-sm text-[var(--admin-text-muted)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
{labels.close}
</button>
@@ -316,10 +316,17 @@ export function CommandDeck({
placeholder={labels.placeholder}
aria-label={labels.placeholder}
/>
<CommandList aria-busy={loading}>
<CommandList
aria-busy={loading}
className="min-w-0 overflow-y-auto"
>
{loading ? <p role="status">{labels.loading}</p> : null}
{response.errors.length > 0 ? (
<p role="status" className="px-3 py-2 text-sm">
<p
role="alert"
aria-live="assertive"
className="px-3 py-2 text-sm"
>
{labels.partial}
</p>
) : null}