Revised element IDs within the Flyout section of src/docs to use IDs …

…generated by the htmlIdGenerator utility function
elastic · Aug 30, 2021 · 8bb14f6 · 8bb14f6
1 parent b2ba60a
commit 8bb14f6
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 19 deletions.
diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
@@ -10,8 +10,11 @@ import {
   EuiCodeBlock,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
 
@@ -32,10 +35,10 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="flyoutTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutTitle">A typical flyout</h2>
+            <h2 id={flyoutID__title}>A typical flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>

diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.js
@@ -11,8 +11,11 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
@@ -34,10 +37,10 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutWithBannerTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutWithBannerTitle">A flyout with a banner</h2>
+            <h2 id={flyoutID__title}>A flyout with a banner</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={callOut}>

diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
@@ -23,12 +23,15 @@ import {
   EuiSuperSelect,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('1');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [superSelectvalue, setSuperSelectValue] = useState('option_one');
   const [isExpressionOpen, setIsExpressionOpen] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const tabs = [
     {
@@ -182,10 +185,10 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         hideCloseButton
-        aria-labelledby="flyoutComplicatedTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutComplicatedTitle">Flyout header</h2>
+            <h2 id={flyoutID__title}>Flyout header</h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText color="subdued">

diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js
@@ -10,10 +10,13 @@ import {
   EuiButtonGroup,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [size, setSize] = useState('l');
   const [sizeName, setSizeName] = useState('large');
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const sizes = [
     {
@@ -45,10 +48,10 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         size={size}
-        aria-labelledby="flyoutLargeTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutLargeTitle">A {sizeName.toLowerCase()} flyout</h2>
+            <h2 id={flyoutID__title}>A {sizeName.toLowerCase()} flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>

diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
@@ -16,10 +16,13 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [flyoutSize, setFlyoutSize] = useState('m');
   const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
@@ -49,12 +52,12 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutMaxWidthTitle"
+        aria-labelledby={flyoutID__title}
         size={flyoutSize}
         maxWidth={flyoutMaxWidth}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMaxWidthTitle">{maxWidthTitle} maxWidth</h2>
+            <h2 id={flyoutID__title}>{maxWidthTitle} maxWidth</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>

diff --git a/src-docs/src/views/flyout/flyout_padding_medium.js b/src-docs/src/views/flyout/flyout_padding_medium.js
@@ -15,10 +15,14 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [paddingSize, setPaddingSize] = useState('l');
   const [paddingSizeName, setPaddingSizeName] = useState('large');
+  const flyoutID = htmlIdGenerator('flyout')();
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const sizes = [
     {
@@ -56,11 +60,11 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         paddingSize={paddingSize}
-        id="flyoutMediumPadding"
-        aria-labelledby="flyoutMediumPaddingTitle">
+        id={flyoutID}
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMediumPaddingTitle">
+            <h2 id={flyoutID__title}>
               A flyout with a {paddingSizeName} padding
             </h2>
           </EuiTitle>
@@ -107,7 +111,7 @@ export default () => {
     <>
       <EuiButton
         onClick={showFlyout}
-        aria-controls="flyoutMediumPadding"
+        aria-controls={flyoutID}
         aria-expanded={isFlyoutVisible}
         aria-haspopup="true"
         aria-label="Show padding size flyout">

diff --git a/src-docs/src/views/flyout/flyout_push.js b/src-docs/src/views/flyout/flyout_push.js
@@ -10,8 +10,11 @@ import {
   EuiFlyoutFooter,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
 
@@ -21,10 +24,10 @@ export default () => {
         type="push"
         size="s"
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="pushedFlyoutTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="pushedFlyoutTitle">A pushed flyout</h2>
+            <h2 id={flyoutID__title}>A pushed flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>

diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_small.js
@@ -8,6 +8,7 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
+
 import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
@@ -17,18 +18,18 @@ export default () => {
 
   const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);
 
-  const flyoutTitleId = htmlIdGenerator('flyout')();
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
   if (isFlyoutVisible) {
     flyout = (
       <EuiFlyout
         ownFocus={false}
         onClose={closeFlyout}
-        aria-labelledby={flyoutTitleId}>
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id={flyoutTitleId}>A flyout without ownFocus</h2>
+            <h2 id={flyoutID__title}>A flyout without ownFocus</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>