fix(checkbox): suppress label warning when aria-label or aria-labelledby is set#1333
Conversation
…dby is set LabelMixin now checks for aria-label and aria-labelledby before warning about a missing label attribute, since both provide valid accessible names for screen readers without requiring a visible label. Closes #1332 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1333.westeurope.azurestaticapps.net |
There was a problem hiding this comment.
Pull request overview
Updates the shared LabelMixin warning logic and adds checkbox tests to avoid console warnings when consumers provide ARIA labeling instead of the label property.
Changes:
- Update
LabelMixinto skip the “needs alabel” warning ifaria-labeloraria-labelledbyis present on the host element. - Add
uui-checkboxtests covering warning behavior for: no label,label,aria-label, andaria-labelledby.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/uui-base/lib/mixins/LabelMixin.ts | Changes the missing-label warning condition to consider host aria-label / aria-labelledby. |
| packages/uui-checkbox/lib/uui-checkbox.test.ts | Adds tests validating when the label warning is (not) emitted. |
…l input When a host aria-label or aria-labelledby is set (and no label property), forward the value to the internal #input so screen readers pick it up. Also tighten the console.warn spy in tests to only catch label-specific warnings, and add assertions that #input receives the correct attributes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1333.westeurope.azurestaticapps.net |
…ply consistently - LabelMixin now uses a MutationObserver to watch for aria-label and aria-labelledby changes on the host and triggers re-render, so dynamic updates (e.g. localization) are forwarded correctly to internal elements - aria-label on the host now wins over the label property for the accessible name on all internal native elements (aria-label is the explicit override) - Applied to boolean-input, uui-input, uui-button, and uui-color-slider Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1333.westeurope.azurestaticapps.net |
Consistent with boolean-input and uui-input — all four components now forward both aria-label and aria-labelledby from host to inner element. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1333.westeurope.azurestaticapps.net |
Summary
Fixes a false-positive console warning in
LabelMixinwhenaria-labeloraria-labelledbyis set on a component but nolabelproperty is provided — a perfectly valid accessibility pattern (e.g. icon-only buttons, row-selection checkboxes, search inputs without visible labels).Changes:
LabelMixin— warning only fires when none oflabel,aria-label, oraria-labelledbyare presentLabelMixin—MutationObserveradded so dynamic changes to hostaria-label/aria-labelledby(e.g. localization updates) trigger a re-render and stay in syncaria-*attributes to their internal native element, witharia-labeltaking priority overlabelfor the accessible name:aria-labelaria-labelledbyuui-boolean-input(checkbox, toggle)<input type="checkbox">uui-input<input>uui-button<button>/<a>uui-color-sliderAccessible name priority:
aria-labelon host →labelproperty → none (warning)Test plan
uui-checkboxcovering all four cases: no label (warns),labelset,aria-labelset,aria-labelledbyset#inputreceives the correctaria-label/aria-labelledbyattribute valuesCloses #1332
🤖 Generated with Claude Code