Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(web): accessibility pass — add aria-labels, dialog roles, and pressed states

Browse Source 
- 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>
This commit is contained in:
Hartmut Nörenberg
2026-04-11 23:27:56 +02:00
parent 85c064ba32
commit e08ee94546
9 changed files with 235 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/timeline/AllocationPopover.tsx
+1
View File
@@ -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;
apps/web/src/components/timeline/BatchAssignPopover.tsx
+1
View File
@@ -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;
apps/web/src/components/timeline/DemandPopover.tsx
+62 -18
View File
@@ -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
apps/web/src/components/timeline/KeyboardShortcutOverlay.tsx
+16 -4
View File
@@ -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;
apps/web/src/components/timeline/NewAllocationPopover.tsx
+1
View File
@@ -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;
apps/web/src/components/timeline/ProjectPanel.tsx
+1
View File
@@ -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;
apps/web/src/components/timeline/TimelineToolbar.tsx
+4
View File
@@ -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"
>
↪