a11y(4.1.2): add label prop to Button primitive and enforce accessible names#3556
Merged
Conversation
…cessible names Adds a `label` prop to the Button/anchor primitive that renders as `aria-label`, plus a dev-time `onMount` check that warns (prod) or throws (dev) when a button is rendered without any accessible name. Updates seven consumer call-sites and adds the `configure-columns` i18n key. A11y-Audit-Ref: 4.1.2-button-anchor-empty Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
rosanusi
marked this pull request as ready for review
June 12, 2026 14:26
…orcement
Reworks the approach based on review:
- button.svelte: remove the `label` prop and the onMount accessible-name
throw. `aria-label` is already a typed attribute (Button's props intersect
HTMLButtonAttributes/HTMLAnchorAttributes), so call sites set it directly —
no redundant, ambiguously-named prop. Dropping the throw avoids crashing dev
on any unlabeled Button (the check also wrongly treated a decorative
leadingIcon as a name, so it both missed real violations and threw on
equivalent ones).
- Convert the 7 call sites from label={…} to aria-label={…}.
- Add aria-label to two icon-only buttons the original PR missed (same defect):
activities-summary configure-columns and workflow-current-details refresh.
Automated enforcement will move to the existing axe accessibility suite once it
is repaired and gated in CI (tracked as a follow-up).
Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Contributor
|
Pushed a revision reworking the approach based on review:
On enforcement: the repo already has an axe suite ( |
…hor-empty-review # Conflicts: # src/lib/i18n/locales/en/common.ts # src/lib/pages/schedule-view.svelte
ardiewen
approved these changes
Jul 10, 2026
ardiewen
added a commit
that referenced
this pull request
Jul 13, 2026
Follows the reinforcement guidance from #3556: bespoke onMount accessible-name checks are removed in favor of the axe suite (DT-4255), which computes the real accessible name. The dev throw also broke Storybook/tests and could crash consumer dev environments. Revert `label` to optional (`label?: string`, default '') so this is not a breaking change for downstream consumers — cloud-ui has ~74 CodeBlock usages, none passing `label`, which a required prop would break on tarball repack. The ui-side labels remain; axe enforces names. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
ardiewen
added a commit
that referenced
this pull request
Jul 13, 2026
Follows the reinforcement guidance from #3556: bespoke onMount accessible-name checks are removed in favor of the axe suite (DT-4255), which computes the real accessible name. The dev throw also broke Storybook/tests and could crash consumer dev environments. Revert `label` to optional (`label?: string`, default '') so this is not a breaking change for downstream consumers — cloud-ui has ~74 CodeBlock usages, none passing `label`, which a required prop would break on tarball repack. The ui-side labels remain; axe enforces names. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Merged
6 tasks
ardiewen
added a commit
that referenced
this pull request
Jul 13, 2026
…for read-only mode (#3557) * [a11y] WCAG 4.1.2 — require label on CodeBlock; add aria-readonly for read-only mode Makes the `label` prop required on the CodeBlock primitive so every CodeMirror instance gets an accessible name via `aria-label` on the `.cm-content` element. Adds `aria-readonly="true"` when `editable=false` so AT correctly conveys non-editability (JAWS forms-mode fix). Adds a dev-time `onMount` guard that throws if label is empty after mount. Migrates all ~28 affected files: primitive, 4 domain wrappers (PayloadCodeBlock, PayloadInput, InputAndResultsPayload, PayloadInputWithEncoding), and ~22 direct consumers across Workflow History, Queries, Schedules, Activities, Events, Workers, and Archival. Also fixes the PayloadInput orphaned <Label for> association (§NEW1): replaces <Label for={id}> with <span> and forwards label to the inner CodeBlock so the accessible name is set on the cm-content element rather than a wrapper div that for= can't reach. New i18n keys: common.json, events.import-format-{1,2}, standalone-activities.{activity-input,activity-outcome,cluster-config, namespace-config}, workers.{heartbeat-config,setup-guide-command}, workflows.{query-result,callback-metadata,update-input,update-result}. A11y-Audit-Ref: 4.1.2-codemirror-no-name Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * [a11y] Add missing label to CodeBlock stories and compute-fields code-block.stories.svelte: add label to "With Header" and "Test page scrolling" stories which were missing the now-required prop. compute-fields.svelte: add label to the Terraform IAM template CodeBlock added in the serverless worker form refactor (landed in main after the original PR was cut). Co-Authored-By: Claude Sonnet 4.6 <[email protected]> * a11y: drop CodeBlock runtime label check; keep label optional Follows the reinforcement guidance from #3556: bespoke onMount accessible-name checks are removed in favor of the axe suite (DT-4255), which computes the real accessible name. The dev throw also broke Storybook/tests and could crash consumer dev environments. Revert `label` to optional (`label?: string`, default '') so this is not a breaking change for downstream consumers — cloud-ui has ~74 CodeBlock usages, none passing `label`, which a required prop would break on tarball repack. The ui-side labels remain; axe enforces names. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> * a11y(4.1.2): make read-only CodeBlock focusable so its name is announced Read-only CodeMirror sets .cm-content to contenteditable="false" with no tabindex, so the element is not focusable — the aria-label/aria-readonly land in the AX tree but no keyboard/SR user can reach the region, and it is never announced (only the copy button was focusable). Add tabindex="0" to the read-only contentAttributes so the named, read-only textbox is reachable and announced ("Input, read only"). Verified in-browser: focusable + named. Note: an accessible-name axe check passes without this, since it does not test reachability. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]> --------- Co-authored-by: Claude Sonnet 4.6 <[email protected]> Co-authored-by: Ardie Wen <[email protected]>
rossedfort
added a commit
that referenced
this pull request
Jul 13, 2026
Auto-generated version bump from 2.52.0 to 2.52.1 Bump type: patch Changes included: - [`3be0df00`](3be0df0) fix(schedules): default absent second/minute/hour to 0 when editing (#3653) - [`508b65b7`](508b65b) fix(schedules): default emptied second/minute/hour to 0 on submit (#3655) - [`1f0e149c`](1f0e149) fix(workers): reject $LATEST qualifier in Lambda ARN validation (#3657) - [`b42b0776`](b42b077) a11y(2.4.3): inert-based focus containment + restore; drop trap from native dialogs (#3598) - [`cc491a29`](cc491a2) a11y(2.4.3): keep toast live region announcing during a focus trap [DT-4252] (#3654) - [`ddc7f8e2`](ddc7f8e) a11y(2.4.11): add scroll-padding so sticky overlays don't obscure focused elements (#3532) - [`b7e3a472`](b7e3a47) FilterBar icon update (#3660) - [`09318ec6`](09318ec) Add danger PR comment for api version bump (#3662) - [`273cc4be`](273cc4b) a11y(4.1.2): add label prop to Button primitive and enforce accessible names (#3556) - [`4507115f`](4507115) Use an editable combobox for the Cloud Run region field (DT-4232) (#3636) - [`694a7471`](694a747) a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive (#3607) - [`8b384a40`](8b384a4) a11y(4.1.2): fix nested interactive elements in Copyable component (#3558) - [`1bfd2750`](1bfd275) fix describe SANO API requests to include runId parameter (#3661) - [`ba18b43e`](ba18b43) a11y(4.1.2): require label on CodeBlock primitive; add aria-readonly for read-only mode (#3557) - [`6e2290f1`](6e2290f) feat(deployments): make compute provider picker configurable (#3659) - [`4470b76a`](4470b76) fix(workers): persist WDV compute-config edits via update mask; revert $LATEST validation (#3658) - [`17fd591b`](17fd591) fix(nexus-operations): make start standalone nexus operation timeouts optional (#3656) Co-authored-by: rossedfort <[email protected]>
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
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
label?: stringprop toBasePropsin the Button primitive (src/lib/holocene/button.svelte) rendered asaria-labelon both the<a>anchor branch and<button>branchonMountcheck that throws (dev) orconsole.errors (prod) when a button is rendered without any accessible name (nolabel,aria-label,aria-labelledby,title, slot text, leading/trailing icon, or count badge)configure-columnsi18n key tosrc/lib/i18n/locales/en/common.tsAffected files
src/lib/holocene/button.sveltesrc/lib/i18n/locales/en/common.tssrc/lib/components/workflow/start-workflow-button.sveltesrc/lib/components/standalone-activities/start-activity-button.sveltesrc/lib/components/workflow/workflows-summary-configurable-table.sveltesrc/lib/pages/schedule-view.sveltesrc/lib/pages/schedules.svelteTest plan
<Button>with no name source — confirm it throws; addlabel="…"— confirm no throw<Button href="…">with no name source — confirm same enforcement fires<Button count={3}>— confirm enforcement does not fire (count provides a numeric name)pnpm checkpasses (no new type errors beyond pre-existing$$_$$slot interop errors on main)A11y-Audit-Ref: 4.1.2-button-anchor-empty
🤖 Generated with Claude Code