a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) by rosanusi · Pull Request #3553 · temporalio/ui

rosanusi · 2026-06-11T18:46:48Z

Description

The toast close button was a bare <button><Icon name="close" /></button> with no padding or explicit size, collapsing its hit area to ~16×16 CSS px — below the WCAG 2.5.8 (Target Size Minimum, Level AA) 24×24 requirement.

Fix: replace with Holocene's Button using leadingIcon:

<Button
  variant="ghost"
  leadingIcon="close"
  aria-label={dismissLabel}
  class="h-6 w-6 shrink-0 p-0 text-inherit"
  disableTracking
  on:click={handleDismiss}
/>

h-6 w-6 renders at 24×24 CSS px, satisfying the criterion. twMerge overrides Button's default text-shaped sizing (h-10 px-4) so the icon-only button stays square. It inherits Holocene's focus-visible ring, hover styling, and correct aria-label forwarding — removing the bare-button anti-pattern.

icon-button.svelte is deprecated in favor of Button + leadingIcon, so the close button uses Button directly rather than the wrapper.

toast.svelte is Svelte 4, so on:click on Button works without any interop concerns.

Changed file: src/lib/holocene/toast.svelte — import added, bare button replaced.

This fix cascades to all toast consumers in both ui-main and cloud-ui-main (via the @temporalio/ui tarball).

Screenshots

No visual change — the close icon glyph stays at 16×16 px. The hit area extends evenly around it (to 24×24 total) within the existing toast padding.

Design

No design changes. Ghost variant matches the current transparent-background close button appearance.

Testing

Trigger a toast (e.g. perform any action that shows a success/error toast).
Inspect the close button: getBoundingClientRect() returns 24×24.
Tap-test on a touchscreen — consistent activation.
Tab to the close button: focus-visible ring is visible.
Press Enter/Space on the focused button: toast is dismissed.
Screen reader: close button announces as "Close" (or the closeButtonLabel value).
axe-core: no target-size violations on toast close button.
Stacked toasts: confirm multiple toasts render correctly with the new button size.

Checklist

No new i18n keys — reuses existing dismissLabel / common.close
No visual change to close icon appearance
Uses Button + leadingIcon (deprecated IconButton avoided)
Cascades to cloud-ui-main via @temporalio/ui tarball

Docs

No documentation changes required.

A11y-Audit-Ref: 2.5.8-toast-close-button

… px) The bare <button><Icon name="close" /></button> rendered at ~16×16 CSS px, below the WCAG 2.5.8 24×24 minimum. Switching to IconButton (h-9 w-9 = 36×36) satisfies the criterion and inherits Holocene focus-visible / hover / aria-label styling for free. The visible close icon is unchanged. A11y-Audit-Ref: 2.5.8-toast-close-button Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

vercel · 2026-06-11T18:46:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 24, 2026 5:54pm

…mponent on:click|stopPropagation cannot be used on Svelte components, only DOM elements. Move e.stopPropagation() into handleDismiss and use plain on:click on IconButton. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

…erate Adds the audit fix-doc manifest entry referenced by this PR's A11y-Audit-Ref trailer, so the triage workflow resolves the slug instead of labeling it a11y:broken-ref. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

ardiewen · 2026-06-19T18:46:16Z

@rosanusi I made some fixes, please double check the new storybook preview to validate:

Before this PR (button tap target is 16x16):

This PR before my fixes (button tap target is 36x36 and text color regression):

This PR after my fixes (button tap target is 24x24 and text color regression fixed):

IconButton is deprecated in favor of Button + leadingIcon. Inline the wrapper at the toast close-button call site and revert the size prop that was added to the deprecated icon-button.svelte. Renders at h-6 w-6 (24×24 CSS px), satisfying WCAG 2.5.8 Target Size Minimum. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

ardiewen · 2026-06-24T18:03:50Z

Final update: refactored to using Button component with leadingIcon prop since IconButton is deprecated.

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596)

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646)

Auto-generated version bump from 2.51.1 to 2.52.0 Bump type: minor Changes included: - [`9c6fcd54`](9c6fcd5) Add direct SSO redirect and backend logout (#3590) - [`feab0d90`](feab0d9) a11y(4.1.3): Toaster role="log" → per-toast role="status"/"alert" for correct AT announcement semantics (#3560) - [`d7bbfb01`](d7bbfb0) a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px) (#3553) - [`4efd6ab6`](4efd6ab) a11y(3.3.1): Holocene input primitives — add aria-invalid, aria-describedby, and uniform live-region error announcement (#3554) - [`0600b700`](0600b70) Use green only (#3599) - [`94107549`](9410754) Clarify activity pause timeout behavior (#3600) - [`9f88d5a8`](9f88d5a) Bump node version to 22.23.1 or newer to fix issue from previous security release (#3604) - [`ca4104ae`](ca4104a) Update reason copy and inputs (#3588) - [`51db73fa`](51db73f) Update batch operation reason input hint (#3605) - [`836d7c55`](836d7c5) a11y(2.4.3): route navigation — move focus to the main landmark on afterNavigate, not just scroll (#3538) - [`4ee95696`](4ee9569) Improve re-renders for large encoded event histories (#3592) - [`fa5e7aa1`](fa5e7aa) feature/schedules (#3603) - [`0d9467fd`](0d9467f) Default includeHeartbeatDetails and includeLastFailure to true for getActivityExecution and pollActivityExecution (#3521) - [`e5bc514e`](e5bc514) fix schedules: duplicate key (#3612) - [`f1eb489f`](f1eb489) Remove preview badge (#3581) - [`1e5173b4`](1e5173b) Add existing versions to worker create deployment version form (#3601) - [`a8552bae`](a8552ba) fix schedules -e.trim not a function (#3613) - [`0442f847`](0442f84) Fix width of ComputeBadge in VersionTableRow (#3615) - [`ddbeb54f`](ddbeb54) fix(cloud-nav): animate and stabilize side-nav collapse (#3606) - [`3cfc684b`](3cfc684) fix - schedules recent/upcoming runs - sort issue (#3616) - [`92b8875b`](92b8875) Move timestamp out of translate (#3617) - [`901258af`](901258a) Fix SAA and WF consistency (#3614) - [`99593d97`](99593d9) DT-4001 - standalone nexus operations (#3496) - [`f10d1bf1`](f10d1bf) Clamp codeblock to container width (#3621) - [`0a9d93ce`](0a9d93c) Remove unnecessary bottom-0 (#3623) - [`9dabb522`](9dabb52) chore(deps-dev): bump vite from 6.4.2 to 6.4.3 (#3610) - [`5c1854d3`](5c1854d) News Feed (#3596) - [`340da30f`](340da30) a11y(2.1.1): guard global r/R keydown so text inputs can receive the letter (#3589) - [`dd97a9d1`](dd97a9d) fix(markdown-editor): disable chromatic snapshot for preview story (#3631) - [`7db61ab9`](7db61ab) a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions (#3555) - [`d2111ecf`](d2111ec) a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner (#3561) - [`24eabaec`](24eabae) a11y(2.4.6): guard DrawerContent against empty <h2> when title is omitted (#3595) - [`3552e307`](3552e30) Fix CodeMirror Lezer dependency mismatch (#3632) - [`7ac37199`](7ac3719) Update defaults to match workflow defaults (#3634) - [`c1f02865`](c1f0286) Draft fix for link variant handling (#3620) - [`bbbf2b8c`](bbbf2b8) Add connection status and optional Latest Version column to deployments (DT-4174) (#3618) - [`76f266f4`](76f266f) DurationInput updates (#3633) - [`07da53c5`](07da53c) COM-191 - prefill CloudFormation template params in Launch Stack link (#3619) - [`90946e0b`](90946e0) Schedules - Timeout empty defaults (#3637) - [`97f9ad39`](97f9ad3) fix(cloud-nav): smooth label fade on side-nav collapse/expand (#3628) - [`a399ed35`](a399ed3) Improve Search Attribute deletion messaging (#3629) - [`ad976d94`](ad976d9) Pass through source prop for News Feed Widget (#3638) - [`6ef84fe3`](6ef84fe) Restrict select-all to exclude workflow status (#3639) - [`4c3729f8`](4c3729f) Reduce news feed markdown whitespace (#3642) - [`aa04a9b6`](aa04a9b) feat(nexus-operations): add loading state to standalone nexus operations list page header (#3643) - [`dce2f804`](dce2f80) chore: remove unused generate-holocene-props script (#3644) - [`760bc7bc`](760bc7b) Make megaphone icon bigger (#3645) - [`c047384a`](c047384) refactor(nexus): replace hand-rolled types with @temporalio/proto (#3646) Co-authored-by: rossedfort <[email protected]>

vercel Bot had a problem deploying to Preview June 11, 2026 18:47 Failure

github-actions Bot added a11y Accessibility audit PR a11y:broken-ref A11y-Audit-Ref slug not in manifest labels Jun 11, 2026

vercel Bot deployed to Preview June 11, 2026 19:08 View deployment

rosanusi marked this pull request as ready for review June 15, 2026 16:44

rosanusi requested a review from a team as a code owner June 15, 2026 16:44

github-actions Bot added a11y:bucket-3 Bucket 3: engineer required a11y:sc-2.5.8 and removed a11y:broken-ref A11y-Audit-Ref slug not in manifest labels Jun 16, 2026

vercel Bot deployed to Preview June 16, 2026 19:51 View deployment

fix: add small variant to IconButton + fix text color inheritance

dcf2d6b

vercel Bot deployed to Preview June 19, 2026 18:44 View deployment

ardiewen approved these changes Jun 19, 2026

View reviewed changes

vercel Bot deployed to Preview June 24, 2026 17:54 View deployment

ardiewen merged commit d7bbfb0 into main Jun 24, 2026
17 checks passed

ardiewen deleted the wcag/2.5.8-toast-close-button branch June 24, 2026 18:04

temporal-cicd Bot mentioned this pull request Jul 2, 2026

chore: bump version to 2.52.0 #3626

Closed

temporal-cicd Bot mentioned this pull request Jul 8, 2026

chore: bump version to 2.52.0 #3647

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px)#3553

a11y(2.5.8): toast — replace bare close button with IconButton (36×36 px)#3553
ardiewen merged 5 commits into
mainfrom
wcag/2.5.8-toast-close-button

rosanusi commented Jun 11, 2026 •

edited by ardiewen

Loading

Uh oh!

vercel Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

ardiewen commented Jun 19, 2026

Uh oh!

ardiewen commented Jun 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rosanusi commented Jun 11, 2026 • edited by ardiewen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Design

Testing

Checklist

Docs

Uh oh!

vercel Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ardiewen commented Jun 19, 2026

Uh oh!

ardiewen commented Jun 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rosanusi commented Jun 11, 2026 •

edited by ardiewen

Loading

vercel Bot commented Jun 11, 2026 •

edited

Loading