Skip to content

Commit e219c45

Browse files
committed
docs(material/slide-toggle): update changes from legacy
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.
1 parent 56f29dd commit e219c45

File tree

4 files changed

+11
-10
lines changed

4 files changed

+11
-10
lines changed

guides/v15-mdc-migration.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -483,10 +483,10 @@ DOM and CSS of the components, you may need to tweak some of your application's
483483
is the same width as the form-field
484484

485485
### Slide Toggle
486-
<!-- TODO(zarend): review -->
487486

488487
* To improve accessibility, the MDC-based version uses `<button role="switch">` to represent the
489-
toggle rather than `<input type="checkbox">`.
488+
toggle rather than `<input type="checkbox">`. Slide toggle will no longer respond to native form
489+
validation. Consider alternative approaches to form validation.
490490

491491
* The touch target is much larger and more accessible. Be sure to allow enough space in your
492492
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414

1515
<p>Example where the slide toggle is required inside of a form.</p>
1616

17-
<form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
17+
<form #form="ngForm" (ngSubmit)="onFormSubmit()">
1818

19-
<mat-slide-toggle name="slideToggle" required ngModel>
19+
<mat-slide-toggle name="slideToggle" ngModel="[(formToggle)]">
2020
Slide Toggle
2121
</mat-slide-toggle>
2222

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
1919
imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
2020
})
2121
export class SlideToggleDemo {
22-
firstToggle: boolean;
22+
firstToggle: boolean = false;
23+
formToggle: boolean = false;
2324

2425
onFormSubmit() {
25-
alert(`You submitted the form.`);
26+
alert(`You submitted the form. Value: ${this.formToggle}.`);
2627
}
2728
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ slide-toggles use the theme's accent color. This can be changed to `'primary'` o
2323

2424
### Accessibility
2525

26-
`MatSlideToggle` uses an internal `<input type="checkbox">` with `role="switch"` to provide an
27-
accessible experience. This internal checkbox receives focus and is automatically labelled by the
28-
text content of the `<mat-slide-toggle>` element. Avoid adding other interactive controls into the
29-
content of `<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
26+
`MatSlideToggle` uses an internal `<button role="switch">` to provide an accessible experience. This
27+
internal button receives focus and is automatically labelled by the text content of the
28+
`<mat-slide-toggle>` element. Avoid adding other interactive controls into the content of
29+
`<mat-slide-toggle>`, as this degrades the experience for users of assistive technology.
3030

3131
Always provide an accessible label via `aria-label` or `aria-labelledby` for toggles without
3232
descriptive text content. For dynamic labels, `MatSlideToggle` provides input properties for binding

0 commit comments

Comments
 (0)