diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md
index 095602ee0399e6..872413236b8062 100644
--- a/docs/pages/api/snackbar.md
+++ b/docs/pages/api/snackbar.md
@@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
|:-----|:-----|:--------|:------------|
| action | node | | The action to display. It renders after the message, at the end of the snackbar. |
| anchorOrigin | { horizontal: 'left' | 'center' | 'right', vertical: 'top' | 'bottom' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. |
-| autoHideDuration | number | | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
+| autoHideDuration | number | null | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
| children | element | | Replace the `SnackbarContent` component. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| ClickAwayListenerProps | object | | Props applied to the `ClickAwayListener` element. |
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
index 637aa8e099a932..02493c6e2954d8 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
@@ -64,10 +64,7 @@ export default function ConsecutiveSnackbars() {
autoHideDuration={6000}
onClose={handleClose}
onExited={handleExited}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={{messageInfo ? messageInfo.message : undefined} }
+ message={messageInfo ? messageInfo.message : undefined}
action={
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
index 383f3e98a9cba5..cb5989c0c01d93 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
@@ -76,10 +76,7 @@ export default function ConsecutiveSnackbars() {
autoHideDuration={6000}
onClose={handleClose}
onExited={handleExited}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={{messageInfo ? messageInfo.message : undefined} }
+ message={messageInfo ? messageInfo.message : undefined}
action={
diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.js b/docs/src/pages/components/snackbars/DirectionSnackbar.js
index 224fd3e078b0e7..8ab7521044e474 100644
--- a/docs/src/pages/components/snackbars/DirectionSnackbar.js
+++ b/docs/src/pages/components/snackbars/DirectionSnackbar.js
@@ -42,10 +42,7 @@ export default function DirectionSnackbar() {
open={open}
onClose={handleClose}
TransitionComponent={transition}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
index 5718a08c7ddd6f..d94b75acf8a030 100644
--- a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
@@ -45,10 +45,7 @@ export default function DirectionSnackbar() {
open={open}
onClose={handleClose}
TransitionComponent={transition}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
index bf85a1cfb61eed..0086764fc4391b 100644
--- a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
@@ -59,11 +59,8 @@ export default function FabIntegrationSnackbar() {
Archived}
+ autoHideDuration={6000}
+ message="Archived"
action={
Undo
diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
index cc128b7b610ae4..12a144613a8209 100644
--- a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
@@ -61,11 +61,8 @@ export default function FabIntegrationSnackbar() {
Archived}
+ autoHideDuration={6000}
+ message="Archived"
action={
Undo
diff --git a/docs/src/pages/components/snackbars/PositionedSnackbar.js b/docs/src/pages/components/snackbars/PositionedSnackbar.js
index c9f62c104fc083..8e41c53f9fcce7 100644
--- a/docs/src/pages/components/snackbars/PositionedSnackbar.js
+++ b/docs/src/pages/components/snackbars/PositionedSnackbar.js
@@ -36,10 +36,7 @@ export default function PositionedSnackbar() {
key={`${vertical},${horizontal}`}
open={open}
onClose={handleClose}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/PositionedSnackbar.tsx b/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
index b29f5b86ed312e..c57a1df6d02d16 100644
--- a/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
@@ -39,10 +39,7 @@ export default function PositionedSnackbar() {
key={`${vertical},${horizontal}`}
open={open}
onClose={handleClose}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js
index a696edfb083fdd..a4f5f1ff3aa7db 100644
--- a/docs/src/pages/components/snackbars/SimpleSnackbar.js
+++ b/docs/src/pages/components/snackbars/SimpleSnackbar.js
@@ -30,10 +30,7 @@ export default function SimpleSnackbar() {
open={open}
autoHideDuration={6000}
onClose={handleClose}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={Note archived }
+ message="Note archived"
action={
diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
index 8af26e04d7e1e6..e3a365d4e685dc 100644
--- a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
@@ -30,10 +30,7 @@ export default function SimpleSnackbar() {
open={open}
autoHideDuration={6000}
onClose={handleClose}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={Note archived }
+ message="Note archived"
action={
diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.js b/docs/src/pages/components/snackbars/TransitionsSnackbar.js
index c302782d6bffc9..cb366a58166538 100644
--- a/docs/src/pages/components/snackbars/TransitionsSnackbar.js
+++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.js
@@ -42,10 +42,7 @@ export default function TransitionsSnackbar() {
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
index b0eccfe76db659..3826a3b6bc7216 100644
--- a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
@@ -43,10 +43,7 @@ export default function TransitionsSnackbar() {
open={state.open}
onClose={handleClose}
TransitionComponent={state.Transition}
- ContentProps={{
- 'aria-describedby': 'message-id',
- }}
- message={I love snacks }
+ message="I love snacks"
/>
);
diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md
index 385e759a6dd3d1..01ad963b46d782 100644
--- a/docs/src/pages/components/snackbars/snackbars.md
+++ b/docs/src/pages/components/snackbars/snackbars.md
@@ -53,7 +53,7 @@ When multiple snackbar updates are necessary, they should appear one at a time.
Snackbars should appear above FABs (on mobile).
-{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}}
### Change Transition
@@ -86,27 +86,4 @@ It also enables you to **stack** them on top of one another (although this is di
(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)
-- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role.
-- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`.
-
-```jsx
-
-```
-
-```jsx
-Archived}
- action={
-
- Undo
-
- }
-/>
-```
+- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond.
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
index c2a20ec476137c..2b27d57d774089 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
@@ -46,10 +46,9 @@ function Snackbar(props) {
return (
- {message}
+ {message}
}
action={[
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index a5608e1cef252f..275be180eaa94e 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -99,7 +99,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
const {
action,
anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'center' },
- autoHideDuration,
+ autoHideDuration = null,
children,
classes,
className,
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index 5b8bd0bc522d45..91f6b2ee98f2dc 100644
--- a/packages/material-ui/test/typescript/components.spec.tsx
+++ b/packages/material-ui/test/typescript/components.spec.tsx
@@ -716,7 +716,7 @@ const SnackbarTest = () => (
horizontal: 'left',
}}
open={true}
- autoHideDuration={6e3}
+ autoHideDuration={6000}
onClose={e => log(e)}
ContentProps={
{