m.stubhan/alpenwerk-hr
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form primitives, keyboard-operable comboboxes, dialog focus, route states

Browse Source 
Accessibility work on the UI layer, all of it rooted in one structural gap:
there were no form primitives, so every field was hand-assembled and every
field got the same details wrong.

Form primitives
- components/ui/Field.tsx (Field/TextField/SelectField/TextareaField) and
  Button.tsx. Field generates the control id with useId and derives htmlFor
  from it, which is what makes the association impossible to omit rather
  than merely conventional.
- 92 labels existed, 4 used htmlFor, and no input carried an id at all: a
  screen reader announced an unnamed edit box and clicking a label focused
  nothing. Now every label resolves to its control (0 unassociated), and the
  input class chain that appeared verbatim 85 times appears zero times.
- Field also takes a render prop, so Lookup, CountryPicker and Picklist get
  the same wiring instead of a second, partial solution.
- SearchInput replaces three hand-rolled copies of the icon-in-a-box search
  whose input had only a placeholder — not a label — and killed its own
  focus ring with outline-none and nothing in its place.
- Toggle groups (workdays, reorg change type) became fieldsets with
  aria-pressed; colour alone was carrying the selected state.

Comboboxes
- Lookup and CountryPicker were text inputs with a div of clickable buttons
  underneath: typeable, but no keyboard path to a result and nothing telling
  a screen reader a list had appeared. Both now carry role=combobox,
  aria-expanded/controls/activedescendant and listbox semantics, with arrow
  keys, Enter and Escape. Escape stops propagation, or it would close the
  surrounding dialog along with the dropdown.

Dialogs
- useDialogFocus centralises what Modal and SlideOver each owed the
  keyboard and neither provided beyond Escape: focus into the dialog on
  open, Tab and Shift+Tab cycling within it, focus restored to the trigger
  on close.
- SlideOver stays mounted for its transition, and aria-hidden does not
  remove anything from the tab order — so every closed panel was leaving
  invisible tab stops at the end of the page. `inert` fixes that.

Route states
- loading.tsx, error.tsx, not-found.tsx and global-error.tsx. Every page in
  the (app) group is server-rendered per request, so without loading.tsx a
  navigation showed nothing at all until the server answered, and a render
  error dropped the user on Next's own screen with no way back.

Tests
- 22 component tests (vitest jsdom project). Two of them found limits of the
  environment rather than of the code: jsdom implements neither `inert` nor
  scrollIntoView, so the inert test asserts the attribute and the missing
  scrollIntoView — which was taking the whole render down from inside an
  effect — is stubbed in the setup file.
This commit is contained in:
Maximilian Stubhan
2026-07-25 13:10:52 +02:00
parent 4be5f2264e
commit d9367a8ce4
44 changed files with 1770 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
components/reports/ReportsPageClient.tsx
View File

@@ -5,6 +5,8 @@ import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { deleteReport, saveReport } from "@/actions/reports";
import { Button, LINK_BUTTON_CLASS } from "@/components/ui/Button";
import { CONTROL_CLASS, SelectField, TextField } from "@/components/ui/Field";
import { Modal } from "@/components/ui/Modal";
import { useToast } from "@/components/ui/Toast";
import { fmtDate } from "@/lib/format";
@@ -208,81 +210,73 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
return (
<div className="grid grid-cols-1 gap-4 lg:grid-cols-[320px_1fr]">
<div className="flex flex-col gap-4">
<div className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
<button
type="button"
onClick={() => switchMode("snapshot")}
className={`flex-1 rounded px-3 py-1.5 ${mode === "snapshot" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
>
Bestand
</button>
<button
type="button"
onClick={() => switchMode("events")}
className={`flex-1 rounded px-3 py-1.5 ${mode === "events" ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"}`}
>
Ereignisse
</button>
<div role="tablist" aria-label="Berichtsart" className="flex rounded border border-border bg-white p-1 text-sm font-semibold">
{(["snapshot", "events"] as const).map((m) => (
<button
key={m}
type="button"
role="tab"
aria-selected={mode === m}
onClick={() => switchMode(m)}
className={`flex-1 rounded px-3 py-1.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500 ${
mode === m ? "bg-brand-500 text-white" : "text-ink-body hover:bg-surface"
}`}
>
{m === "snapshot" ? "Bestand" : "Ereignisse"}
</button>
))}
</div>
{mode === "snapshot" ? (
<div className="rounded border border-border bg-white p-4">
<div className="flex flex-col gap-3">
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Kennzahl</label>
<select
value={props.measure}
onChange={(e) => updateParams({ measure: e.target.value, split: AVERAGE_MEASURES.includes(e.target.value as Measure) ? undefined : props.split })}
className="w-full rounded border border-border px-3 py-2 text-sm"
>
{(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => (
<option key={m} value={m}>
{MEASURE_LABELS[m]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
<select value={props.group} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
{(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => (
<option key={g} value={g}>
{GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
<select
value={props.split}
disabled={isAverage}
onChange={(e) => updateParams({ split: e.target.value || undefined })}
className="w-full rounded border border-border px-3 py-2 text-sm disabled:bg-surface disabled:text-ink-muted"
>
<option value="">Keine Aufteilung</option>
{(Object.keys(GROUP_LABELS) as GroupDimension[])
<SelectField
label="Kennzahl"
dense
value={props.measure}
onChange={(v) => updateParams({ measure: v, split: AVERAGE_MEASURES.includes(v as Measure) ? undefined : props.split })}
options={(Object.keys(MEASURE_LABELS) as Measure[]).map((m) => ({ value: m, label: MEASURE_LABELS[m] }))}
/>
<SelectField
label="Gruppieren nach"
dense
value={props.group}
onChange={(v) => updateParams({ group: v })}
options={(Object.keys(GROUP_LABELS) as GroupDimension[]).map((g) => ({ value: g, label: GROUP_LABELS[g] }))}
/>
<SelectField
label="Aufteilen nach"
dense
value={props.split}
disabled={isAverage}
onChange={(v) => updateParams({ split: v || undefined })}
hint={isAverage ? "Bei Durchschnittswerten nicht verfügbar." : undefined}
options={[
{ value: "", label: "Keine Aufteilung" },
...(Object.keys(GROUP_LABELS) as GroupDimension[])
.filter((g) => g !== props.group)
.map((g) => (
<option key={g} value={g}>
{GROUP_LABELS[g]}
</option>
))}
</select>
</div>
.map((g) => ({ value: g, label: GROUP_LABELS[g] })),
]}
/>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Stichtag</label>
<div className="flex items-center gap-2">
<input
<div className="flex items-end gap-2">
<TextField
label="Stichtag"
dense
className="flex-1"
type="date"
value={props.asOf || todayIso()}
onChange={(e) => updateParams({ asOf: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
onChange={(v) => updateParams({ asOf: v })}
/>
{props.asOf && (
<button type="button" onClick={() => updateParams({ asOf: undefined })} className="whitespace-nowrap text-xs font-semibold text-brand-700 hover:underline">
<Button
variant="ghost"
size="sm"
onClick={() => updateParams({ asOf: undefined })}
className="!px-1 whitespace-nowrap text-brand-700 hover:!bg-transparent hover:underline"
>
Heute
</button>
</Button>
)}
</div>
<p className="mt-1 text-xs text-ink-muted">
@@ -294,77 +288,76 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
) : (
<div className="rounded border border-border bg-white p-4">
<div className="flex flex-col gap-3">
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Ereignistyp</label>
<select value={props.eventType} onChange={(e) => updateParams({ eventType: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
<option value="">Alle Ereignistypen</option>
{EVENT_TYPES.map((t) => (
<option key={t} value={t}>
{EVENT_TYPE_LABELS[t]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Gruppieren nach</label>
<select value={props.eventGroup} onChange={(e) => updateParams({ group: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm">
{(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => (
<option key={g} value={g}>
{EVENT_GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Aufteilen nach</label>
<select value={props.eventSplit} onChange={(e) => updateParams({ split: e.target.value || undefined })} className="w-full rounded border border-border px-3 py-2 text-sm">
<option value="">Keine Aufteilung</option>
{(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
<SelectField
label="Ereignistyp"
dense
value={props.eventType}
onChange={(v) => updateParams({ eventType: v || undefined })}
options={[
{ value: "", label: "Alle Ereignistypen" },
...EVENT_TYPES.map((t) => ({ value: t, label: EVENT_TYPE_LABELS[t] })),
]}
/>
<SelectField
label="Gruppieren nach"
dense
value={props.eventGroup}
onChange={(v) => updateParams({ group: v })}
options={(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[]).map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] }))}
/>
<SelectField
label="Aufteilen nach"
dense
value={props.eventSplit}
onChange={(v) => updateParams({ split: v || undefined })}
options={[
{ value: "", label: "Keine Aufteilung" },
...(Object.keys(EVENT_GROUP_LABELS) as EventGroupDimension[])
.filter((g) => g !== props.eventGroup)
.map((g) => (
<option key={g} value={g}>
{EVENT_GROUP_LABELS[g]}
</option>
))}
</select>
</div>
<div>
<label className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</label>
.map((g) => ({ value: g, label: EVENT_GROUP_LABELS[g] })),
]}
/>
<fieldset>
<legend className="mb-1 block text-xs font-semibold uppercase tracking-wide text-ink-muted">Zeitraum</legend>
<div className="grid grid-cols-2 gap-2">
<div>
<input
<TextField
label="Von"
dense
type="date"
value={props.eventFilters.from === EVENT_DATE_OPEN ? "" : props.eventFilters.from || defaultEventFrom}
disabled={props.eventFilters.from === EVENT_DATE_OPEN}
onChange={(e) => updateParams({ from: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
onChange={(v) => updateParams({ from: v })}
/>
<button
type="button"
<Button
variant="ghost"
size="sm"
onClick={() => updateParams({ from: props.eventFilters.from === EVENT_DATE_OPEN ? defaultEventFrom : EVENT_DATE_OPEN })}
className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
>
{props.eventFilters.from === EVENT_DATE_OPEN ? "Startdatum setzen" : "Ab Anfang (offen)"}
</button>
</Button>
</div>
<div>
<input
<TextField
label="Bis"
dense
type="date"
value={props.eventFilters.to === EVENT_DATE_OPEN ? "" : props.eventFilters.to || defaultEventTo}
disabled={props.eventFilters.to === EVENT_DATE_OPEN}
onChange={(e) => updateParams({ to: e.target.value })}
className="w-full rounded border border-border px-2 py-2 text-xs disabled:bg-surface"
onChange={(v) => updateParams({ to: v })}
/>
<button
type="button"
<Button
variant="ghost"
size="sm"
onClick={() => updateParams({ to: props.eventFilters.to === EVENT_DATE_OPEN ? defaultEventTo : EVENT_DATE_OPEN })}
className="mt-1 text-xs font-semibold text-brand-700 hover:underline"
className="mt-1 !px-0 text-brand-700 hover:!bg-transparent hover:underline"
>
{props.eventFilters.to === EVENT_DATE_OPEN ? "Enddatum setzen" : "Bis heute (offen)"}
</button>
</Button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
)}
@@ -373,9 +366,10 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Filter</h3>
<div className="flex flex-col gap-2">
<select
aria-label="Nach Bereich filtern"
value={mode === "snapshot" ? props.filters.division : props.eventFilters.division}
onChange={(e) => updateParams({ division: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
className={CONTROL_CLASS}
>
<option value="">Alle Bereiche</option>
{divisions.map((d) => (
@@ -385,9 +379,10 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
))}
</select>
<select
aria-label="Nach Standort filtern"
value={mode === "snapshot" ? props.filters.location : props.eventFilters.location}
onChange={(e) => updateParams({ location: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
className={CONTROL_CLASS}
>
<option value="">Alle Standorte</option>
{locations.map((l) => (
@@ -398,8 +393,8 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</select>
{mode === "snapshot" && (
<>
<div className="rounded border border-border px-3 py-2">
<p className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</p>
<fieldset className="rounded border border-border px-3 py-2">
<legend className="mb-1.5 text-xs font-semibold text-ink-muted">Status (zum Stichtag)</legend>
<div className="flex flex-wrap gap-x-4 gap-y-1.5">
{STATUS_OPTIONS.map((s) => (
<label key={s} className="flex items-center gap-1.5 text-sm text-ink-body">
@@ -413,11 +408,12 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
</label>
))}
</div>
</div>
</fieldset>
<select
aria-label="Nach Beschäftigungsart filtern"
value={props.filters.employment}
onChange={(e) => updateParams({ employment: e.target.value })}
className="w-full rounded border border-border px-3 py-2 text-sm"
className={CONTROL_CLASS}
>
<option value="">Alle Beschäftigungsarten</option>
<option value="Vollzeit">Vollzeit</option>
@@ -432,14 +428,9 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Vorlagen</h3>
<div className="flex flex-wrap gap-1.5">
{(mode === "snapshot" ? REPORT_PRESETS : EVENT_REPORT_PRESETS).map((preset) => (
<button
key={preset.name}
type="button"
onClick={() => applyPreset(preset)}
className="rounded-full border border-border px-2.5 py-1 text-xs font-semibold text-ink-body hover:bg-surface"
>
<Button key={preset.name} variant="secondary" size="sm" onClick={() => applyPreset(preset)} className="!rounded-full !px-2.5 !py-1">
{preset.name}
</button>
</Button>
))}
</div>
</div>
@@ -455,11 +446,11 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<p className="mb-2 text-xs text-ink-muted">Alle Ereignisse im gewählten Zeitraum als Rohdaten (eine Zeile pro Ereignis).</p>
)}
<div className="flex gap-2">
<a href={fullExportHref("csv")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<a href={fullExportHref("csv")} className={LINK_BUTTON_CLASS}>
<FileText className="h-4 w-4" />
CSV
</a>
<a href={fullExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<a href={fullExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
<FileSpreadsheet className="h-4 w-4" />
Excel
</a>
@@ -472,12 +463,22 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<ul className="flex flex-col divide-y divide-border">
{savedReports.map((r) => (
<li key={r.id} className="flex items-center justify-between py-1.5 text-sm">
<button type="button" onClick={() => applySavedReport(r.config)} className="text-left text-ink-body hover:text-brand-700 hover:underline">
<Button
variant="ghost"
size="sm"
onClick={() => applySavedReport(r.config)}
className="!px-0 !justify-start text-left hover:!bg-transparent hover:text-brand-700 hover:underline"
>
{r.name}
</button>
<button type="button" onClick={() => handleDeleteReport(r.id)} aria-label="Löschen" className="text-ink-muted hover:text-danger-solid">
</Button>
<Button
variant="icon"
onClick={() => handleDeleteReport(r.id)}
aria-label={`Bericht ${r.name} löschen`}
className="hover:!text-danger-solid"
>
<Trash2 className="h-3.5 w-3.5" />
</button>
</Button>
</li>
))}
</ul>
@@ -492,22 +493,18 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
<p className="text-xs text-ink-muted">{recordCount} {mode === "snapshot" ? "Datensätze" : "Ereignisse"}</p>
</div>
<div className="flex gap-2">
<a href={reportExportHref("csv")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<a href={reportExportHref("csv")} className={LINK_BUTTON_CLASS}>
<FileText className="h-4 w-4" />
CSV
</a>
<a href={reportExportHref("xlsx")} className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface">
<a href={reportExportHref("xlsx")} className={LINK_BUTTON_CLASS}>
<FileSpreadsheet className="h-4 w-4" />
Excel
</a>
<button
type="button"
onClick={() => setSaveModalOpen(true)}
className="flex items-center gap-1.5 rounded border border-border px-3 py-1.5 text-sm font-semibold text-ink-body hover:bg-surface"
>
<Button variant="secondary" size="sm" onClick={() => setSaveModalOpen(true)}>
<Save className="h-4 w-4" />
Bericht speichern
</button>
</Button>
</div>
</div>
@@ -583,29 +580,23 @@ export function ReportsPageClient(props: ReportsPageClientProps) {
title="Bericht speichern"
footer={
<>
<button onClick={() => setSaveModalOpen(false)} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
<Button variant="ghost" onClick={() => setSaveModalOpen(false)}>
Abbrechen
</button>
<button
onClick={handleConfirmSaveReport}
disabled={savingReport}
className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
>
</Button>
<Button onClick={handleConfirmSaveReport} pending={savingReport}>
Speichern
</button>
</Button>
</>
}
>
<div>
<label className="mb-1 block text-sm font-semibold text-ink">Name für diesen Bericht*</label>
<input
value={newReportName}
onChange={(e) => setNewReportName(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
autoFocus
className="w-full rounded border border-border px-3 py-2 text-sm"
/>
</div>
<TextField
label="Name für diesen Bericht"
required
value={newReportName}
onChange={setNewReportName}
onKeyDown={(e) => e.key === "Enter" && handleConfirmSaveReport()}
autoFocus
/>
</Modal>
</div>
);