From d960cb91cbe59907f0a6df37e705f9d9418824aa Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 30 Dec 2019 11:17:06 +0100
Subject: [PATCH] move snackbar changes to another pull request

---
 docs/pages/api/snackbar.md                    |  2 +-
 .../snackbars/ConsecutiveSnackbars.js         |  5 ++++-
 .../snackbars/ConsecutiveSnackbars.tsx        |  5 ++++-
 .../components/snackbars/DirectionSnackbar.js |  5 ++++-
 .../snackbars/DirectionSnackbar.tsx           |  5 ++++-
 .../snackbars/FabIntegrationSnackbar.js       |  7 +++++--
 .../snackbars/FabIntegrationSnackbar.tsx      |  7 +++++--
 .../snackbars/PositionedSnackbar.js           |  5 ++++-
 .../snackbars/PositionedSnackbar.tsx          |  5 ++++-
 .../components/snackbars/SimpleSnackbar.js    |  5 ++++-
 .../components/snackbars/SimpleSnackbar.tsx   |  5 ++++-
 .../snackbars/TransitionsSnackbar.js          |  5 ++++-
 .../snackbars/TransitionsSnackbar.tsx         |  5 ++++-
 .../pages/components/snackbars/snackbars.md   | 21 ++++++++++++-------
 .../onepirate/modules/components/Snackbar.js  |  5 +++--
 packages/material-ui/src/Snackbar/Snackbar.js |  2 +-
 .../test/typescript/components.spec.tsx       |  2 +-
 17 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md
index 3ecebff33c2c56..4384127502c3da 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
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">action</span> | <span class="prop-type">node</span> |  | The action to display. |
 | <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'left'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'right', vertical: 'top'<br>&#124;&nbsp;'bottom' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'center' }</span> | The anchor of the `Snackbar`. |
-| <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number</span> | <span class="prop-default">null</span> | 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. |
+| <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number</span> |  | 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. |
 | <span class="prop-name">children</span> | <span class="prop-type">element</span> |  | Replace the `SnackbarContent` component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">ClickAwayListenerProps</span> | <span class="prop-type">object</span> |  | 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 d31b40acad3da1..eee3ff37af5a6d 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js
@@ -64,7 +64,10 @@ export default function ConsecutiveSnackbars() {
         autoHideDuration={6000}
         onClose={handleClose}
         onExited={handleExited}
-        message={messageInfo ? messageInfo.message : undefined}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">{messageInfo ? messageInfo.message : undefined}</span>}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO
diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
index 58d580854c8b1e..97cf86b17577e8 100644
--- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
+++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx
@@ -76,7 +76,10 @@ export default function ConsecutiveSnackbars() {
         autoHideDuration={6000}
         onClose={handleClose}
         onExited={handleExited}
-        message={messageInfo ? messageInfo.message : undefined}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">{messageInfo ? messageInfo.message : undefined}</span>}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO
diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.js b/docs/src/pages/components/snackbars/DirectionSnackbar.js
index 8ab7521044e474..224fd3e078b0e7 100644
--- a/docs/src/pages/components/snackbars/DirectionSnackbar.js
+++ b/docs/src/pages/components/snackbars/DirectionSnackbar.js
@@ -42,7 +42,10 @@ export default function DirectionSnackbar() {
         open={open}
         onClose={handleClose}
         TransitionComponent={transition}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
index d94b75acf8a030..5718a08c7ddd6f 100644
--- a/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/DirectionSnackbar.tsx
@@ -45,7 +45,10 @@ export default function DirectionSnackbar() {
         open={open}
         onClose={handleClose}
         TransitionComponent={transition}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
index 0086764fc4391b..bf85a1cfb61eed 100644
--- a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.js
@@ -59,8 +59,11 @@ export default function FabIntegrationSnackbar() {
         </Fab>
         <Snackbar
           open
-          autoHideDuration={6000}
-          message="Archived"
+          autoHideDuration={4000}
+          ContentProps={{
+            'aria-describedby': 'snackbar-fab-message-id',
+          }}
+          message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
             <Button color="inherit" size="small">
               Undo
diff --git a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
index 12a144613a8209..cc128b7b610ae4 100644
--- a/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx
@@ -61,8 +61,11 @@ export default function FabIntegrationSnackbar() {
         </Fab>
         <Snackbar
           open
-          autoHideDuration={6000}
-          message="Archived"
+          autoHideDuration={4000}
+          ContentProps={{
+            'aria-describedby': 'snackbar-fab-message-id',
+          }}
+          message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
             <Button color="inherit" size="small">
               Undo
diff --git a/docs/src/pages/components/snackbars/PositionedSnackbar.js b/docs/src/pages/components/snackbars/PositionedSnackbar.js
index 8e41c53f9fcce7..c9f62c104fc083 100644
--- a/docs/src/pages/components/snackbars/PositionedSnackbar.js
+++ b/docs/src/pages/components/snackbars/PositionedSnackbar.js
@@ -36,7 +36,10 @@ export default function PositionedSnackbar() {
         key={`${vertical},${horizontal}`}
         open={open}
         onClose={handleClose}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/PositionedSnackbar.tsx b/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
index c57a1df6d02d16..b29f5b86ed312e 100644
--- a/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/PositionedSnackbar.tsx
@@ -39,7 +39,10 @@ export default function PositionedSnackbar() {
         key={`${vertical},${horizontal}`}
         open={open}
         onClose={handleClose}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.js b/docs/src/pages/components/snackbars/SimpleSnackbar.js
index b7b025bb354077..beb9c42ae9f1b0 100644
--- a/docs/src/pages/components/snackbars/SimpleSnackbar.js
+++ b/docs/src/pages/components/snackbars/SimpleSnackbar.js
@@ -38,7 +38,10 @@ export default function SimpleSnackbar() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        message="Note archived"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">Note archived</span>}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO
diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
index 24f99c577414ff..292d8bc5606556 100644
--- a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx
@@ -40,7 +40,10 @@ export default function SimpleSnackbar() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        message="Note archived"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">Note archived</span>}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO
diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.js b/docs/src/pages/components/snackbars/TransitionsSnackbar.js
index cb366a58166538..c302782d6bffc9 100644
--- a/docs/src/pages/components/snackbars/TransitionsSnackbar.js
+++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.js
@@ -42,7 +42,10 @@ export default function TransitionsSnackbar() {
         open={state.open}
         onClose={handleClose}
         TransitionComponent={state.Transition}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
index 3826a3b6bc7216..b0eccfe76db659 100644
--- a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
+++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx
@@ -43,7 +43,10 @@ export default function TransitionsSnackbar() {
         open={state.open}
         onClose={handleClose}
         TransitionComponent={state.Transition}
-        message="I love snacks"
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
       />
     </div>
   );
diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md
index 20f404e0095e5b..385e759a6dd3d1 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": 400}}
+{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}}
 
 ### Change Transition
 
@@ -86,20 +86,27 @@ 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)
 
-- By default, the toast won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended giving users [enough time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html).
-- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `role="alert"` through the SnackbarContent. This is the default role.
-- If a Snackbar requires focus to close it, then content authors should use `role= "alertdialog"`.
+- 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
-<SnackbarContent role="alert" message="This is a Snackbar message." />
+<SnackbarContent
+  message="This is a Snackbar message."
+  role="alert"
+/>
 ```
 
 ```jsx
 <Snackbar
   ContentProps={{
+    'aria-describedby': 'snackbar-fab-message-id',
     'role': 'alertdialog',
   }}
-  message="Archived"
-  action={<Button color="inherit" size="small">Undo</Button>}
+  message={<span id="snackbar-fab-message-id">Archived</span>}
+  action={
+    <Button color="inherit" size="small">
+      Undo
+    </Button>
+  }
 />
 ```
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 2b27d57d774089..c2a20ec476137c 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.js
@@ -46,9 +46,10 @@ function Snackbar(props) {
   return (
     <MuiSnackbar
       anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-      autoHideDuration={6000}
+      autoHideDuration={6e3}
       transition={Transition}
       ContentProps={{
+        'aria-describedby': 'snackbar',
         classes: {
           root: classes.content,
           message: classes.contentMessage,
@@ -58,7 +59,7 @@ function Snackbar(props) {
       message={
         <React.Fragment>
           <InfoIcon className={classes.info} />
-          <span>{message}</span>
+          <span id="snackbar">{message}</span>
         </React.Fragment>
       }
       action={[
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index 6202fd8e3afb82..100f8e62218e6a 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 = null,
+    autoHideDuration,
     children,
     classes,
     className,
diff --git a/packages/material-ui/test/typescript/components.spec.tsx b/packages/material-ui/test/typescript/components.spec.tsx
index 91f6b2ee98f2dc..5b8bd0bc522d45 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={6000}
+      autoHideDuration={6e3}
       onClose={e => log(e)}
       ContentProps={
         {