[material-ui][docs] Revise the Snackbar page

docs/data/material/components/snackbars/AutohideSnackbar.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+
+export default function AutohideSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Open Snackbar</Button>
+      <Snackbar
+        open={open}
+        autoHideDuration={5000}
+        onClose={handleClose}
+        message="This Snackbar will be dismissed in 5 seconds."
+      />
+    </div>
+  );
+}

docs/data/material/components/snackbars/AutohideSnackbar.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+
+export default function AutohideSnackbar() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={handleClick}>Open Snackbar</Button>
+      <Snackbar
+        open={open}
+        autoHideDuration={5000}
+        onClose={handleClose}
+        message="This Snackbar will be dismissed in 5 seconds."
+      />
+    </div>
+  );
+}

docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview

@@ -0,0 +1,7 @@
+<Button onClick={handleClick}>Open Snackbar</Button>
+<Snackbar
+  open={open}
+  autoHideDuration={5000}
+  onClose={handleClose}
+  message="This Snackbar will be dismissed in 5 seconds."
+/>

docs/data/material/components/snackbars/snackbars.md

@@ -9,7 +9,7 @@
 
 # Snackbar
 
 <p class="description">Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.</p>
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
@@ -54,6 +54,14 @@
 
 {{"demo": "TransitionsSnackbar.js"}}
 
+### Automatic dismiss
+
+Use the `autoHideDuration` prop to specify an amount of time (in milliseconds) for the close function to be called, and thus, for the Snackbar to be automatically dismissed.
+
+Make sure to [provide sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) for the user to process the information displayed on it.
+
+{{"demo": "AutohideSnackbar.js"}}
+
 ## Customization
 
 ### Use with Alerts
@@ -90,12 +98,7 @@
 
 ## Accessibility
 
-Here are a few tips to make sure you have an accessible Snackbar component:
-
-- According to the [WAI-ARIA guidelines](https://www.w3.org/TR/wai-aria-1.1/#alert), Snackbars shouldn't auto-hide by default.
-  If you use the `autoHideDuration` prop, make sure to [provide sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) for the user to process the information displayed on it.
-
-- The user should be able to dismiss Snackbars by pressing <kbd class="key">Escape</kbd>. If there are multiple instances appearing at the same time and you want <kbd class="key">Escape</kbd> to dismiss only the oldest one that's currently open, call `event.preventDefault` in the `onClose` prop.
+The user should be able to dismiss Snackbars by pressing <kbd class="key">Escape</kbd>. If there are multiple instances appearing at the same time and you want <kbd class="key">Escape</kbd> to dismiss only the oldest one that's currently open, call `event.preventDefault` in the `onClose` prop.
 
 ```jsx
 export default function MyComponent() {