adding more pages to a11y testing (#4435)

Co-authored-by: Chandler Prall <[email protected]>

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.4.0`.
+**Bug fixes**
+
+- Fixed `id` usage throughout `EuiTreeView` to respect custom ids and stop conflicts in generated ids ([#4435](https://github.com/elastic/eui/pull/4435))
+- Fixed `EuiTabs` `role` if no tabs are passed in ([#4435](https://github.com/elastic/eui/pull/4435))
 
 ## [`31.4.0`](https://github.com/elastic/eui/tree/v31.4.0)
 

package.json

@@ -114,8 +114,8 @@
     "@typescript-eslint/parser": "^4.8.1",
     "argparse": "^2.0.1",
     "autoprefixer": "^9.8.6",
-    "axe-core": "^4.0.1",
-    "axe-puppeteer": "^1.1.0",
+    "axe-core": "^4.1.1",
+    "axe-puppeteer": "^1.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^24.1.0",
@@ -178,7 +178,7 @@
     "prettier-stylelint": "^0.4.2",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
-    "puppeteer": "^5.3.0",
+    "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
     "react": "^16.12.0",
     "react-docgen-typescript": "^1.20.5",

scripts/a11y-testing.js

@@ -24,9 +24,6 @@ const { AxePuppeteer } = require('axe-puppeteer');
 const docsPages = async (root, page) => {
   const pagesToSkip = [
     `${root}#/layout/resizable-container`,
-    `${root}#/navigation/button`,
-    `${root}#/navigation/tree-view`,
-    `${root}#/navigation/side-nav`,
     `${root}#/tabular-content/tables`,
     `${root}#/tabular-content/in-memory-tables`,
     `${root}#/display/aspect-ratio`,
@@ -50,21 +47,19 @@ const docsPages = async (root, page) => {
     `${root}#/tabular-content/data-grid-virtualization`,
     `${root}#/elastic-charts/creating-charts`,
     `${root}#/elastic-charts/part-to-whole-comparisons`,
-    `${root}#/utilities/css-utility-classes`,
-    `${root}#/utilities/focus-trap`,
   ];
 
   return [
     root,
-    ...(await page.$$eval('nav a', anchors => anchors.map(a => a.href))),
-  ].filter(link => !pagesToSkip.includes(link));
+    ...(await page.$$eval('nav a', (anchors) => anchors.map((a) => a.href))),
+  ].filter((link) => !pagesToSkip.includes(link));
 };
 
-const printResult = result =>
+const printResult = (result) =>
   console.log(`[${result.id}]: ${result.description}
   Help: ${chalk.blue(result.helpUrl)}
   Elements:
-    - ${result.nodes.map(node => node.target).join('\n    - ')}`);
+    - ${result.nodes.map((node) => node.target).join('\n    - ')}`);
 
 (async () => {
   let totalViolationsCount = 0;
@@ -122,7 +117,7 @@ const printResult = result =>
       console.log(chalk.red(`Errors on ${pageName}`));
     }
 
-    violations.forEach(result => {
+    violations.forEach((result) => {
       printResult(result);
     });
   }
@@ -144,4 +139,4 @@ Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/`);
   } else {
     console.log(chalk.green('axe found no accessibility errors!'));
   }
-})().catch(e => console.error(e));
+})().catch((e) => console.error(e));

src-docs/src/views/button/button_ghost.js

@@ -19,7 +19,7 @@ export default () => {
   return (
     <EuiPanel
       paddingSize="l"
-      color="transparent"
+      color="ghost"
       className="guideDemo__ghostBackground">
       <EuiFlexGroup wrap gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>

src-docs/src/views/button/button_group.js

@@ -121,6 +121,10 @@ export default () => {
     },
   ];
 
+  const toggleButtonsIconsMultiCompressed = toggleButtonsIconsMulti.map(
+    (config) => ({ ...config, id: `${config.id}-compressed` })
+  );
+
   const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}1`);
   const [toggleIdDisabled, setToggleIdDisabled] = useState(`${idPrefix}4`);
   const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({
@@ -137,7 +141,7 @@ export default () => {
     setToggleIconIdToSelectedMapIcon,
   ] = useState({});
   const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(
-    `${idPrefix2}4`
+    `${idPrefix2}4-compressed`
   );
 
   const onChange = (optionId) => {
@@ -268,9 +272,9 @@ export default () => {
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiButtonGroup
-          legend="Text style"
+          legend="Text style compressed"
           className="eui-displayInlineBlock"
-          options={toggleButtonsIconsMulti}
+          options={toggleButtonsIconsMultiCompressed}
           idToSelectedMap={toggleIconIdToSelectedMapIcon}
           onChange={(id) => onChangeIconsMultiIcons(id)}
           type="multi"

src-docs/src/views/side_nav/side_nav.js

@@ -41,6 +41,7 @@ export default () => {
 
   return (
     <EuiSideNav
+      aria-label="Basic example"
       mobileTitle="Navigate within $APP_NAME"
       toggleOpenOnMobile={() => toggleOpenOnMobile()}
       isOpenOnMobile={isSideNavOpenOnMobile}

src-docs/src/views/side_nav/side_nav_complex.js

@@ -70,6 +70,7 @@ export default () => {
 
   return (
     <EuiSideNav
+      aria-label="Complex example"
       mobileTitle="Navigate within $APP_NAME"
       toggleOpenOnMobile={toggleOpenOnMobile}
       isOpenOnMobile={isSideNavOpenOnMobile}

src-docs/src/views/side_nav/side_nav_force_open.js

@@ -58,6 +58,7 @@ export default () => {
 
   return (
     <EuiSideNav
+      aria-label="Force-open example"
       mobileTitle="Navigate within $APP_NAME"
       toggleOpenOnMobile={toggleOpenOnMobile}
       isOpenOnMobile={isSideNavOpenOnMobile}

src-docs/src/views/utility_classes/utility_classes.js

@@ -20,7 +20,7 @@ const wrappingExampleStyle = {
 
 export default () => (
   <EuiText>
-    <h4>Display</h4>
+    <h2>Display</h2>
 
     <EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>
 
@@ -42,7 +42,7 @@ export default () => (
 
     <EuiSpacer />
 
-    <h4>Text</h4>
+    <h2>Text</h2>
 
     <EuiSpacer />
 
@@ -105,7 +105,7 @@ export default () => (
 
     <EuiSpacer />
 
-    <h4>Overflows</h4>
+    <h2>Overflows</h2>
 
     <div
       style={{
@@ -141,6 +141,7 @@ export default () => (
         padding: 0,
       }}>
       <div
+        tabIndex="0"
         className="eui-xScrollWithShadows"
         style={{ padding: wrappingExampleStyle.padding }}>
         <EuiText size="s" style={{ width: '150%' }}>
@@ -155,7 +156,7 @@ export default () => (
     </div>
 
     <EuiSpacer />
-    <h4>Vertical alignment</h4>
+    <h2>Vertical alignment</h2>
     <EuiSpacer />
 
     <div>
@@ -190,7 +191,7 @@ export default () => (
 
     <EuiSpacer />
 
-    <h4>Responsive</h4>
+    <h2>Responsive</h2>
 
     <EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>
     <EuiSpacer />
@@ -212,7 +213,7 @@ export default () => (
 
     <EuiSpacer />
 
-    <h5>Modifiers</h5>
+    <h3>Modifiers</h3>
     <p>
       The <EuiCode>.eui-showFor--[size]</EuiCode> classes will force display of{' '}
       <EuiCode>inline</EuiCode> when showing the element. You can modify this

src/components/tabs/__snapshots__/tabs.test.tsx.snap

@@ -4,21 +4,27 @@ exports[`EuiTabs props display can be condensed 1`] = `
 <div
   class="euiTabs euiTabs--condensed"
   role="tablist"
-/>
+>
+  children
+</div>
 `;
 
 exports[`EuiTabs props expand is rendered 1`] = `
 <div
   class="euiTabs euiTabs--expand"
   role="tablist"
-/>
+>
+  children
+</div>
 `;
 
 exports[`EuiTabs props size can be small 1`] = `
 <div
   class="euiTabs euiTabs--small"
   role="tablist"
-/>
+>
+  children
+</div>
 `;
 
 exports[`EuiTabs renders 1`] = `
@@ -27,5 +33,7 @@ exports[`EuiTabs renders 1`] = `
   class="euiTabs testClass1 testClass2"
   data-test-subj="test subject string"
   role="tablist"
-/>
+>
+  children
+</div>
 `;

src/components/tabs/tabs.test.tsx

@@ -25,29 +25,31 @@ import { EuiTabs } from './tabs';
 
 describe('EuiTabs', () => {
   test('renders', () => {
-    const component = <EuiTabs {...requiredProps} />;
+    const component = <EuiTabs {...requiredProps}>children</EuiTabs>;
 
     expect(render(component)).toMatchSnapshot();
   });
 
   describe('props', () => {
     describe('size', () => {
       test('can be small', () => {
-        const component = render(<EuiTabs size="s" />);
+        const component = render(<EuiTabs size="s">children</EuiTabs>);
         expect(component).toMatchSnapshot();
       });
     });
 
     describe('display', () => {
       test('can be condensed', () => {
-        const component = render(<EuiTabs display="condensed" />);
+        const component = render(
+          <EuiTabs display="condensed">children</EuiTabs>
+        );
         expect(component).toMatchSnapshot();
       });
     });
 
     describe('expand', () => {
       test('is rendered', () => {
-        const component = render(<EuiTabs expand />);
+        const component = render(<EuiTabs expand>children</EuiTabs>);
         expect(component).toMatchSnapshot();
       });
     });

src/components/tabs/tabs.tsx

@@ -87,7 +87,11 @@ export const EuiTabs = forwardRef<EuiTabRef, PropsWithChildren<EuiTabsProps>>(
     );
 
     return (
-      <div ref={ref} role="tablist" className={classes} {...rest}>
+      <div
+        ref={ref}
+        className={classes}
+        {...(children && { role: 'tablist' })}
+        {...rest}>
         {children}
       </div>
     );