Aria labeling for docs of plain form controls, aria-invalid attrib on…

… EuiFormRow (#799) * aria labeling of naked form controls * aria invalid labeling
elastic · May 7, 2018 · 8de9311 · 8de9311
1 parent b29bbea
commit 8de9311
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 **Bug fixes**
 
+- Added aria-invalid labeling on `EuiFormRow` ([#777](https://github.com/elastic/eui/pull/799))
 - Added aria-live labeling for `EuiToasts` ([#777](https://github.com/elastic/eui/pull/777))
 - Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777))
 - Ensure switches’ inputs are still hidden when `[disabled]` ([#778](https://github.com/elastic/eui/pull/778))

diff --git a/src-docs/src/views/form_controls/field_number.js b/src-docs/src/views/form_controls/field_number.js
@@ -31,6 +31,7 @@ export default class extends Component {
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -40,6 +41,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -49,6 +51,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -59,6 +62,7 @@ export default class extends Component {
           onChange={this.onChange}
           disabled
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -68,6 +72,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           readOnly
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/field_password.js b/src-docs/src/views/form_controls/field_password.js
@@ -30,6 +30,7 @@ export default class extends Component {
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -39,6 +40,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -48,6 +50,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -58,6 +61,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
@@ -30,6 +30,7 @@ export default class extends Component {
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -39,6 +40,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -48,6 +50,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -58,6 +61,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -67,6 +71,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           readOnly
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/field_text.js b/src-docs/src/views/form_controls/field_text.js
@@ -30,6 +30,7 @@ export default class extends Component {
           placeholder="Placeholder text"
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -39,6 +40,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -48,6 +50,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -58,6 +61,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -67,6 +71,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           readOnly
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js
@@ -34,6 +34,7 @@ export default class extends Component {
           max={200}
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -45,6 +46,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js
@@ -36,6 +36,7 @@ export default class extends Component {
           options={this.options}
           value={this.state.value}
           onChange={this.onChange}
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -45,6 +46,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -54,6 +56,7 @@ export default class extends Component {
           value={this.state.value}
           onChange={this.onChange}
           isLoading
+          aria-label="Use aria labels when no actual label is in use"
         />
 
         <EuiSpacer size="m" />
@@ -64,6 +67,7 @@ export default class extends Component {
           onChange={this.onChange}
           isLoading
           disabled
+          aria-label="Use aria labels when no actual label is in use"
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/form_controls/text_area.js b/src-docs/src/views/form_controls/text_area.js
@@ -28,6 +28,7 @@ export default class extends Component {
       <Fragment>
         <EuiTextArea
           placeholder="Placeholder text"
+          aria-label="Use aria labels when no actual label is in use"
           value={this.state.value}
           onChange={this.onChange}
         />
@@ -36,6 +37,7 @@ export default class extends Component {
 
         <EuiTextArea
           placeholder="Disabled"
+          aria-label="Use aria labels when no actual label is in use"
           value={this.state.value}
           onChange={this.onChange}
           disabled
@@ -45,6 +47,7 @@ export default class extends Component {
 
         <EuiTextArea
           placeholder="Read-only"
+          aria-label="Use aria labels when no actual label is in use"
           value={this.state.value}
           onChange={this.onChange}
           readOnly

diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -342,11 +342,13 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                 id="generated-id-row"
               >
                 <EuiFormLabel
+                  aria-invalid={true}
                   htmlFor="generated-id"
                   isFocused={false}
                   isInvalid={true}
                 >
                   <label
+                    aria-invalid={true}
                     className="euiFormLabel euiFormLabel-isInvalid"
                     htmlFor="generated-id"
                   >
@@ -365,6 +367,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                   key="Error one"
                 >
                   <div
+                    aria-live="polite"
                     className="euiFormErrorText euiFormRow__text"
                     id="generated-id-error-0"
                   >
@@ -377,6 +380,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                   key="Error two"
                 >
                   <div
+                    aria-live="polite"
                     className="euiFormErrorText euiFormRow__text"
                     id="generated-id-error-1"
                   >

diff --git a/src/components/form/form_error_text/__snapshots__/form_error_text.test.js.snap b/src/components/form/form_error_text/__snapshots__/form_error_text.test.js.snap
@@ -3,6 +3,7 @@
 exports[`EuiFormErrorText is rendered 1`] = `
 <div
   aria-label="aria-label"
+  aria-live="polite"
   class="euiFormErrorText testClass1 testClass2"
   data-test-subj="test subject string"
 >

diff --git a/src/components/form/form_error_text/form_error_text.js b/src/components/form/form_error_text/form_error_text.js
@@ -8,6 +8,7 @@ export const EuiFormErrorText = ({ children, className, ...rest }) => {
   return (
     <div
       className={classes}
+      aria-live="polite"
       {...rest}
     >
       {children}

diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
@@ -185,12 +185,14 @@ exports[`EuiFormRow props error as array is rendered 1`] = `
     id="generated-id"
   />
   <div
+    aria-live="polite"
     class="euiFormErrorText euiFormRow__text"
     id="generated-id-error-0"
   >
     Error
   </div>
   <div
+    aria-live="polite"
     class="euiFormErrorText euiFormRow__text"
     id="generated-id-error-1"
   >
@@ -209,6 +211,7 @@ exports[`EuiFormRow props error as string is rendered 1`] = `
     id="generated-id"
   />
   <div
+    aria-live="polite"
     class="euiFormErrorText euiFormRow__text"
     id="generated-id-error-0"
   >
@@ -287,6 +290,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
   id="generated-id-row"
 >
   <label
+    aria-invalid="true"
     class="euiFormLabel euiFormLabel-isInvalid"
     for="generated-id"
   >

diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js
@@ -102,22 +102,25 @@ export class EuiFormRow extends Component {
         <EuiFormLabel
           isFocused={this.state.isFocused}
           isInvalid={isInvalid}
+          aria-invalid={isInvalid}
           htmlFor={id}
         >
           {label}
         </EuiFormLabel>
       );
     }
 
+    const optionalProps = {};
     const describingIds = [...describedByIds];
+
     if (optionalHelpText) {
       describingIds.push(optionalHelpText.props.id);
     }
+
     if (optionalErrors) {
       optionalErrors.forEach(error => describingIds.push(error.props.id));
     }
 
-    const optionalProps = {};
     if (describingIds.length > 0) {
       optionalProps[`aria-describedby`] = describingIds.join(` `);
     }