molecule-ai/molecule-core
49
0
Fork 2
Code Issues 146 Pull Requests 159 Actions 5 Packages Projects Releases Wiki Activity

fix(canvas/tabs): add role=alert + aria-live=assertive to tab error states (WCAG 4.1.3)

Browse Source 
Error divs in EventsTab, TracesTab, ChannelsTab, DetailsTab (save/restart/delete),
and ExternalConnectionSection now use role=alert so assistive technology
announces each error immediately when it appears.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux
2026-05-18 01:11:47 +00:00
parent 41c2258043
commit d1664b3144
5 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canvas/src/components/tabs/ChannelsTab.tsx
+1 -1
View File
@@ -262,7 +262,7 @@ export function ChannelsTab({ workspaceId }: Props) {
</div>
{error && (
<div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{error}
</div>
)}
canvas/src/components/tabs/DetailsTab.tsx
+3 -3
View File
@@ -157,7 +157,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
</select>
</Field>
{saveError && (
<div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{saveError}
</div>
)}
@@ -203,7 +203,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
{isRestartable && (
<div className="pt-2">
{restartError && (
<div className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{restartError}
</div>
)}
@@ -307,7 +307,7 @@ export function DetailsTab({ workspaceId, data }: Props) {
{/* Delete */}
<Section title="Danger Zone">
{deleteError && (
<div className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{deleteError}
</div>
)}
canvas/src/components/tabs/EventsTab.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function EventsTab({ workspaceId }: Props) {
</div>
{error && (
<div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{error}
</div>
)}
canvas/src/components/tabs/ExternalConnectionSection.tsx
+1 -1
View File
@@ -102,7 +102,7 @@ export function ExternalConnectionSection({ workspaceId }: Props) {
</div>
{error && (
<div className="mt-2 px-2 py-1 bg-red-900/30 border border-red-800 rounded text-[10px] text-bad">
<div role="alert" aria-live="assertive" className="mt-2 px-2 py-1 bg-red-900/30 border border-red-800 rounded text-[10px] text-bad">
{error}
</div>
)}
canvas/src/components/tabs/TracesTab.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function TracesTab({ workspaceId }: Props) {
</div>
{error && (
<div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
<div role="alert" aria-live="assertive" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">
{error}
</div>
)}