move snackbar changes to another pull request

mui · Dec 30, 2019 · d960cb9 · d960cb9
1 parent 5ce86c4
commit d960cb9
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -716,7 +716,7 @@ const SnackbarTest = () => (
         horizontal: 'left',
       }}
       open={true}
-      autoHideDuration={6000}
+      autoHideDuration={6e3}
       onClose={e => log(e)}
       ContentProps={
         {