Remco/Epicnabbo-Catalogus-Updated-Daily
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(housekeeping): finish accessible command deck

Browse Source
This commit is contained in:
simoleo
2026-08-30 18:49:10 +02:00
parent 85ad0452d3
commit a113e48880
55 changed files with 17064 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/housekeeping/foundation/shell/operational-inbox.tsx
+12 -15
View File
@@ -90,7 +90,10 @@ export function OperationalInbox({
);
return (
<section aria-labelledby="operational-inbox-title" className="space-y-4">
<section
aria-labelledby="operational-inbox-title"
className="min-w-0 space-y-4"
>
<h2 id="operational-inbox-title" className="text-lg font-semibold">
{labels.title}
</h2>
@@ -102,7 +105,7 @@ export function OperationalInbox({
aria-label={labels.domainFilter}
value={domain}
onChange={(event) => setDomain(event.target.value)}
className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2"
className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
<option value="all">{labels.all}</option>
{domains.map((value) => (
@@ -115,7 +118,7 @@ export function OperationalInbox({
aria-label={labels.stateFilter}
value={state}
onChange={(event) => setState(event.target.value)}
className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2"
className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
<option value="all">{labels.all}</option>
{states.map((value) => (
@@ -128,7 +131,7 @@ export function OperationalInbox({
aria-label={labels.priorityFilter}
value={priority}
onChange={(event) => setPriority(event.target.value)}
className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2"
className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] px-3 py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
<option value="all">{labels.all}</option>
{priorities.map((value) => (
@@ -141,17 +144,11 @@ export function OperationalInbox({
{response.errors.length > 0 ? (
<div
role="status"
role="alert"
aria-live="assertive"
className="rounded-md border border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)] p-3"
>
<p className="text-[var(--admin-warning)]">{labels.partial}</p>
<ul className="mt-2 list-disc pl-5 text-sm">
{response.errors.map((error) => (
<li key={error.sourceId}>
{error.sourceId}: {error.code}
</li>
))}
</ul>
</div>
) : null}
@@ -160,10 +157,10 @@ export function OperationalInbox({
{items.map((item) => (
<li
key={`${item.sourceId}:${item.itemId}`}
className="rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] p-4"
className="min-w-0 rounded-md border border-[var(--admin-border)] bg-[var(--admin-surface)] p-4"
>
<div className="flex flex-wrap items-start justify-between gap-3">
<div>
<div className="min-w-0 break-words">
<p className="font-medium">
{titles[item.titleKey] ?? item.titleKey}
</p>
@@ -176,7 +173,7 @@ export function OperationalInbox({
</div>
<Link
href={projectOperationalInboxHref(item.href, surface)}
className="rounded-md border border-[var(--admin-border)] px-3 py-2 text-sm"
className="rounded-md border border-[var(--admin-border)] px-3 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--admin-accent)]"
>
{labels.open}
</Link>