diff --git a/src/components/checkbox/checkbox.template.tsx b/src/components/checkbox/checkbox.template.tsx index 8cfed4f8e0..343ed71e6f 100644 --- a/src/components/checkbox/checkbox.template.tsx +++ b/src/components/checkbox/checkbox.template.tsx @@ -33,7 +33,9 @@ export const CheckboxTemplate: FunctionalComponent = ( return [ , @@ -75,7 +77,9 @@ export const CheckboxTemplate: FunctionalComponent = ( disabled={props.disabled || props.readonly} required={props.required} onChange={props.onChange} - aria-controls={props.helperTextId} + aria-controls={ + props.helperText ? props.helperTextId : undefined + } aria-describedby={props.helperTextId} {...inputProps} /> diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx index baca61269a..350a604967 100644 --- a/src/components/slider/slider.tsx +++ b/src/components/slider/slider.tsx @@ -254,7 +254,10 @@ export class Slider { value={this.multiplyByFactor(this.value)} name="volume" aria-labelledby={this.labelId} - aria-controls={this.helperTextId} + aria-describedby={ + this.helperText ? this.helperTextId : undefined + } + aria-controls={this.helperText ? this.helperTextId : undefined} {...inputProps} /> ); diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index d03beb66ea..8d4cf189b8 100644 --- a/src/components/switch/switch.tsx +++ b/src/components/switch/switch.tsx @@ -145,7 +145,9 @@ export class Switch { return [ , @@ -166,7 +168,7 @@ export class Switch { aria-checked={this.value} disabled={this.disabled} onClick={this.handleClick} - aria-controls={this.helperTextId} + aria-controls={this.helperText ? this.helperTextId : undefined} >
diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx index d5bc9964d7..7cf8deb602 100644 --- a/src/components/text-editor/text-editor.tsx +++ b/src/components/text-editor/text-editor.tsx @@ -267,7 +267,9 @@ export class TextEditor implements FormComponent { ); @@ -284,7 +286,7 @@ export class TextEditor implements FormComponent { onMetadataChange={this.handleMetadataChange} customElements={this.customElements} value={this.value} - aria-controls={this.helperTextId} + aria-controls={this.helperText ? this.helperTextId : undefined} id={this.editorId} aria-disabled={this.disabled} aria-invalid={this.invalid}