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

Merged
hongming merged 1 commits from fix/tabs-error-aria-alert into main 2026-05-18 18:36:30 +00:00
5 changed files with 7 additions and 7 deletions
+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>
)}
+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>
)}
+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>
)}
@@ -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>
)}
+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>
)}