Skip to content

Commit 73ed3cb

Browse files
authored
fix: sd-radio-group aria-describedby not exposing error messages to screen readers (#2985)
<!-- ## Title: Please consider adding the [skip chromatic] flag to the PR title in case you dont need chromatic testing your changes. --> ## Description: <!-- *PR notes: Please describe the changes in this PR.* --> Closes #1648 ## Definition of Reviewable: <!-- *PR notes: Irrelevant elements should be removed.* --> <!-- *PR notes: If this PR includes a BREAKING CHANGE, a migration guide is needed to explain how users can migrate between versions. * --> <!-- *If this PR includes a bug fix, an E2E test is necessary to verify the change. If the fix is purely visual, ensuring it is captured within our chromatic screenshot tests is sufficient.* --> - [x] Stories (features, a11y) are created/updated - [x] relevant tickets are linked
1 parent 5367c02 commit 73ed3cb

2 files changed

Lines changed: 21 additions & 0 deletions

File tree

.changeset/violet-streets-stick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@solid-design-system/components': patch
3+
---
4+
5+
Fixed `sd-radio-group` error messages so they are announced by screen readers.

packages/components/src/components/radio-group/radio-group.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,22 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
140140
this.formControlController.updateValidity();
141141
}
142142

143+
updated(changedProperties: Map<string, unknown>) {
144+
super.updated(changedProperties);
145+
this.syncAriaDescription();
146+
}
147+
148+
// Set aria-description imperatively as a VoiceOver workaround here so static a11y linters do not reject role="radiogroup".
149+
private syncAriaDescription() {
150+
const fieldset = this.shadowRoot?.querySelector('fieldset');
151+
const message = this.showInvalidStyle ? this.validationMessage : '';
152+
if (message) {
153+
fieldset?.setAttribute('aria-description', message);
154+
} else {
155+
fieldset?.removeAttribute('aria-description');
156+
}
157+
}
158+
143159
private getAllRadios() {
144160
const radios = [...this.querySelectorAll<SdRadio | SdRadioButton>('sd-radio, sd-radio-button')];
145161

0 commit comments

Comments
 (0)