a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area#3545
Merged
Conversation
When labelHidden=true the Label's visible width collapses to ~16 px (the surrogate width), giving a ~16×18 px hit area below the WCAG 2.5.8 24×24 minimum. Adding min-h-6 / min-w-6 (24 px each) to the Label class ensures the clickable region is at least 24×24 regardless of slot content. With a visible label the Label still expands with its text content as before. A11y-Audit-Ref: 2.5.8-labelhidden-checkbox 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
Contributor
|
rosanusi
marked this pull request as ready for review
June 15, 2026 16:44
…erious 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]>
github-actions
Bot
added
a11y:bucket-1
Contributor
|
@rosanusi you may want to examine this one too: Example 1: Example 2: It appears the checkbox is left aligned inside of its tap target ("label"). |
…n-checkbox # Conflicts: # scripts/a11y/manifest.yml
With min-w-6, a labelHidden checkbox's <label> collapses to 24px wide while the visible 18px surrogate sat flush-left (6px of dead space on the right). Add justify-center only when labelHidden so the surrogate is centered in the hit area (3px on all sides). Visible-label checkboxes are unaffected — the surrogate stays left, next to its text. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
ardiewen
approved these changes
Jun 17, 2026
This was referenced Jun 22, 2026
laurakwhit
added a commit
that referenced
this pull request
Jun 23, 2026
Auto-generated version bump from 2.51.0 to 2.51.1 Specific version: 2.51.1 Changes included: - [`c848ec54`](c848ec5) fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) (#3443) - [`af6b12a9`](af6b12a) fix(deployments): align version/status/compute badges in worker deployments table (#3489) - [`df86587c`](df86587) Add SDK version to standalone activity details (#3447) - [`59695290`](5969529) Use shared FilterBar component for workflows (#3448) - [`ded94469`](ded9446) Set display contents in wrapper div if no afterLabel in Input component (#3513) - [`d7e5eb43`](d7e5eb4) fix(standalone-activities): decode failure encodedAttributes in activity detail (#3507) - [`81a255a9`](81a255a) fix(DT-4151): fix bottom nav scrollability and double-menu on mobile (#3514) - [`368f646e`](368f646) Fix exports to work properly with vite8 (#3519) - [`231bdaff`](231bdaf) chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 (#3509) - [`1de44ea6`](1de44ea) fix(workers): soften no-workers-polling alert for serverless worker deployments (#3524) - [`689955a8`](689955a) fix(DT-4080): surface error when validate connection has no compute config, warn on set current (#3516) - [`93323db9`](93323db) feat(DT-4078): Add Set Ramping Version to Worker Deployment Versions (#3508) - [`9d3450c0`](9d3450c) fix(DT-4081): surface task queue not registered error in validate connection modal (#3517) - [`b7f56237`](b7f5623) feat(DT-4079): miscellaneous WD UI fixes (#3511) - [`83b2d4ec`](83b2d4e) feat(deployments): simplify create worker deployment UX (#3518) - [`ccb4cb73`](ccb4cb7) Standalone Activity write guards (#3534) - [`ab20ef03`](ab20ef0) Worker insights UI updates (#3520) - [`aaf63bdc`](aaf63bd) [wcag] Replace text-[12px] with text-xs in DatePicker action buttons (SC 1.4.4) (#3525) - [`743be902`](743be90) a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar (#3527) - [`41b73e87`](41b73e8) a11y(2.4.2): ui-main — set distinct, descriptive titles on login/signin, task-queues list, and activity-workers sub-tab (#3535) - [`3d64cdbf`](3d64cdb) [WCAG 2.4.3] group-details-row — remove redundant outer focus stop on <g> wrapper (#3537) - [`883e5db1`](883e5db) a11y(2.4.6): datepicker — replace empty label with translate('common.start') (#3543) - [`9da915e2`](9da915e) a11y(2.4.5): import history — add back-link to Import landing page (#3542) - [`ca4c1d61`](ca4c1d6) Cache new Intl.DateTimeFormat (#3565) - [`38376e4d`](38376e4) Fix required activity timeout inputs on Start a Standalone Activity form (#3567) - [`49d7c9e4`](49d7c9e) Use separate copy for title vs menu item (#3568) - [`3c7dcdc3`](3c7dcdc) a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px (#3547) - [`b5171825`](b517182) a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum (#3544) - [`1fea5d5c`](1fea5d5) a11y(2.1.1): fake-button widgets — replace deprecated onkeypress with onkeydown handling Enter and Space (#3528) - [`5bf09000`](5bf0900) a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip (#3529) - [`deed43f0`](deed43f) a11y(2.1.1): event summary row — add keyboard-accessible expand control alongside the mouse-only <tr onclick> (#3526) - [`d401123e`](d401123) a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area (#3545) - [`aef4166f`](aef4166) [a11y] Expose toggled state via aria-pressed on ToggleButton (#3559) - [`797f8831`](797f883) Show single attempt in Standalone Activity details (#3572) - [`893bc58c`](893bc58) feat(DT-4183): Add Tabs (Primitive) (#3574) - [`323c1993`](323c199) Date picker input field bug/kt (#3522) - [`3ac34ce2`](3ac34ce) Various serverless UI updates (#3573) - [`f365416a`](f365416) a11y(2.1.1): ZoomSvg — add keyboard pan/zoom controls so the workflow family tree is operable without a mouse (#3530) - [`feb6897e`](feb6897) Fix gaps in slot cards on worker details page (#3580) - [`b3c80072`](b3c8007) Remove font weight on cache size (#3583) - [`0e7337ea`](0e7337e) Bump API to v1.62.14 (#3575) Co-authored-by: laurakwhit <[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
2 participants
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.
Description
When
labelHidden={true}the<Checkbox>Label's visible width collapses to ~16 px (the surrogateh-4 w-4box), giving a clickable region of ~16×18 CSS px — below the WCAG 2.5.8 (Target Size Minimum, Level AA) 24×24 requirement.Fix: add
min-h-6andmin-w-6(min-height: 24px; min-width: 24px) to the Label's class array incheckbox.svelte. This ensures the<label>element — which is the actual click target wrapping thesr-onlynative input — is at least 24×24 for all consumers. With a visible label the Label continues to grow with its text content as before; only the floor changes.The alternative of enlarging the visual surrogate from
h-4 w-4toh-6 w-6was not chosen — it would change the checkbox's appearance across every consumer and require updating the inner icon positioning.Changed file:
src/lib/holocene/checkbox.svelte— 2 lines added to the Label class array.This fix cascades to all Checkbox consumers in both
ui-mainandcloud-ui-main(via the@temporalio/uitarball).Screenshots
No visual change for
labelHidden=false(label text keeps the Label wider than 24 px). ForlabelHidden=truethe invisible click region grows from ~16×18 to 24×24 around the same 16×16 visual surrogate.Design
No design changes. The 24-px floor is transparent to sighted users; the 16×16 checkbox appearance is unchanged.
Testing
<Checkbox labelHidden>consumer (e.g. row-select checkboxes on the workflows list).<label>element:getBoundingClientRect()returnsheight ≥ 24andwidth ≥ 24.labelHiddencheckbox: focus-visible ring appears on the visual surrogate.labelHidden=falseconsumer (e.g. namespace settings auth form): checkbox rows visually unchanged.labelHiddencheckboxes.labelHiddenand default variants.Checklist
@temporalio/uitarballDocs
No documentation changes required.
A11y-Audit-Ref: 2.5.8-labelhidden-checkbox
Correction (post-review)
Measured the actual
<label>(the click target) before/after; the "no visual change" statements above need amending:labelHidden.min-h-6raises the height floor to 24px, but the<label>is naturally only ~18px tall (leading-[18px]+ the 16px surrogate + its 1px border = 18×18). So visible-label checkboxes go 153×18 → 153×24 as well; thelabelHidden=falserow is not unchanged.h-4 w-4(16px) plusborderwithbox-content. The glyph itself is unchanged.min-w-6, alabelHiddenlabel is 24px wide and the 18px surrogate was flush-left (6px of dead space). Addedjustify-centeronly whenlabelHidden, so the checkbox is centered in the 24×24 target (3px all sides). Visible-label checkboxes keep the surrogate left, next to the text.Decision (with reviewer): keep the 24px floor on all checkboxes — it guarantees a 24px-tall target everywhere for 2.5.8; the ~6px height growth on labelled rows is accepted.
Also merged latest
main(resolved ascripts/a11y/manifest.ymlappend conflict with #3544).