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/analytics/ComputationGraphClient.tsx
+79 -46
View File
@@ -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">
apps/web/src/components/resources/BulkEditModal.tsx
+70 -15
View File
@@ -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}
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"
>
↪