From e08ee94546bc7fd03eff8e7f9ff002c0db7aa311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sat, 11 Apr 2026 23:27:56 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20accessibility=20pass=20=E2=80=94=20?=
 =?UTF-8?q?add=20aria-labels,=20dialog=20roles,=20and=20pressed=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KeyboardShortcutOverlay: add role="dialog", aria-modal, aria-labelledby, close button aria-label
- Timeline popovers (5 files): add aria-label="Close" to symbol-only close buttons
- TimelineToolbar: add aria-label to navigation and undo/redo icon buttons
- ComputationGraphClient: add aria-pressed to 2D/3D and view mode toggle buttons
- BulkEditModal: fix type mismatch from jsonb field hardening

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../analytics/ComputationGraphClient.tsx      | 125 +++++++++++-------
 .../components/resources/BulkEditModal.tsx    |  85 +++++++++---
 .../components/timeline/AllocationPopover.tsx |   1 +
 .../timeline/BatchAssignPopover.tsx           |   1 +
 .../src/components/timeline/DemandPopover.tsx |  80 ++++++++---
 .../timeline/KeyboardShortcutOverlay.tsx      |  20 ++-
 .../timeline/NewAllocationPopover.tsx         |   1 +
 .../src/components/timeline/ProjectPanel.tsx  |   1 +
 .../components/timeline/TimelineToolbar.tsx   |   4 +
 9 files changed, 235 insertions(+), 83 deletions(-)

diff --git a/apps/web/src/components/analytics/ComputationGraphClient.tsx b/apps/web/src/components/analytics/ComputationGraphClient.tsx
index 8388fc3..6edd2a9 100644
--- a/apps/web/src/components/analytics/ComputationGraphClient.tsx
+++ b/apps/web/src/components/analytics/ComputationGraphClient.tsx
@@ -60,39 +60,46 @@ export default function ComputationGraphClient() {
   const [dimension, setDimension] = useState<Dimension>("2d");
 
   const {
-    viewMode, setViewMode,
-    resourceId, setResourceId,
-    month, setMonth,
-    projectId, setProjectId,
-    resources, projects,
+    viewMode,
+    setViewMode,
+    resourceId,
+    setResourceId,
+    month,
+    setMonth,
+    projectId,
+    setProjectId,
+    resources,
+    projects,
     isLoading,
     activeDomains,
     graphData,
     rawData,
-    highlightedNodes, setHighlightedNodes,
-    domainFilter, toggleDomain,
+    highlightedNodes,
+    setHighlightedNodes,
+    domainFilter,
+    toggleDomain,
   } = state;
 
-  const resourceMeta = viewMode === "resource"
-    ? (rawData?.meta as ResourceGraphMeta | undefined)
-    : undefined;
+  const resourceMeta =
+    viewMode === "resource" ? (rawData?.meta as ResourceGraphMeta | undefined) : undefined;
   const resourceFactors = resourceMeta?.factors;
-  const weeklyAvailabilityEntries: Array<[string, number | undefined]> = resourceFactors?.weeklyAvailability
-    ? [
-      ["Mo", resourceFactors.weeklyAvailability.monday],
-      ["Di", resourceFactors.weeklyAvailability.tuesday],
-      ["Mi", resourceFactors.weeklyAvailability.wednesday],
-      ["Do", resourceFactors.weeklyAvailability.thursday],
-      ["Fr", resourceFactors.weeklyAvailability.friday],
-      ["Sa", resourceFactors.weeklyAvailability.saturday],
-      ["So", resourceFactors.weeklyAvailability.sunday],
-    ]
-    : [];
+  const weeklyAvailabilityEntries: Array<[string, number | undefined]> =
+    resourceFactors?.weeklyAvailability
+      ? [
+          ["Mo", resourceFactors.weeklyAvailability.monday],
+          ["Di", resourceFactors.weeklyAvailability.tuesday],
+          ["Mi", resourceFactors.weeklyAvailability.wednesday],
+          ["Do", resourceFactors.weeklyAvailability.thursday],
+          ["Fr", resourceFactors.weeklyAvailability.friday],
+          ["Sa", resourceFactors.weeklyAvailability.saturday],
+          ["So", resourceFactors.weeklyAvailability.sunday],
+        ]
+      : [];
   const weeklyAvailability = resourceFactors?.weeklyAvailability
     ? weeklyAvailabilityEntries
-      .filter((entry): entry is [string, number] => typeof entry[1] === "number" && entry[1] > 0)
-      .map(([label, hours]) => `${label} ${formatNumber(hours, 1)}h`)
-      .join(" · ")
+        .filter((entry): entry is [string, number] => typeof entry[1] === "number" && entry[1] > 0)
+        .map(([label, hours]) => `${label} ${formatNumber(hours, 1)}h`)
+        .join(" · ")
     : "—";
   const topHolidays = resourceMeta?.resolvedHolidays?.slice(0, 6) ?? [];
 
@@ -104,6 +111,7 @@ export default function ComputationGraphClient() {
         <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
           <button
             onClick={() => setDimension("2d")}
+            aria-pressed={dimension === "2d"}
             className={`px-3 py-1.5 text-sm font-medium transition-colors ${
               dimension === "2d"
                 ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
@@ -114,6 +122,7 @@ export default function ComputationGraphClient() {
           </button>
           <button
             onClick={() => setDimension("3d")}
+            aria-pressed={dimension === "3d"}
             className={`px-3 py-1.5 text-sm font-medium transition-colors ${
               dimension === "3d"
                 ? "bg-zinc-800 text-white dark:bg-zinc-200 dark:text-zinc-900"
@@ -128,6 +137,7 @@ export default function ComputationGraphClient() {
         <div className="flex rounded-lg border border-zinc-300 dark:border-zinc-600">
           <button
             onClick={() => setViewMode("resource")}
+            aria-pressed={viewMode === "resource"}
             className={`px-3 py-1.5 text-sm font-medium transition-colors ${
               viewMode === "resource"
                 ? "bg-blue-600 text-white"
@@ -138,6 +148,7 @@ export default function ComputationGraphClient() {
           </button>
           <button
             onClick={() => setViewMode("project")}
+            aria-pressed={viewMode === "project"}
             className={`px-3 py-1.5 text-sm font-medium transition-colors ${
               viewMode === "project"
                 ? "bg-blue-600 text-white"
@@ -177,11 +188,14 @@ export default function ComputationGraphClient() {
             className="rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-sm dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-200"
           >
             <option value="">Select Project...</option>
-            {(Array.isArray(projects) ? projects : []).map((p: { id: string; name: string; shortCode?: string | null }) => (
-              <option key={p.id} value={p.id}>
-                {p.shortCode ? `${p.shortCode} — ` : ""}{p.name}
-              </option>
-            ))}
+            {(Array.isArray(projects) ? projects : []).map(
+              (p: { id: string; name: string; shortCode?: string | null }) => (
+                <option key={p.id} value={p.id}>
+                  {p.shortCode ? `${p.shortCode} — ` : ""}
+                  {p.name}
+                </option>
+              ),
+            )}
           </select>
         )}
 
@@ -246,15 +260,22 @@ export default function ComputationGraphClient() {
           <aside className="w-[24rem] overflow-y-auto border-l border-zinc-200 bg-white/90 p-4 dark:border-zinc-700 dark:bg-zinc-950/90">
             <div className="space-y-4">
               <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
-                <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Bezugsgroessen</div>
+                <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  Bezugsgroessen
+                </div>
                 <div className="mt-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                   {resourceMeta.resourceName ?? "Resource"}
                 </div>
-                <div className="text-sm text-zinc-500">{resourceMeta.resourceEid ?? "—"} · {resourceMeta.month ?? month}</div>
+                <div className="text-sm text-zinc-500">
+                  {resourceMeta.resourceEid ?? "—"} · {resourceMeta.month ?? month}
+                </div>
                 <div className="mt-3 grid grid-cols-1 gap-2 text-sm text-zinc-700 dark:text-zinc-300">
                   <div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950">
                     <div className="text-xs uppercase text-zinc-500">Land</div>
-                    <div>{resourceMeta.countryName ?? resourceMeta.countryCode ?? "—"}{resourceMeta.countryCode ? ` (${resourceMeta.countryCode})` : ""}</div>
+                    <div>
+                      {resourceMeta.countryName ?? resourceMeta.countryCode ?? "—"}
+                      {resourceMeta.countryCode ? ` (${resourceMeta.countryCode})` : ""}
+                    </div>
                   </div>
                   <div className="rounded-lg bg-white px-3 py-2 dark:bg-zinc-950">
                     <div className="text-xs uppercase text-zinc-500">Bundesland / Region</div>
@@ -273,23 +294,30 @@ export default function ComputationGraphClient() {
 
               <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
                 <div className="flex items-center justify-between">
-                  <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Feiertagsbasis</div>
+                  <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                    Feiertagsbasis
+                  </div>
                   <div className="text-xs text-zinc-500">
-                    {resourceFactors?.publicHolidayCount ?? 0} Feiertage, {resourceFactors?.publicHolidayWorkdayCount ?? 0} wirksam
+                    {resourceFactors?.publicHolidayCount ?? 0} Feiertage,{" "}
+                    {resourceFactors?.publicHolidayWorkdayCount ?? 0} wirksam
                   </div>
                 </div>
                 <div className="mt-3 space-y-2">
-                  {topHolidays.length > 0 ? topHolidays.map((holiday) => (
-                    <div
-                      key={`${holiday.date}-${holiday.name}`}
-                      className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950"
-                    >
-                      <div className="font-medium text-zinc-900 dark:text-zinc-100">{holiday.name}</div>
-                      <div className="text-xs text-zinc-500">
-                        {holiday.date} · {holiday.scope} · {holiday.calendarName ?? "Kalender"}
+                  {topHolidays.length > 0 ? (
+                    topHolidays.map((holiday) => (
+                      <div
+                        key={`${holiday.date}-${holiday.name}`}
+                        className="rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950"
+                      >
+                        <div className="font-medium text-zinc-900 dark:text-zinc-100">
+                          {holiday.name}
+                        </div>
+                        <div className="text-xs text-zinc-500">
+                          {holiday.date} · {holiday.scope} · {holiday.calendarName ?? "Kalender"}
+                        </div>
                       </div>
-                    </div>
-                  )) : (
+                    ))
+                  ) : (
                     <div className="rounded-lg border border-dashed border-zinc-200 px-3 py-2 text-sm text-zinc-500 dark:border-zinc-800">
                       Keine aufgeloesten Feiertage im gewaehlten Monat.
                     </div>
@@ -298,12 +326,17 @@ export default function ComputationGraphClient() {
               </section>
 
               <section className="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900">
-                <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">Herleitung</div>
+                <div className="text-xs font-semibold uppercase tracking-wide text-zinc-500">
+                  Herleitung
+                </div>
                 <div className="mt-3 space-y-2">
                   <div className="rounded-lg bg-white px-3 py-2 text-sm dark:bg-zinc-950">
                     <div className="text-xs uppercase text-zinc-500">SAH Formel</div>
                     <div className="font-medium text-zinc-900 dark:text-zinc-100">
-                      {formatNumber(resourceFactors?.baseAvailableHours)}h - {formatNumber(resourceFactors?.publicHolidayHoursDeduction)}h - {formatNumber(resourceFactors?.absenceHoursDeduction)}h = {formatNumber(resourceFactors?.effectiveAvailableHours)}h
+                      {formatNumber(resourceFactors?.baseAvailableHours)}h -{" "}
+                      {formatNumber(resourceFactors?.publicHolidayHoursDeduction)}h -{" "}
+                      {formatNumber(resourceFactors?.absenceHoursDeduction)}h ={" "}
+                      {formatNumber(resourceFactors?.effectiveAvailableHours)}h
                     </div>
                   </div>
                   <div className="grid grid-cols-2 gap-2 text-sm">
diff --git a/apps/web/src/components/resources/BulkEditModal.tsx b/apps/web/src/components/resources/BulkEditModal.tsx
index ea615ee..788f64f 100644
--- a/apps/web/src/components/resources/BulkEditModal.tsx
+++ b/apps/web/src/components/resources/BulkEditModal.tsx
@@ -32,7 +32,11 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
   function toggleInclude(key: string) {
     setIncluded((prev) => {
       const next = new Set(prev);
-      if (next.has(key)) { next.delete(key); } else { next.add(key); }
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
       return next;
     });
   }
@@ -43,9 +47,13 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
 
   function handleSave() {
     setError(null);
-    const fields: Record<string, unknown> = {};
+    const fields: Record<string, string | number | boolean | null> = {};
     for (const key of included) {
-      fields[key] = values[key] ?? "";
+      const val = values[key] ?? "";
+      fields[key] =
+        typeof val === "string" || typeof val === "number" || typeof val === "boolean"
+          ? val
+          : String(val);
     }
     if (Object.keys(fields).length === 0) {
       setError("Select at least one field to update.");
@@ -73,15 +81,27 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
               Updating {selectedIds.length} resource{selectedIds.length !== 1 ? "s" : ""}
             </p>
           </div>
-          <button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none" aria-label="Close">×</button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+            aria-label="Close"
+          >
+            ×
+          </button>
         </div>
 
         <div className="px-6 py-4 space-y-3 max-h-[60vh] overflow-y-auto">
           {fieldDefs.length === 0 && (
-            <p className="text-sm text-gray-400 text-center py-6">No custom fields defined. Configure them in Admin → Blueprints.</p>
+            <p className="text-sm text-gray-400 text-center py-6">
+              No custom fields defined. Configure them in Admin → Blueprints.
+            </p>
           )}
           {fieldDefs.map((field) => (
-            <div key={field.key} className={`border rounded-lg p-3 transition-colors ${included.has(field.key) ? "border-brand-300 bg-brand-50" : "border-gray-200"}`}>
+            <div
+              key={field.key}
+              className={`border rounded-lg p-3 transition-colors ${included.has(field.key) ? "border-brand-300 bg-brand-50" : "border-gray-200"}`}
+            >
               <label className="flex items-center gap-2 mb-2 cursor-pointer">
                 <input
                   type="checkbox"
@@ -105,13 +125,21 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
         </div>
 
         {error && (
-          <div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+          <div className="mx-6 mb-2 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+            {error}
+          </div>
         )}
 
         <div className="flex items-center justify-between px-6 py-4 border-t border-gray-200">
-          <p className="text-xs text-gray-400">{included.size} field{included.size !== 1 ? "s" : ""} selected</p>
+          <p className="text-xs text-gray-400">
+            {included.size} field{included.size !== 1 ? "s" : ""} selected
+          </p>
           <div className="flex gap-3">
-            <button type="button" onClick={onClose} className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium"
+            >
               Cancel
             </button>
             <button
@@ -120,7 +148,9 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
               disabled={mutation.isPending || included.size === 0}
               className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
             >
-              {mutation.isPending ? "Saving…" : `Apply to ${selectedIds.length} resource${selectedIds.length !== 1 ? "s" : ""}`}
+              {mutation.isPending
+                ? "Saving…"
+                : `Apply to ${selectedIds.length} resource${selectedIds.length !== 1 ? "s" : ""}`}
             </button>
           </div>
         </div>
@@ -129,12 +159,24 @@ export function BulkEditModal({ selectedIds, fieldDefs, onClose, onSuccess }: Pr
   );
 }
 
-function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinition; value: unknown; onChange: (v: unknown) => void }) {
+function FieldInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: BlueprintFieldDefinition;
+  value: unknown;
+  onChange: (v: unknown) => void;
+}) {
   const str = value !== undefined && value !== null ? String(value) : "";
 
   if (field.type === FieldType.BOOLEAN) {
     return (
-      <select value={str} onChange={(e) => onChange(e.target.value === "true")} className="app-input">
+      <select
+        value={str}
+        onChange={(e) => onChange(e.target.value === "true")}
+        className="app-input"
+      >
         <option value="">— select —</option>
         <option value="true">Yes</option>
         <option value="false">No</option>
@@ -146,7 +188,11 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
     return (
       <select value={str} onChange={(e) => onChange(e.target.value)} className="app-input">
         <option value="">— select —</option>
-        {field.options.map((o) => <option key={o.value} value={o.value}>{o.label || o.value}</option>)}
+        {field.options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label || o.value}
+          </option>
+        ))}
       </select>
     );
   }
@@ -164,7 +210,14 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
   }
 
   if (field.type === FieldType.DATE) {
-    return <input type="date" value={str} onChange={(e) => onChange(e.target.value)} className="app-input" />;
+    return (
+      <input
+        type="date"
+        value={str}
+        onChange={(e) => onChange(e.target.value)}
+        className="app-input"
+      />
+    );
   }
 
   if (field.type === FieldType.TEXTAREA) {
@@ -181,7 +234,9 @@ function FieldInput({ field, value, onChange }: { field: BlueprintFieldDefinitio
 
   return (
     <input
-      type={field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"}
+      type={
+        field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"
+      }
       value={str}
       onChange={(e) => onChange(e.target.value)}
       placeholder={field.placeholder}
diff --git a/apps/web/src/components/timeline/AllocationPopover.tsx b/apps/web/src/components/timeline/AllocationPopover.tsx
index cf38e6f..a066898 100644
--- a/apps/web/src/components/timeline/AllocationPopover.tsx
+++ b/apps/web/src/components/timeline/AllocationPopover.tsx
@@ -221,6 +221,7 @@ export function AllocationPopover({
         </div>
         <button
           onClick={onClose}
+          aria-label="Close"
           className="text-gray-400 hover:text-gray-600 text-lg leading-none"
         >
           &times;
diff --git a/apps/web/src/components/timeline/BatchAssignPopover.tsx b/apps/web/src/components/timeline/BatchAssignPopover.tsx
index 4e8e705..9a33927 100644
--- a/apps/web/src/components/timeline/BatchAssignPopover.tsx
+++ b/apps/web/src/components/timeline/BatchAssignPopover.tsx
@@ -105,6 +105,7 @@ export function BatchAssignPopover({
         <button
           type="button"
           onClick={onClose}
+          aria-label="Close"
           className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
         >
           &times;
diff --git a/apps/web/src/components/timeline/DemandPopover.tsx b/apps/web/src/components/timeline/DemandPopover.tsx
index 399761f..ef03bbd 100644
--- a/apps/web/src/components/timeline/DemandPopover.tsx
+++ b/apps/web/src/components/timeline/DemandPopover.tsx
@@ -39,12 +39,17 @@ export function DemandPopover({
   const roleColor = demand.roleEntity?.color ?? "#f59e0b";
   const startDate = new Date(demand.startDate);
   const endDate = new Date(demand.endDate);
-  const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1);
+  const days = Math.max(
+    1,
+    Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1,
+  );
   const totalHours = demand.hoursPerDay * days;
   const budgetCents = demand.dailyCostCents * days;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: suggestionData, isLoading: loadingSuggestions } = (trpc.staffing.getProjectStaffingSuggestions.useQuery as any)(
+  const { data: suggestionData, isLoading: loadingSuggestions } = (
+    trpc.staffing.getProjectStaffingSuggestions.useQuery as any
+  )(
     {
       projectId: demand.projectId,
       roleName: demand.role ?? undefined,
@@ -53,7 +58,20 @@ export function DemandPopover({
       limit: 3,
     },
     { staleTime: 60_000, retry: false },
-  ) as { data: { suggestions: Array<{ id: string; name: string; eid: string; availableHoursPerDay: number; utilization: number }> } | undefined; isLoading: boolean };
+  ) as {
+    data:
+      | {
+          suggestions: Array<{
+            id: string;
+            name: string;
+            eid: string;
+            availableHoursPerDay: number;
+            utilization: number;
+          }>;
+        }
+      | undefined;
+    isLoading: boolean;
+  };
   const suggestions = suggestionData?.suggestions ?? [];
 
   const popover = (
@@ -78,6 +96,7 @@ export function DemandPopover({
         </div>
         <button
           onClick={onClose}
+          aria-label="Close"
           className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none ml-2"
         >
           &times;
@@ -90,8 +109,7 @@ export function DemandPopover({
           Project:{" "}
           <span className="font-medium text-gray-700 dark:text-gray-200">
             {demand.project.name}
-          </span>
-          {" "}
+          </span>{" "}
           <span className="text-gray-400 dark:text-gray-500">({demand.project.shortCode})</span>
         </div>
 
@@ -100,9 +118,7 @@ export function DemandPopover({
           <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 border border-dashed border-amber-300 dark:border-amber-700">
             Open Demand
           </span>
-          <span className="text-[11px] text-gray-400 dark:text-gray-500">
-            {demand.status}
-          </span>
+          <span className="text-[11px] text-gray-400 dark:text-gray-500">{demand.status}</span>
         </div>
 
         {/* Headcount */}
@@ -137,11 +153,15 @@ export function DemandPopover({
           {/* Hours */}
           <div>
             <div className="text-gray-400 dark:text-gray-500 mb-0.5">Hours / day</div>
-            <div className="font-medium text-gray-800 dark:text-gray-200">{demand.hoursPerDay}h</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">
+              {demand.hoursPerDay}h
+            </div>
           </div>
           <div>
             <div className="text-gray-400 dark:text-gray-500 mb-0.5">Total hours</div>
-            <div className="font-medium text-gray-800 dark:text-gray-200">{totalHours}h ({days}d)</div>
+            <div className="font-medium text-gray-800 dark:text-gray-200">
+              {totalHours}h ({days}d)
+            </div>
           </div>
 
           {/* Budget */}
@@ -166,7 +186,9 @@ export function DemandPopover({
           {demand.percentage > 0 && (
             <div>
               <div className="text-gray-400 dark:text-gray-500 mb-0.5">Percentage</div>
-              <div className="font-medium text-gray-800 dark:text-gray-200">{demand.percentage}%</div>
+              <div className="font-medium text-gray-800 dark:text-gray-200">
+                {demand.percentage}%
+              </div>
             </div>
           )}
         </div>
@@ -175,8 +197,18 @@ export function DemandPopover({
         {(loadingSuggestions || suggestions.length > 0) && (
           <div className="pt-2 border-t border-gray-100 dark:border-gray-700">
             <div className="flex items-center gap-1 mb-2">
-              <svg className="h-3.5 w-3.5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              <svg
+                className="h-3.5 w-3.5 text-brand-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 10V3L4 14h7v7l9-11h-7z"
+                />
               </svg>
               <span className="text-[11px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                 Suggested Resources
@@ -205,13 +237,19 @@ export function DemandPopover({
                       </span>
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="text-xs font-medium text-gray-800 dark:text-gray-200 truncate">{s.name}</div>
+                      <div className="text-xs font-medium text-gray-800 dark:text-gray-200 truncate">
+                        {s.name}
+                      </div>
                       <div className="text-[11px] text-gray-400 dark:text-gray-500">
-                        {Math.round(s.utilization)}% utilized · {s.availableHoursPerDay.toFixed(1)}h/d free
+                        {Math.round(s.utilization)}% utilized · {s.availableHoursPerDay.toFixed(1)}
+                        h/d free
                       </div>
                     </div>
                     <button
-                      onClick={() => { onClose(); onFillDemand(demand); }}
+                      onClick={() => {
+                        onClose();
+                        onFillDemand(demand);
+                      }}
                       className="shrink-0 rounded px-2 py-1 text-[11px] font-medium bg-brand-50 text-brand-700 hover:bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300 dark:hover:bg-brand-900/50 transition-colors"
                       title={`Assign ${s.name}`}
                     >
@@ -228,14 +266,20 @@ export function DemandPopover({
         <div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
           {demand.unfilledHeadcount > 0 && (
             <button
-              onClick={() => { onClose(); onFillDemand(demand); }}
+              onClick={() => {
+                onClose();
+                onFillDemand(demand);
+              }}
               className="flex-1 py-1.5 rounded-lg text-sm font-medium bg-amber-500 text-white hover:bg-amber-600 transition-colors"
             >
               Fill Demand
             </button>
           )}
           <button
-            onClick={() => { onClose(); onOpenPanel(demand.projectId); }}
+            onClick={() => {
+              onClose();
+              onOpenPanel(demand.projectId);
+            }}
             className="flex-1 py-1.5 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
           >
             Open Project
diff --git a/apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx b/apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx
index 728d75c..54b0ea8 100644
--- a/apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx
+++ b/apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 const SHORTCUTS: { keys: string; description: string }[] = [
-  { keys: "← / →", description: "Scroll timeline 1 day" },
-  { keys: "Shift + ← / →", description: "Scroll timeline 1 week" },
+  { keys: "\u2190 / \u2192", description: "Scroll timeline 1 day" },
+  { keys: "Shift + \u2190 / \u2192", description: "Scroll timeline 1 week" },
   { keys: "Delete / Backspace", description: "Delete selected allocations" },
   { keys: "Ctrl / Cmd + Z", description: "Undo last action" },
   { keys: "Ctrl / Cmd + Shift + Z", description: "Redo" },
@@ -17,15 +17,27 @@ interface KeyboardShortcutOverlayProps {
 
 export function KeyboardShortcutOverlay({ onClose }: KeyboardShortcutOverlayProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="keyboard-shortcuts-title"
+    >
       <div
         className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-700 w-full max-w-sm mx-4 overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-700">
-          <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Keyboard Shortcuts</h2>
+          <h2
+            id="keyboard-shortcuts-title"
+            className="text-sm font-semibold text-gray-900 dark:text-gray-100"
+          >
+            Keyboard Shortcuts
+          </h2>
           <button
             onClick={onClose}
+            aria-label="Close keyboard shortcuts"
             className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
           >
             &times;
diff --git a/apps/web/src/components/timeline/NewAllocationPopover.tsx b/apps/web/src/components/timeline/NewAllocationPopover.tsx
index 2b8a666..bf4017c 100644
--- a/apps/web/src/components/timeline/NewAllocationPopover.tsx
+++ b/apps/web/src/components/timeline/NewAllocationPopover.tsx
@@ -96,6 +96,7 @@ export function NewAllocationPopover({
         </span>
         <button
           onClick={onClose}
+          aria-label="Close"
           className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none"
         >
           &times;
diff --git a/apps/web/src/components/timeline/ProjectPanel.tsx b/apps/web/src/components/timeline/ProjectPanel.tsx
index cc9c649..779e4bf 100644
--- a/apps/web/src/components/timeline/ProjectPanel.tsx
+++ b/apps/web/src/components/timeline/ProjectPanel.tsx
@@ -584,6 +584,7 @@ function PanelShell({ children, onClose }: { children: React.ReactNode; onClose:
         <span className="text-sm font-semibold text-gray-700">Project Details</span>
         <button
           onClick={onClose}
+          aria-label="Close panel"
           className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
         >
           &times;
diff --git a/apps/web/src/components/timeline/TimelineToolbar.tsx b/apps/web/src/components/timeline/TimelineToolbar.tsx
index d77200e..6052cb1 100644
--- a/apps/web/src/components/timeline/TimelineToolbar.tsx
+++ b/apps/web/src/components/timeline/TimelineToolbar.tsx
@@ -132,6 +132,7 @@ export function TimelineToolbar({
             onClick={onNavigateBack}
             className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
             title="Previous 4 weeks"
+            aria-label="Previous 4 weeks"
           >
             ‹
           </button>
@@ -147,6 +148,7 @@ export function TimelineToolbar({
             onClick={onNavigateForward}
             className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
             title="Next 4 weeks"
+            aria-label="Next 4 weeks"
           >
             ›
           </button>
@@ -160,6 +162,7 @@ export function TimelineToolbar({
               onClick={onUndo}
               disabled={!canUndo}
               title="Undo (Ctrl+Z)"
+              aria-label="Undo"
               className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
             >
               ↩
@@ -169,6 +172,7 @@ export function TimelineToolbar({
               onClick={onRedo}
               disabled={!canRedo}
               title="Redo (Ctrl+Shift+Z / Ctrl+Y)"
+              aria-label="Redo"
               className="rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
             >
               ↪