Added axe tests to form controls, error boundaries and inner text doc…

… pages
elastic · Mar 24, 2020 · dcbcccc · dcbcccc
1 parent 0def6f1
commit dcbcccc
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 40 deletions.
diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
@@ -47,6 +47,7 @@ const docsPages = async (root, page) => {
     `${root}#/display/title`,
     `${root}#/display/toast`,
     `${root}#/display/tooltip`,
+    `${root}#/forms/form-controls`,
     `${root}#/forms/form-layouts`,
     `${root}#/forms/form-validation`,
     `${root}#/forms/code-editor`,
@@ -74,6 +75,8 @@ const docsPages = async (root, page) => {
     `${root}#/utilities/delay-hide`,
     `${root}#/utilities/delay-render`,
     `${root}#/utilities/highlight`,
+    `${root}#/utilities/error-boundary`,
+    `${root}#/utilities/inner-text`,
   ];
 
   links = [...links, ...reflinks];

diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
@@ -70,6 +70,7 @@ export class FilePicker extends Component {
                   this.onChange(files);
                 }}
                 display={this.state.large ? 'large' : 'default'}
+                aria-label="Use aria labels when no actual label is in use"
               />
             </DisplayToggles>
             <EuiSpacer />

diff --git a/src-docs/src/views/form_controls/form_control_layout.js b/src-docs/src/views/form_controls/form_control_layout.js
@@ -11,57 +11,93 @@ import {
 export default () => (
   <Fragment>
     <EuiFormControlLayout icon="search">
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout clear={{ onClick: () => {} }}>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading clear={{ onClick: () => {} }}>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading icon="search">
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout
       clear={{ onClick: () => {} }}
       icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
@@ -70,13 +106,21 @@ export default () => (
       isLoading
       clear={{ onClick: () => {} }}
       icon={{ type: 'arrowDown', side: 'right' }}>
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
 
     <EuiFormControlLayout isLoading clear={{ onClick: () => {} }} icon="search">
-      <input type="text" className="euiFieldText" />
+      <input
+        type="text"
+        className="euiFieldText"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
@@ -111,7 +155,11 @@ export default () => (
           <strong>%</strong>
         </EuiText>
       }>
-      <input type="number" className="euiFieldNumber euiFieldNumber--inGroup" />
+      <input
+        type="number"
+        className="euiFieldNumber euiFieldNumber--inGroup"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
 
     <EuiSpacer size="m" />
@@ -124,7 +172,11 @@ export default () => (
           Button
         </EuiButtonEmpty>
       }>
-      <input type="text" className="euiFieldText euiFieldText--inGroup" />
+      <input
+        type="text"
+        className="euiFieldText euiFieldText--inGroup"
+        aria-label="Use aria labels when no actual label is in use"
+      />
     </EuiFormControlLayout>
   </Fragment>
 );