Added automated a11y tests for some docs pages (#3036)

Also removed `role` from EuiImage

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))
 - Exported `EuiTextProps` type definition ([#3039](https://github.com/elastic/eui/pull/3039))
+- Removed `role` attribute from `EuiImage`([#3036](https://github.com/elastic/eui/pull/3036))
 -  Added `prepend` and `append` ability to `EuiComboBox` single selection only ([#3003](https://github.com/elastic/eui/pull/3003))
 
 **Bug Fixes**

scripts/a11y-testing.js

@@ -10,10 +10,57 @@ const docsPages = async (root, page) => {
 
   links = links.splice(0, 14);
   const reflinks = [
+    `${root}#/layout/horizontal-rule`,
+    `${root}#/layout/modal`,
+    `${root}#/layout/nav-drawer`,
+    `${root}#/layout/panel`,
+    `${root}#/layout/popover`,
+    `${root}#/layout/spacer`,
+    `${root}#/navigation/breadcrumbs`,
+    `${root}#/navigation/context-menu`,
+    `${root}#/navigation/control-bar`,
+    `${root}#/navigation/link`,
+    `${root}#/navigation/pagination`,
+    `${root}#/navigation/steps`,
+    `${root}#/navigation/tabs`,
+    `${root}#/display/avatar`,
+    `${root}#/display/badge`,
+    `${root}#/display/callout`,
+    `${root}#/display/card`,
+    `${root}#/display/description-list`,
+    `${root}#/display/emptyprompt`,
+    `${root}#/display/health`,
+    `${root}#/display/icons`,
+    `${root}#/display/image`,
+    `${root}#/display/list-group`,
+    `${root}#/display/loading`,
+    `${root}#/display/progress`,
+    `${root}#/display/stat`,
+    `${root}#/display/text`,
+    `${root}#/display/title`,
+    `${root}#/display/toast`,
+    `${root}#/display/tooltip`,
     `${root}#/forms/form-layouts`,
+    `${root}#/forms/form-validation`,
+    `${root}#/forms/code-editor`,
+    `${root}#/forms/expression`,
+    `${root}#/forms/filter-group`,
     `${root}#/forms/range-sliders`,
-    `${root}#/display/progress`,
-    `${root}#/display/loading`,
+    `${root}#/forms/search-bar`,
+    `${root}#/elastic-charts/sizing`,
+    `${root}#/elastic-charts/time-series`,
+    `${root}#/elastic-charts/categorical`,
+    `${root}#/utilities/i18n`,
+    `${root}#/utilities/is-color-dark`,
+    `${root}#/utilities/pretty-duration`,
+    `${root}#/utilities/mutationobserver`,
+    `${root}#/utilities/outside-click-detector`,
+    `${root}#/utilities/portal`,
+    `${root}#/utilities/resizeobserver`,
+    `${root}#/utilities/responsive`,
+    `${root}#/utilities/toggle`,
+    `${root}#/utilities/window-events`,
+    `${root}#/package/i18n-tokens`,
     `${root}#/utilities/accessibility`,
     `${root}#/utilities/context`,
     `${root}#/utilities/copy`,

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -155,7 +155,7 @@ export class GuidePageChrome extends Component {
 
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="popover"
+            id="guidePageChromeThemePopover"
             button={button}
             isOpen={this.state.isPopoverOpen}
             closePopover={this.closePopover.bind(this)}>

src-docs/src/views/avatar/avatar.js

@@ -13,7 +13,7 @@ export default () => (
     <EuiAvatar size="xl" name="Michelangelo" />
     <EuiSpacer />
     <EuiTitle size="xs">
-      <h3>With image</h3>
+      <h2>With image</h2>
     </EuiTitle>
     <EuiSpacer />
     <EuiAvatar

src-docs/src/views/badge/badge.js

@@ -38,7 +38,7 @@ export default () => {
   return (
     <Fragment>
       <EuiTitle size="xs">
-        <h3>Accepted color names</h3>
+        <h2>Accepted color names</h2>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiFlexGroup wrap responsive={false} gutterSize="xs">

src-docs/src/views/breadcrumbs/breadcrumbs.js

@@ -44,7 +44,11 @@ export default () => {
 
   return (
     <Fragment>
-      <EuiBreadcrumbs breadcrumbs={breadcrumbs} truncate={false} />
+      <EuiBreadcrumbs
+        breadcrumbs={breadcrumbs}
+        truncate={false}
+        aria-label="An example of EuiBreadcrumbs"
+      />
       <EuiSpacer size="xs" />
 
       <EuiPageContentHeader>

src-docs/src/views/breadcrumbs/max.js

@@ -43,6 +43,7 @@ export default () => {
       breadcrumbs={breadcrumbs}
       responsive={false}
       truncate={false}
+      aria-label="An example of EuiBreadcrumbs with specifying max prop"
     />
   );
 };

src-docs/src/views/breadcrumbs/popover.js

@@ -129,6 +129,7 @@ export default () => {
         truncate={false}
         max={5}
         showMaxPopover
+        aria-label="An example of EuiBreadcrumbs with popover"
       />
     </Fragment>
   );

src-docs/src/views/breadcrumbs/responsive.js

@@ -43,7 +43,12 @@ export default () => {
 
   return (
     <Fragment>
-      <EuiBreadcrumbs responsive={false} breadcrumbs={breadcrumbs} max={null} />
+      <EuiBreadcrumbs
+        responsive={false}
+        breadcrumbs={breadcrumbs}
+        max={null}
+        aria-label="An example of responsive EuiBreadcrumbs"
+      />
 
       <EuiShowFor sizes={['xs', 's']}>
         <EuiText size="s" color="subdued">

src-docs/src/views/breadcrumbs/truncate.js

@@ -54,6 +54,7 @@ export default () => {
         responsive={false}
         truncate={false}
         breadcrumbs={breadcrumbs}
+        aria-label="An example of EuiBreadcrumbs without truncate prop"
       />
       <EuiSpacer />
       <EuiTitle size="xs">
@@ -64,6 +65,7 @@ export default () => {
         responsive={false}
         truncate={true}
         breadcrumbs={breadcrumbs}
+        aria-label="An example of EuiBreadcrumbs with truncate prop"
       />
     </div>
   );

src-docs/src/views/context_menu/context_menu.js

@@ -165,7 +165,7 @@ export default class extends Component {
 
     return (
       <EuiPopover
-        id="contextMenu"
+        id="contextMenuExample"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}

src-docs/src/views/context_menu/context_menu_with_content.js

@@ -125,7 +125,7 @@ export default class extends Component {
     return (
       <React.Fragment>
         <EuiPopover
-          id="contextMenu"
+          id="contextMenuNormal"
           button={button}
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover}

src-docs/src/views/elastic_charts/category_chart.js

@@ -86,10 +86,10 @@ export class CategoryChart extends Component {
     return (
       <Fragment>
         <EuiTitle size="xxs">
-          <h3>
+          <h2>
             Number of GitHub issues per visualization type
             {this.state.multi && ' by type of issue'}
-          </h3>
+          </h2>
         </EuiTitle>
 
         <EuiSpacer size="s" />

src-docs/src/views/elastic_charts/sizes.js

@@ -196,7 +196,7 @@ export class Sizes extends Component {
               overflow: 'hidden',
             }}>
             <EuiTitle size="xxs">
-              <h3>Chart title {multi && ' by type'}</h3>
+              <h2>Chart title {multi && ' by type'}</h2>
             </EuiTitle>
 
             <EuiSpacer size="s" />

src-docs/src/views/elastic_charts/time_chart.js

@@ -78,10 +78,10 @@ export class TimeChart extends Component {
     return (
       <Fragment>
         <EuiTitle size="xxs">
-          <h3>
+          <h2>
             Number of {!this.state.multi && 'financial '}robo-calls
             {this.state.multi && ' by type'}
-          </h3>
+          </h2>
         </EuiTitle>
 
         <EuiSpacer size="s" />

src-docs/src/views/filter_group/filter_group_multi.js

@@ -71,7 +71,7 @@ export default class extends Component {
     return (
       <EuiFilterGroup>
         <EuiPopover
-          id="popover"
+          id="popoverExampleMultiSelect"
           ownFocus
           button={button}
           isOpen={this.state.isPopoverOpen}

src-docs/src/views/i18n/i18n_renderprop.js

@@ -1,17 +1,28 @@
 import React, { Fragment } from 'react';
 
-import { EuiCode, EuiFieldText, EuiI18n } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiFieldText,
+  EuiI18n,
+  EuiFormRow,
+} from '../../../../src/components';
 
 export default () => {
   return (
     <Fragment>
-      <p>
-        This text field&apos;s placeholder reads from{' '}
-        <EuiCode>i18n.renderpropexample</EuiCode>
-      </p>
       <div>
         <EuiI18n token="euiI18nRenderprop.placeholderName" default="John Doe">
-          {placeholderName => <EuiFieldText placeholder={placeholderName} />}
+          {placeholderName => (
+            <EuiFormRow
+              label={
+                <>
+                  This text field&apos;s placeholder reads from{' '}
+                  <EuiCode>i18n.renderpropexample</EuiCode>
+                </>
+              }>
+              <EuiFieldText placeholder={placeholderName} />
+            </EuiFormRow>
+          )}
         </EuiI18n>
       </div>
     </Fragment>

src-docs/src/views/icon/icon_types.js

@@ -39,7 +39,7 @@ export default () => (
       </EuiFlexItem>
       <EuiFlexItem className="guideDemo__icon" style={{ width: '200px' }}>
         <EuiPanel>
-          <EuiIcon type={reactSvg} size="xl" />
+          <EuiIcon type={reactSvg} size="xl" title="Custom SVG icon" />
           <EuiText size="s">
             <p>{'{reactSvg}'}</p>
           </EuiText>

src-docs/src/views/popover/input_popover.js

@@ -17,7 +17,12 @@ export default () => {
     setIsPopoverOpenTwo(shouldBeOpen);
   };
 
-  const input = <EuiFieldText onFocus={() => toggleIsPopoverOpen()} />;
+  const input = (
+    <EuiFieldText
+      onFocus={() => toggleIsPopoverOpen()}
+      aria-label="Popover attached to input element"
+    />
+  );
 
   const inputTwo = (
     <EuiFieldText
@@ -26,13 +31,13 @@ export default () => {
         toggleIsPopoverOpenTwo();
       }}
       style={{ width: inputWidth }}
+      aria-label="Popover attached to an adjustable sized input element"
     />
   );
 
   return (
     <React.Fragment>
       <EuiInputPopover
-        id="popover"
         input={input}
         isOpen={isPopoverOpen}
         closePopover={() => {
@@ -44,7 +49,6 @@ export default () => {
       <EuiSpacer />
 
       <EuiInputPopover
-        id="popover"
         input={inputTwo}
         isOpen={isPopoverOpenTwo}
         closePopover={() => {

src-docs/src/views/popover/popover.js

@@ -35,7 +35,6 @@ export default class extends Component {
 
     return (
       <EuiPopover
-        id="popover"
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}>