docs(dialog): add note about focus trapping (#7945)

Adds a note about the dialog's focus trapping behavior to the docs.

Fixes #7935.
This commit is contained in:
Kristiyan Kostadinov
2017-10-27 19:22:20 +02:00
committed by mmalerba
parent 305dccfd52
commit f6a9b1ade7
+10 -4
View File
@@ -1,9 +1,9 @@
The `MatDialog` service can be used to open modal dialogs with Material Design styling and
The `MatDialog` service can be used to open modal dialogs with Material Design styling and
animations.
<!-- example(dialog-overview) -->
A dialog is opened by calling the `open` method with a component to be loaded and an optional
A dialog is opened by calling the `open` method with a component to be loaded and an optional
config object. The `open` method will return an instance of `MatDialogRef`:
```ts
@@ -26,13 +26,13 @@ dialogRef.close('Pizza!');
Components created via `MatDialog` can _inject_ `MatDialogRef` and use it to close the dialog
in which they are contained. When closing, an optional result value can be provided. This result
value is forwarded as the result of the `afterClosed` promise.
value is forwarded as the result of the `afterClosed` promise.
```ts
@Component({/* ... */})
export class YourDialog {
constructor(public dialogRef: MatDialogRef<YourDialog>) { }
closeDialog() {
this.dialogRef.close('Pizza!');
}
@@ -135,6 +135,12 @@ The `aria-label`, `aria-labelledby`, and `aria-describedby` attributes can all b
dialog element via the `MatDialogConfig` as well. Each dialog should typically have a label
set via `aria-label` or `aria-labelledby`.
When a dialog is opened, it will move focus to the first focusable element that it can find. In
order to prevent users from tabbing into elements in the background, the Material dialog uses
a [focus trap](https://material.angular.io/cdk/a11y/overview#focustrap) to contain focus
within itself. Once a dialog is closed, it will return focus to the element that was focused
before the dialog was opened.
#### Focus management
By default, the first tabbable element within the dialog will receive focus upon open.