feat(material/slide-toggle): add aria-describedby input (#23104)

Similarly to other input-based components, these changes add an `aria-describedby` input to the slide toggle.

Fixes #23094.

Author: crisbeto

src/material-experimental/mdc-slide-toggle/slide-toggle.html

@@ -20,6 +20,7 @@
             [attr.aria-checked]="checked.toString()"
             [attr.aria-label]="ariaLabel"
             [attr.aria-labelledby]="ariaLabelledby"
+            [attr.aria-describedby]="ariaDescribedby"
             (change)="_onChangeEvent($event)"
             (click)="_onInputClick($event)">
       </div>

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -238,6 +238,18 @@ describe('MDC-based MatSlideToggle without forms', () => {
       expect(inputElement.hasAttribute('aria-labelledby')).toBeFalsy();
     });
 
+    it('should forward the aria-describedby attribute to the input', () => {
+      testComponent.slideAriaDescribedBy = 'some-element';
+      fixture.detectChanges();
+
+      expect(inputElement.getAttribute('aria-describedby')).toBe('some-element');
+
+      testComponent.slideAriaDescribedBy = null;
+      fixture.detectChanges();
+
+      expect(inputElement.hasAttribute('aria-describedby')).toBe(false);
+    });
+
     it('should set the `for` attribute to the id of the input element', () => {
       expect(labelElement.getAttribute('for')).toBeTruthy();
       expect(inputElement.getAttribute('id')).toBeTruthy();
@@ -810,6 +822,7 @@ describe('MDC-based MatSlideToggle with forms', () => {
                      [name]="slideName"
                      [aria-label]="slideLabel"
                      [aria-labelledby]="slideLabelledBy"
+                     [aria-describedby]="slideAriaDescribedBy"
                      [tabIndex]="slideTabindex"
                      [labelPosition]="labelPosition"
                      [disableRipple]="disableRipple"
@@ -830,6 +843,7 @@ class SlideToggleBasic {
   slideName: string | null;
   slideLabel: string | null;
   slideLabelledBy: string | null;
+  slideAriaDescribedBy: string | null;
   slideTabindex: number;
   lastEvent: MatSlideToggleChange;
   labelPosition: string;

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -148,6 +148,9 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   /** Used to set the aria-labelledby attribute on the underlying input element. */
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
 
+  /** Used to set the aria-describedby attribute on the underlying input element. */
+  @Input('aria-describedby') ariaDescribedby: string;
+
   /** Whether the slide-toggle is required. */
   @Input()
   get required(): boolean { return this._required; }

src/material/slide-toggle/slide-toggle.html

@@ -13,6 +13,7 @@
            [attr.aria-checked]="checked.toString()"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
+           [attr.aria-describedby]="ariaDescribedby"
            (change)="_onChangeEvent($event)"
            (click)="_onInputClick($event)">
 

src/material/slide-toggle/slide-toggle.spec.ts

@@ -252,6 +252,18 @@ describe('MatSlideToggle without forms', () => {
       expect(inputElement.hasAttribute('aria-labelledby')).toBeFalsy();
     });
 
+    it('should forward the aria-describedby attribute to the input', () => {
+      testComponent.slideAriaDescribedBy = 'some-element';
+      fixture.detectChanges();
+
+      expect(inputElement.getAttribute('aria-describedby')).toBe('some-element');
+
+      testComponent.slideAriaDescribedBy = null;
+      fixture.detectChanges();
+
+      expect(inputElement.hasAttribute('aria-describedby')).toBe(false);
+    });
+
     it('should set the `for` attribute to the id of the input element', () => {
       expect(labelElement.getAttribute('for')).toBeTruthy();
       expect(inputElement.getAttribute('id')).toBeTruthy();
@@ -886,6 +898,7 @@ describe('MatSlideToggle with forms', () => {
                      [name]="slideName"
                      [aria-label]="slideLabel"
                      [aria-labelledby]="slideLabelledBy"
+                     [aria-describedby]="slideAriaDescribedBy"
                      [tabIndex]="slideTabindex"
                      [labelPosition]="labelPosition"
                      [disableRipple]="disableRipple"
@@ -906,6 +919,7 @@ class SlideToggleBasic {
   slideName: string | null;
   slideLabel: string | null;
   slideLabelledBy: string | null;
+  slideAriaDescribedBy: string | null;
   slideTabindex: number;
   lastEvent: MatSlideToggleChange;
   labelPosition: string;

src/material/slide-toggle/slide-toggle.ts

@@ -127,6 +127,9 @@ export class MatSlideToggle extends _MatSlideToggleBase implements OnDestroy, Af
   /** Used to set the aria-labelledby attribute on the underlying input element. */
   @Input('aria-labelledby') ariaLabelledby: string | null = null;
 
+  /** Used to set the aria-describedby attribute on the underlying input element. */
+  @Input('aria-describedby') ariaDescribedby: string;
+
   /** Whether the slide-toggle is required. */
   @Input()
   get required(): boolean { return this._required; }

tools/public_api_guard/material/slide-toggle.d.ts

@@ -15,6 +15,7 @@ export declare class MatSlideToggle extends _MatSlideToggleBase implements OnDes
     _noopAnimations: boolean;
     _thumbBarEl: ElementRef;
     _thumbEl: ElementRef;
+    ariaDescribedby: string;
     ariaLabel: string | null;
     ariaLabelledby: string | null;
     readonly change: EventEmitter<MatSlideToggleChange>;
@@ -45,7 +46,7 @@ export declare class MatSlideToggle extends _MatSlideToggleBase implements OnDes
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_required: BooleanInput;
     static ngAcceptInputType_tabIndex: NumberInput;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "name": "name"; "id": "id"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "required": "required"; "checked": "checked"; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "name": "name"; "id": "id"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "required": "required"; "checked": "checked"; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, [null, null, null, { attribute: "tabindex"; }, null, { optional: true; }]>;
 }