Hartmut/Nexus
1
0
Fork 0
Code Issues 11 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
2026-04-11 23:27:56 +02:00
co-authored by Claude Opus 4.6
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/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}