a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics#3560
Open
rosanusi wants to merge 1 commit into
Open
a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics#3560rosanusi wants to merge 1 commit into
rosanusi wants to merge 1 commit into
Conversation
…ert" - Remove role="log" from the Toaster container; live-region semantics move entirely to individual Toast instances - Add getRole() to Toast: error variant → role="alert" (assertive); all others → role="status" (polite) - Add aria-atomic="true" so the full toast content re-announces on each insertion, even when consecutive toasts share similar markup Screen readers can now distinguish urgency between error and informational toasts (WCAG 2.2 SC 4.1.3 Status Messages). A11y-Audit-Ref: 4.1.3-toaster-role-status-alert Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
a11y
![temporal-cicd[bot]](https://avatars.githubusercontent.com/in/357945?s=60&v=4){kind=small}
|
|
||
| <div class={toast({ position: $position })} role="log"> | ||
| <div class={toast({ position: $position })}> | ||
| {#each $toasts as { message, variant, id, link } (id)} |
Contributor
There was a problem hiding this comment.
⚠️ Type 'ToastVariant | undefined' is not assignable to type 'ToastVariant'.⚠️ Type 'string | undefined' is not assignable to type 'string'.
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
role="log"from theToastercontainer —role="log"is intended for navigable chronological logs, not transient notifications, and produces inconsistent announcement timing across screen readersgetRole()toToast:errorvariant →role="alert"(assertive, interrupts AT speech); all other variants →role="status"(polite, doesn't interrupt)aria-atomic="true"on each toast so the full content re-announces on every DOM insertion, even when consecutive toasts share similar markupThis mirrors the convention already in
holocene/alert.svelteand closes WCAG 2.2 SC 4.1.3 (Status Messages) for the primary notification surface in both repos (cascades to cloud-ui-main via the@temporalio/uitarball re-pack).Changes
src/lib/holocene/toaster.svelterole="log"from container divsrc/lib/holocene/toast.sveltegetRole(),$: role,{role},aria-atomic="true"on toast divTest plan
<div>hasrole="status"(success / info / warning / primary) orrole="alert"(error); container<div>has noroleA11y-Audit-Ref: 4.1.3-toaster-role-status-alert
🤖 Generated with Claude Code