Adds axe testing for EUI utilities (#3035)

elastic · Mar 11, 2020 · f416a41 · f416a41
1 parent 7d95335
commit f416a41
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 13 deletions.
diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
@@ -14,6 +14,12 @@ const docsPages = async (root, page) => {
     `${root}#/forms/range-sliders`,
     `${root}#/display/progress`,
     `${root}#/display/loading`,
+    `${root}#/utilities/accessibility`,
+    `${root}#/utilities/context`,
+    `${root}#/utilities/copy`,
+    `${root}#/utilities/delay-hide`,
+    `${root}#/utilities/delay-render`,
+    `${root}#/utilities/highlight`,
   ];
 
   links = [...links, ...reflinks];

diff --git a/src-docs/src/views/accessibility/screen_reader.tsx b/src-docs/src/views/accessibility/screen_reader.tsx
@@ -10,7 +10,7 @@ export default () => (
   <div>
     <EuiText>
       <EuiTitle size="xxs">
-        <h4>Visually hide content</h4>
+        <h3>Visually hide content</h3>
       </EuiTitle>
       <p>
         <em>

diff --git a/src-docs/src/views/context/context.js b/src-docs/src/views/context/context.js
@@ -75,14 +75,16 @@ export default class extends Component {
           <EuiSpacer size="m" />
 
           <EuiI18n
-            tokens={['euiContext.question', 'euiContext.action']}
-            defaults={['What is your name?', 'Submit']}>
-            {([question, action]) => (
+            tokens={[
+              'euiContext.question',
+              'euiContext.action',
+              'euiContext.placeholder',
+            ]}
+            defaults={['What is your name?', 'Submit', 'John Doe']}>
+            {([question, action, placeholder]) => (
               <Fragment>
                 <EuiFormRow label={question}>
-                  <EuiI18n token="euiContext.placeholder" default="John Doe">
-                    {placeholder => <EuiFieldText placeholder={placeholder} />}
-                  </EuiI18n>
+                  <EuiFieldText placeholder={placeholder} />
                 </EuiFormRow>
 
                 <EuiSpacer />

diff --git a/src-docs/src/views/copy/copy.js b/src-docs/src/views/copy/copy.js
@@ -5,6 +5,7 @@ import {
   EuiButton,
   EuiFieldText,
   EuiSpacer,
+  EuiFormRow,
 } from '../../../../src/components/';
 
 export default class extends Component {
@@ -21,11 +22,9 @@ export default class extends Component {
   render() {
     return (
       <div>
-        <EuiFieldText
-          placeholder="Enter text that will be copied to clipboard"
-          value={this.state.copyText}
-          onChange={this.onChange}
-        />
+        <EuiFormRow label="Enter text that will be copied to clipboard">
+          <EuiFieldText value={this.state.copyText} onChange={this.onChange} />
+        </EuiFormRow>
 
         <EuiSpacer size="m" />
 

diff --git a/src-docs/src/views/highlight/highlight.js b/src-docs/src/views/highlight/highlight.js
@@ -3,6 +3,7 @@ import React, { Component, Fragment } from 'react';
 import {
   EuiHighlight,
   EuiFieldSearch,
+  EuiFormRow,
   EuiSpacer,
   EuiSwitch,
 } from '../../../../src/components';
@@ -32,7 +33,9 @@ export class Highlight extends Component {
     const { searchValue, isHighlightAll } = this.state;
     return (
       <Fragment>
-        <EuiFieldSearch value={searchValue} onChange={this.onSearchChange} />
+        <EuiFormRow label="Enter text to highlight substrings within a string">
+          <EuiFieldSearch value={searchValue} onChange={this.onSearchChange} />
+        </EuiFormRow>
 
         <EuiSpacer size="m" />
         <EuiSwitch