docs(material/slide-toggle): update changes from legacy (#25825)

Update migration guide for MDC Slide Toggle to give more detail on form
validation. Remove form validation from slide-toggle example as it does
not seem to be appropriate for switch role. Update slide toggle overview
documentation to reflect changes for the MDC-based slide toggle.

(cherry picked from commit 7456712)

Author: zarend

guides/v15-mdc-migration.md

@@ -484,10 +484,10 @@ DOM and CSS of the components, you may need to tweak some of your application's
   is the same width as the form-field
 
 ### Slide Toggle
-<!-- TODO(zarend): review -->
 
 * To improve accessibility, the MDC-based version uses `<button role="switch">` to represent the
-  toggle rather than `<input type="checkbox">`.
+  toggle rather than `<input type="checkbox">`. Slide toggle will no longer respond to native form
+  validation. Consider alternative approaches to form validation.
 
 * The touch target is much larger and more accessible. Be sure to allow enough space in your
   layout so that the touch target does not overlap other components. If you are not concerned with

src/dev-app/slide-toggle/slide-toggle-demo.html

@@ -14,9 +14,9 @@
 
   <p>Example where the slide toggle is required inside of a form.</p>
 
-  <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
+  <form #form="ngForm" (ngSubmit)="onFormSubmit()">
 
-    <mat-slide-toggle name="slideToggle" required ngModel>
+    <mat-slide-toggle name="slideToggle" [(ngModel)]="formToggle">
       Slide Toggle
     </mat-slide-toggle>
 

src/dev-app/slide-toggle/slide-toggle-demo.ts

@@ -19,9 +19,10 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
   imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
 })
 export class SlideToggleDemo {
-  firstToggle: boolean;
+  firstToggle: boolean = false;
+  formToggle: boolean = false;
 
   onFormSubmit() {
-    alert(`You submitted the form.`);
+    alert(`You submitted the form. Value: ${this.formToggle}.`);
   }
 }

src/material/slide-toggle/slide-toggle.md

@@ -23,10 +23,10 @@ slide-toggles use the theme's accent color. This can be changed to `'primary'` o
 
 ### Accessibility
 
-`MatSlideToggle` uses an internal `<input type="checkbox">` with `role="switch"` to provide an
-accessible experience. This internal checkbox receives focus and is automatically labelled by the
-text content of the `<mat-slide-toggle>` element. Avoid adding other interactive controls into the
-content of `<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
+`MatSlideToggle` uses an internal `<button role="switch">` to provide an accessible experience. This
+internal button receives focus and is automatically labelled by the text content of the
+`<mat-slide-toggle>` element. Avoid adding other interactive controls into the content of
+`<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
 
 Always provide an accessible label via `aria-label` or `aria-labelledby` for toggles without
 descriptive text content. For dynamic labels, `MatSlideToggle` provides input properties for binding