From 790c6bb31e6828fcb45177092e2d6551eb0b7067 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 11:26:07 +0100 Subject: [PATCH 1/4] [Snackbar] Improve accessibility --- 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, 26 insertions(+), 70 deletions(-) diff --git a/docs/pages/api/snackbar.md b/docs/pages/api/snackbar.md index 4384127502c3da..3ecebff33c2c56 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. | | 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 eee3ff37af5a6d..d31b40acad3da1 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={[ - } + message="Archived" + action={} /> ``` 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 100f8e62218e6a..6202fd8e3afb82 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={ { From 1c5477aa7fc204b21f640ee921b1365117f091d6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 12:21:09 +0100 Subject: [PATCH 2/4] Update docs/src/pages/components/snackbars/snackbars.md Co-Authored-By: Matt --- docs/src/pages/components/snackbars/snackbars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md index 20f404e0095e5b..cec9dcccc03695 100644 --- a/docs/src/pages/components/snackbars/snackbars.md +++ b/docs/src/pages/components/snackbars/snackbars.md @@ -86,7 +86,7 @@ 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). +- By default, the snackbar 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"`. From 1ab8500502325b39a00fc6a126047f615c93532e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 31 Dec 2019 13:58:34 +0100 Subject: [PATCH 3/4] Review --- docs/src/pages/components/snackbars/snackbars.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md index cec9dcccc03695..c1d72bb80fae41 100644 --- a/docs/src/pages/components/snackbars/snackbars.md +++ b/docs/src/pages/components/snackbars/snackbars.md @@ -87,19 +87,3 @@ 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 snackbar 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"`. - -```jsx - -``` - -```jsx -Undo} -/> -``` From 730cf7c25b64f360eefe8d1dc3a0145cfead887c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 1 Jan 2020 18:32:57 +0100 Subject: [PATCH 4/4] Update docs/src/pages/components/snackbars/snackbars.md Co-Authored-By: Matt --- docs/src/pages/components/snackbars/snackbars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/snackbars/snackbars.md b/docs/src/pages/components/snackbars/snackbars.md index c1d72bb80fae41..01ad963b46d782 100644 --- a/docs/src/pages/components/snackbars/snackbars.md +++ b/docs/src/pages/components/snackbars/snackbars.md @@ -86,4 +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) -- By default, the snackbar 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). +- 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.