[docs] Mark toolbar for assistive technology (#20158)

docs/src/modules/components/Demo.js

@@ -84,13 +84,13 @@ const styles = theme => ({
       padding: theme.spacing(3),
     },
   },
-  demoHiddenHeader: {
+  demoHiddenToolbar: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
       paddingTop: theme.spacing(3),
     },
   },
-  header: {
+  toolbar: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {
       display: 'flex',
@@ -101,7 +101,7 @@ const styles = theme => ({
     },
     justifyContent: 'space-between',
   },
-  headerButtons: {
+  toolbarButtons: {
     margin: '2px 0',
   },
   code: {
@@ -152,6 +152,21 @@ function getDemoData(codeVariant, demo, githubLocation) {
   };
 }
 
+// TODO: replace with React.useOpaqueReference if it is released
+function useUniqueId(prefix) {
+  // useOpaqueReference
+  const [id, setDemoId] = React.useState(null);
+  React.useEffect(() => {
+    setDemoId(
+      Math.random()
+        .toString(36)
+        .slice(2),
+    );
+  }, []);
+
+  return `${prefix}${id}`;
+}
+
 function Demo(props) {
   const { classes, demo, demoOptions, githubLocation } = props;
   const dispatch = useDispatch();
@@ -309,7 +324,7 @@ function Demo(props) {
 
   const jsx = getJsxPreview(demoData.raw || '');
   const showPreview =
-    !demoOptions.hideHeader &&
+    !demoOptions.hideToolbar &&
     demoOptions.defaultCodeOpen !== false &&
     jsx !== demoData.raw &&
     jsx.split(/\n/).length <= 17;
@@ -321,11 +336,14 @@ function Demo(props) {
     showCodeLabel = showPreview ? t('showFullSource') : t('showSource');
   }
 
+  const demoSourceId = useUniqueId(`demo-`);
+  const openDemoSource = codeOpen || showPreview;
+
   return (
     <div className={classes.root}>
       <div
         className={clsx(classes.demo, {
-          [classes.demoHiddenHeader]: demoOptions.hideHeader,
+          [classes.demoHiddenToolbar]: demoOptions.hideToolbar,
           [classes.demoBgOutlined]: demoOptions.bg === 'outlined',
           [classes.demoBgTrue]: demoOptions.bg === true,
           [classes.demoBgInline]: demoOptions.bg === 'inline',
@@ -343,8 +361,13 @@ function Demo(props) {
       </div>
       <div className={classes.anchorLink} id={`${demoName}.js`} />
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
-      {demoOptions.hideHeader ? null : (
-        <div className={classes.header}>
+      {demoOptions.hideToolbar ? null : (
+        <div
+          aria-controls={openDemoSource ? demoSourceId : null}
+          aria-label={t('demoToolbarLabel')}
+          className={classes.toolbar}
+          role="toolbar"
+        >
           <NoSsr>
             <DemoLanguages
               demo={demo}
@@ -353,7 +376,7 @@ function Demo(props) {
               gaEventLabel={demoOptions.demo}
               onLanguageClick={handleCodeLanguageClick}
             />
-            <div className={classes.headerButtons}>
+            <div className={classes.toolbarButtons}>
               <Tooltip
                 classes={{ popper: classes.tooltip }}
                 key={showSourceHint}
@@ -471,9 +494,10 @@ function Demo(props) {
           </NoSsr>
         </div>
       )}
-      <Collapse in={codeOpen || showPreview} unmountOnExit>
+      <Collapse in={openDemoSource} unmountOnExit>
         <MarkdownElement
           className={classes.code}
+          id={demoSourceId}
           text={`\`\`\`${demoData.sourceLanguage}\n${codeOpen ? demoData.raw : jsx}\n\`\`\``}
         />
       </Collapse>

docs/src/pages/components/badges/badges-de.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-es.md

@@ -51,4 +51,4 @@ Usted puede usar la propiedad `overlap` para establecer el Badge relativo a la e
 
 Usted puede usar la propiedad `anchorOrigin` para mover el Badge a cualquier esquina del elemento envuelto.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-fr.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-ja.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-pt.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-ru.md

@@ -51,4 +51,4 @@ components: Badge
 
 Вы можете использовать проп `anchorOrigin` для перемещения значка в любой угол элемента.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges-zh.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/badges/badges.md

@@ -51,4 +51,4 @@ You can use the `overlap` property to place the badge relative to the corner of
 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
-{{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}}
+{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}

docs/src/pages/components/chips/chips-de.md

@@ -46,8 +46,8 @@ Sie können die Requisite `size` verwenden, um einen kleinen Chip zu definieren.
 
 ## Chip Spielwiese
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Barrierefreiheit
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-es.md

@@ -46,8 +46,8 @@ You can use the `size` prop to define a small Chip.
 
 ## Chip Playground
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Accesibilidad
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-fr.md

@@ -46,8 +46,8 @@ You can use the `size` prop to define a small Chip.
 
 ## Terrain de jeu de puce
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Accessibilité
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-ja.md

@@ -46,8 +46,8 @@ Outlined chipsは代替スタイルを提供します。
 
 ## Chip Playground
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## アクセシビリティ
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-pt.md

@@ -46,8 +46,8 @@ Você pode usar a propriedade `size` para definir um Chip pequeno.
 
 ## Chip - Live Demo
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Acessibilidade
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-ru.md

@@ -46,8 +46,8 @@ components: Chip
 
 ## Песочница
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Доступность
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips-zh.md

@@ -46,8 +46,8 @@ components: Chip
 
 ## 在线编译纸片组件
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## 可访问性
 
-If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.
+If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip.

docs/src/pages/components/chips/chips.md

@@ -54,7 +54,7 @@ You can use the `size` prop to define a small Chip.
 
 ## Chip Playground
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}}
 
 ## Accessibility
 

docs/src/pages/components/grid/grid-de.md

@@ -49,7 +49,7 @@ Für einige Spalten sind mehrere Breiten definiert, wodurch sich das Layout am d
 
 Nachfolgend finden Sie eine interaktive Demo, mit der Sie die visuellen Ergebnisse der verschiedenen Einstellungen untersuchen können:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Automatisches Layout
 
@@ -120,4 +120,4 @@ Obwohl die `Grid-` Komponente eine `direction-` Eigenschaft hat, die Werte von `
 
 Die Material-UI bietet selbst keine CSS-Grid-Funktionalität. Wie Sie jedoch unten sehen, können Sie CSS-Grid einfach zum Layout Ihrer Seiten hinzufügen.
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-es.md

@@ -49,7 +49,7 @@ Algunas columnas tienen varios anchos definidos, causando que el layout cambie e
 
 Debajo de esta línea hay una demostración interactiva que permite explorar el resultado visual de las distintas configuraciones:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Auto-layout
 
@@ -120,4 +120,4 @@ Though the `Grid` component has a `direction` property that allows values of `ro
 
 Material-UI doesn't provide any CSS Grid functionality itself, but as seen below you can easily use CSS Grid to layout your pages.
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-fr.md

@@ -49,7 +49,7 @@ Plusieurs colonnes ont plusieurs largeurs définies, ce qui entraîne une modifi
 
 Vous trouverez ci-dessous une démo interactive vous permettant d'explorer les résultats visuels des différents paramètres:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Mise en page automatique
 
@@ -120,4 +120,4 @@ Bien que le composant `Grid` ait une propriété `direction` qui autorise les va
 
 Material-UI ne fournit aucune fonctionnalité de grille CSS, mais comme illustré ci-dessous, vous pouvez facilement utiliser CSS Grid pour mettre en page vos pages.
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-ja.md

@@ -49,7 +49,7 @@ Fluid gridsでは、コンテンツの尺度とサイズを変更する列を使
 
 以下は、さまざまな設定の視覚的な結果を調べることができるインタラクティブなデモです。
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## 自動レイアウト
 
@@ -120,4 +120,4 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
 
 Material-UI自体はCSSグリッド機能自体を提供しませんが、以下に示すように、CSSグリッドを使用してページをレイアウトすることは簡単にできます。
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-pt.md

@@ -49,7 +49,7 @@ Algumas colunas têm várias larguras definidas, fazendo com que o leiaute seja
 
 Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Leiaute Automático
 
@@ -120,4 +120,4 @@ Embora o componente `Grid` tenha uma propriedade `direction` que permite valores
 
 Material-UI não fornece nenhuma funcionalidade CSS de Grade, mas como pode ser visto abaixo, você pode facilmente usar leiaute de Grade CSS em suas páginas.
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-ru.md

@@ -49,7 +49,7 @@ components: Grid
 
 Ниже приведен интерактивный пример, который демонстрирует результаты различных настроек сетки:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Авто-разметка
 
@@ -120,4 +120,4 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
 
 Material UI сам по себе не предоставляет никакой функциональности CSS Grid, но, как видно ниже, вы можете легко использовать CSS Grid в макете страницы.
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid-zh.md

@@ -49,7 +49,7 @@ components: Grid
 
 下面是一个交互式的演示，您可让探索不同设置下的视觉结果：
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## 自动布局
 
@@ -120,4 +120,4 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
 
 Material-UI 本身不提供任何 CSS Grid 功能，但如下所示，您可以轻松使用 CSS Grid 来布局您的页面。
 
-{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}
+{{"demo": "pages/components/grid/CSSGrid.js", "bg": true}}

docs/src/pages/components/grid/grid.md

@@ -53,7 +53,7 @@ Some columns have multiple widths defined, causing the layout to change at the d
 
 Below is an interactive demo that lets you explore the visual results of the different settings:
 
-{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}}
 
 ## Auto-layout
 

docs/src/pages/components/material-icons/material-icons-de.md

@@ -9,6 +9,6 @@ components: Icon, SvgIcon
 
 The following npm package, [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons), includes the 1,100+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to [`SvgIcon`](/api/svg-icon/) components.
 
-{{"demo": "pages/components/material-icons/SearchIcons.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/material-icons/SearchIcons.js", "hideToolbar": true, "bg": true}}
 
-ℹ️ The search supports synonyms. Try searching for "hamburger", or "logout".
+ℹ️ The search supports synonyms. Try searching for "hamburger", or "logout".

docs/src/pages/components/material-icons/material-icons-es.md

@@ -9,6 +9,6 @@ components: Icon, SvgIcon
 
 The following npm package, [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons), includes the 1,100+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to [`SvgIcon`](/api/svg-icon/) components.
 
-{{"demo": "pages/components/material-icons/SearchIcons.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/material-icons/SearchIcons.js", "hideToolbar": true, "bg": true}}
 
-ℹ️ La búsqueda admite sinónimos. Intente buscar "hamburger" o "logout".
+ℹ️ La búsqueda admite sinónimos. Intente buscar "hamburger" o "logout".