fix(a11y): non-color signal for Label required indicator (WCAG 1.4.1)#3439
Merged
Conversation
…des (WCAG 1.4.1) Two SC 1.4.1 Use of Color fixes: - Label required-field indicator: replace the 6x6 red dot with a red asterisk (aria-hidden) so users with color-perception differences see a shape signal, not just a color signal. The programmatic required state continues to come from native HTML `required` on the input (which the 1.3.1 forwarders ensure). - Timeline graph nodes (workflow-row, history-graph-row-visual): add aria-label to the <g role="button"> wrapper so AT users hear the workflow id + status (or event type + classification) instead of bare "button". Removes the previous dependency on reaching the legend tooltip to decode color. New i18n keys: workflows.row-accessible-name, events.row-accessible-name. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Per the PR scope decision, keep this PR focused on the Label required-indicator fix only. The timeline graph status accessible- name fix (workflow-row.svelte, history-graph-row-visual.svelte, and the supporting i18n keys) will ship as its own separate PR so the two SC 1.4.1 defects can be reviewed independently. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
bilal-karim
changed the title
The previous text-interactive-error class was a no-op for text color (interactive-error is only registered under backgroundColor in the theme plugin, not textColor), so the asterisk inherited the default text color and rendered black/off-white instead of red. text-danger maps to --color-text-danger (red.700 light / red.400 dark) which is the proper red text token. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The parent <label> already provides text-sm and font-medium, so the span inherits both. Only text-danger is doing actual work; the size/weight/leading classes were redundant. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- font-mono: mono asterisks are larger and more geometrically centered than proportional ones, making them feel like a proper visual indicator rather than a tiny text-style superscript. - leading-none: tightens the span's line-box to the character. - translate-y-0.5: small downward nudge so the asterisk aligns with the label baseline rather than sitting above it. - -ml-1: reduces the gap to the preceding label text (8px -> 4px). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
5 tasks
github-actions
Bot
added
a11y
ardiewen
approved these changes
May 29, 2026
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.
Summary
Replaces the
Labelrequired-field indicator's 6×6 red dot with a red mono asterisk markedaria-hidden="true".{#if required} - <span class="h-1.5 w-1.5 rounded-full bg-interactive-error"></span> + <span + aria-hidden="true" + class="-ml-1 translate-y-0.5 font-mono leading-none text-danger">*</span + > {/if}The previous red dot was indistinguishable from a decorative spacer for users with deuteranopia, protanopia, or achromatopsia. The asterisk pairs the same red affordance with a distinct shape signal, satisfying WCAG technique G14 (using text and color).
Why these specific classes
text-danger— proper red text token (red.700light /red.400dark).text-interactive-errorfrom the audit's literal proposal turned out to be a no-op for text color (only registered underbackgroundColorin the theme plugin), so the asterisk rendered black until this was fixed.font-mono— mono asterisks are larger and more geometrically centered than proportional ones, so the indicator reads as a proper visual symbol rather than a tiny text-style superscript.leading-none— tightens the span's line-box to the character so the parent's flexitems-centerhas a tight box to center against.translate-y-0.5— small downward nudge (2px) so the asterisk visually aligns with the label baseline rather than sitting above it.-ml-1— reduces the gap to the preceding label text from 8px to 4px so the asterisk reads as part of the label, not a separate element.Accessible required-state announcement is unchanged — it comes from the native HTML
requiredattribute (which PR #3432 ensured is forwarded on every input primitive). The visual asterisk isaria-hiddento prevent double-announcement ("Email, asterisk, required, edit text").Audit context
audit-output/issues/1.4.1-label-required-indicator.md.Test plan
requiredattribute) and the asterisk is not announced separately.🤖 Generated with Claude Code
A11y-Audit-Ref: 1.4.1-label-required-indicator