1
- The ` MatDialog ` service can be used to open modal dialogs with Material Design styling and
1
+ The ` MatDialog ` service can be used to open modal dialogs with Material Design styling and
2
2
animations.
3
3
4
4
<!-- example(dialog-overview) -->
5
5
6
- A dialog is opened by calling the ` open ` method with a component to be loaded and an optional
6
+ A dialog is opened by calling the ` open ` method with a component to be loaded and an optional
7
7
config object. The ` open ` method will return an instance of ` MatDialogRef ` :
8
8
9
9
``` ts
@@ -26,13 +26,13 @@ dialogRef.close('Pizza!');
26
26
27
27
Components created via ` MatDialog ` can _ inject_ ` MatDialogRef ` and use it to close the dialog
28
28
in which they are contained. When closing, an optional result value can be provided. This result
29
- value is forwarded as the result of the ` afterClosed ` promise.
29
+ value is forwarded as the result of the ` afterClosed ` promise.
30
30
31
31
``` ts
32
32
@Component ({/* ... */ })
33
33
export class YourDialog {
34
34
constructor (public dialogRef : MatDialogRef <YourDialog >) { }
35
-
35
+
36
36
closeDialog() {
37
37
this .dialogRef .close (' Pizza!' );
38
38
}
@@ -135,6 +135,12 @@ The `aria-label`, `aria-labelledby`, and `aria-describedby` attributes can all b
135
135
dialog element via the ` MatDialogConfig ` as well. Each dialog should typically have a label
136
136
set via ` aria-label ` or ` aria-labelledby ` .
137
137
138
+ When a dialog is opened, it will move focus to the first focusable element that it can find. In
139
+ order to prevent users from tabbing into elements in the background, the Material dialog uses
140
+ a [ focus trap] ( https://material.angular.io/cdk/a11y/overview#focustrap ) to contain focus
141
+ within itself. Once a dialog is closed, it will return focus to the element that was focused
142
+ before the dialog was opened.
143
+
138
144
#### Focus management
139
145
By default, the first tabbable element within the dialog will receive focus upon open.
140
146
0 commit comments