Skip to content

Commit 33d212b

Browse files
annieywwagnermaciel
authored andcommitted
docs(material/snack-bar): clarify dismissal actions in snackbar and update examples (#22500)
(cherry picked from commit 16d57ae)
1 parent 6b07acb commit 33d212b

File tree

3 files changed

+7
-12
lines changed

3 files changed

+7
-12
lines changed

src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ export class SnackBarOverviewExample {
1313
constructor(private _snackBar: MatSnackBar) {}
1414

1515
openSnackBar(message: string, action: string) {
16-
this._snackBar.open(message, action, {
17-
duration: 2000,
18-
});
16+
this._snackBar.open(message, action);
1917
}
2018
}

src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ export class SnackBarPositionExample {
2020
constructor(private _snackBar: MatSnackBar) {}
2121

2222
openSnackBar() {
23-
this._snackBar.open('Cannonball!!', 'End now', {
24-
duration: 500,
23+
this._snackBar.open('Cannonball!!', 'Splash', {
2524
horizontalPosition: this.horizontalPosition,
2625
verticalPosition: this.verticalPosition,
2726
});

src/material/snack-bar/snack-bar.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,14 @@ Snack-bar messages are announced via an `aria-live` region. By default, the `pol
9090
used. While `polite` is recommended, this can be customized by setting the `politeness` property of
9191
the `MatSnackBarConfig`.
9292

93-
Focus is not, and should not be, moved to the snack-bar element. Moving the focus would be
94-
disruptive to a user in the middle of a workflow. It is recommended that, for any action offered
95-
in the snack-bar, the application offers the user an alternative way to perform the action.
93+
Focus is not moved to the snack-bar element as that would be disruptive to a user in the middle of a workflow.
94+
It is recommended that, for any action offered in the snack-bar, the application offers the user an
95+
alternative way to perform the action.
9696
Alternative interactions are typically keyboard shortcuts or menu options. When the action is
97-
performed in this way, the snack-bar should be dismissed.
97+
performed in this way, the snack-bar should be dismissed. A snack-bar can contain a single action.
98+
"Dismiss" or "cancel" actions are optional.
9899

99100
Snack-bars that have an action available should not be given a `duration`, as to accommodate
100101
screen-reader users that want to navigate to the snack-bar element to activate the action. If the
101102
user has manually moved their focus within the snackbar, focus should be placed somewhere sensible
102103
based on the application context when the snack-bar is dismissed.
103-
104-
Don't use "Dismiss" as a snack-bar-action, instead preferring to use a `duration` when there is
105-
no additional action associated with the notification.

0 commit comments

Comments
 (0)