fix: various form accessibility improvements (#1688)

tjgupta · mergify[bot] · commit 150cbbe5877d · 2019-10-24T18:17:58.000Z
* fix: various form accessibility improvements

* fix: various form accessibility improvements

* fix: various form accessibility improvements
diff --git a/examples/src/SelectorDropdownExamples.js b/examples/src/SelectorDropdownExamples.js
@@ -56,7 +56,7 @@ class SelectorDropdownContainer extends Component {
         const dropdownTitle = <div>This is a Title</div>;
 
         return (
-            <div>
+            <div style={{ paddingBottom: '330px' }}>
                 <SelectorDropdown
                     onSelect={this.handleItemSelection}
                     selector={
diff --git a/src/components/pill-selector-dropdown/PillSelector.js b/src/components/pill-selector-dropdown/PillSelector.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
 
 import Tooltip from '../tooltip';
 import { KEYS } from '../../constants';
@@ -140,6 +141,8 @@ class PillSelector extends React.Component<Props, State> {
         }
     };
 
+    errorMessageID = uniqueId('errorMessage');
+
     hiddenRef = (hiddenEl: ?HTMLSpanElement) => {
         if (hiddenEl) {
             this.hiddenEl = hiddenEl;
@@ -172,15 +175,20 @@ class PillSelector extends React.Component<Props, State> {
             ...rest
         } = this.props;
         const suggestedPillsEnabled = suggestedPillsData && suggestedPillsData.length > 0;
+        const hasError = !!error;
         const classes = classNames('pill-selector-input-wrapper', {
             'is-disabled': disabled,
             'is-focused': isFocused,
-            'show-error': !!error,
+            'show-error': hasError,
             'pill-selector-suggestions-enabled': suggestedPillsEnabled,
         });
+        const ariaAttrs = {
+            'aria-invalid': hasError,
+            'aria-errormessage': this.errorMessageID,
+        };
 
         return (
-            <Tooltip isShown={!!error} text={error || ''} position="middle-right" theme="error">
+            <Tooltip isShown={hasError} text={error || ''} position="middle-right" theme="error">
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}
@@ -207,8 +215,10 @@ class PillSelector extends React.Component<Props, State> {
                         onBlur={this.resetSelectedIndex}
                         ref={this.hiddenRef}
                         tabIndex={-1}
+                        data-testid="pill-selection-helper"
                     />
                     <textarea
+                        {...ariaAttrs}
                         {...rest}
                         {...inputProps}
                         autoComplete="off"
@@ -227,6 +237,9 @@ class PillSelector extends React.Component<Props, State> {
                         suggestedPillsData={suggestedPillsData}
                         title={suggestedPillsTitle}
                     />
+                    <span id={this.errorMessageID} className="accessibility-hidden" role="alert">
+                        {error}
+                    </span>
                 </span>
             </Tooltip>
         );
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
@@ -137,9 +137,9 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             ).toBe(true);
         });
 
-        test('should render hidden element', () => {
+        test('should render hidden pill selection helper', () => {
             const wrapper = shallow(<PillSelector onInput={onInputStub} onRemove={onRemoveStub} />);
-            const hidden = wrapper.find('.accessibility-hidden');
+            const hidden = wrapper.find('[data-testid="pill-selection-helper"]');
             const instance = wrapper.instance();
 
             expect(hidden.length).toBe(1);
@@ -328,7 +328,7 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
                 <PillSelector onInput={onInputStub} onRemove={onRemoveStub} selectedOptions={options} />,
             );
 
-            sandbox.mock(wrapper.find('.accessibility-hidden').getDOMNode()).expects('focus');
+            sandbox.mock(wrapper.find('[data-testid="pill-selection-helper"]').getDOMNode()).expects('focus');
 
             wrapper.simulate('keyDown', {
                 key: 'ArrowLeft',
diff --git a/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.js.snap b/src/components/pill-selector-dropdown/__tests__/__snapshots__/PillSelector.test.js.snap
@@ -20,10 +20,13 @@ exports[`components/pill-selector-dropdown/PillSelector render() should render d
     <span
       aria-hidden="true"
       className="accessibility-hidden"
+      data-testid="pill-selection-helper"
       onBlur={[Function]}
       tabIndex={-1}
     />
     <textarea
+      aria-errormessage="errorMessage2"
+      aria-invalid={false}
       autoComplete="off"
       className="pill-selector-input"
       disabled={true}
@@ -33,6 +36,11 @@ exports[`components/pill-selector-dropdown/PillSelector render() should render d
     <SuggestedPillsRow
       selectedPillsValues={Array []}
     />
+    <span
+      className="accessibility-hidden"
+      id="errorMessage2"
+      role="alert"
+    />
   </span>
 </Tooltip>
 `;
diff --git a/src/components/text-area/TextArea.js b/src/components/text-area/TextArea.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
 
 import Label from '../label';
 import Tooltip from '../tooltip';
@@ -34,21 +35,33 @@ const TextArea = ({
     textareaRef,
     ...rest
 }: Props) => {
+    const hasError = !!error;
     const classes = classNames(className, 'text-area-container', {
-        'show-error': !!error,
+        'show-error': hasError,
     });
 
+    const errorMessageID = React.useRef(uniqueId('errorMessage')).current;
+    const ariaAttrs = {
+        'aria-invalid': hasError,
+        'aria-required': isRequired,
+        'aria-errormessage': errorMessageID,
+    };
+
     return (
         <div className={classes}>
             <Label hideLabel={hideLabel} showOptionalText={!hideOptionalLabel && !isRequired} text={label}>
-                <Tooltip isShown={!!error} position="bottom-left" text={error || ''} theme="error">
+                <Tooltip isShown={hasError} position="bottom-left" text={error || ''} theme="error">
                     <textarea
                         ref={textareaRef}
                         required={isRequired}
                         style={{ resize: isResizable ? '' : 'none' }}
+                        {...ariaAttrs}
                         {...rest}
                     />
                 </Tooltip>
+                <span id={errorMessageID} className="accessibility-hidden" role="alert">
+                    {error}
+                </span>
             </Label>
         </div>
     );
diff --git a/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap b/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap
@@ -18,13 +18,20 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
       theme="error"
     >
       <textarea
+        aria-errormessage="errorMessage10"
+        aria-invalid={false}
         style={
           Object {
             "resize": "none",
           }
         }
       />
     </Tooltip>
+    <span
+      className="accessibility-hidden"
+      id="errorMessage10"
+      role="alert"
+    />
   </Label>
 </div>
 `;
@@ -47,13 +54,20 @@ exports[`components/text-area/TextArea should show optional text when hideOption
       theme="error"
     >
       <textarea
+        aria-errormessage="errorMessage11"
+        aria-invalid={false}
         style={
           Object {
             "resize": "none",
           }
         }
       />
     </Tooltip>
+    <span
+      className="accessibility-hidden"
+      id="errorMessage11"
+      role="alert"
+    />
   </Label>
 </div>
 `;
diff --git a/src/components/text-input/TextInput.js b/src/components/text-input/TextInput.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
+import uniqueId from 'lodash/uniqueId';
 
 import IconVerified from '../../icons/general/IconVerified';
 
@@ -49,10 +50,18 @@ const TextInput = ({
     labelTooltip,
     ...rest
 }: Props) => {
+    const hasError = !!error;
     const classes = classNames(className, 'text-input-container', {
-        'show-error': !!error,
+        'show-error': hasError,
     });
 
+    const errorMessageID = React.useRef(uniqueId('errorMessage')).current;
+    const ariaAttrs = {
+        'aria-invalid': hasError,
+        'aria-required': isRequired,
+        'aria-errormessage': errorMessageID,
+    };
+
     return (
         <div className={classes}>
             <Label
@@ -62,11 +71,14 @@ const TextInput = ({
                 tooltip={labelTooltip}
             >
                 {!!description && <i className="text-input-description">{description}</i>}
-                <Tooltip isShown={!!error} position={errorPosition || 'middle-right'} text={error || ''} theme="error">
-                    <input ref={inputRef} required={isRequired} {...rest} />
+                <Tooltip isShown={hasError} position={errorPosition || 'middle-right'} text={error || ''} theme="error">
+                    <input ref={inputRef} required={isRequired} {...ariaAttrs} {...rest} />
                 </Tooltip>
                 {isLoading && !isValid && <LoadingIndicator className="text-input-loading" />}
                 {isValid && !isLoading && <IconVerified className="text-input-verified" />}
+                <span id={errorMessageID} className="accessibility-hidden" role="alert">
+                    {error}
+                </span>
             </Label>
         </div>
     );
diff --git a/src/components/text-input/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/text-input/__tests__/__snapshots__/TextInput.test.js.snap
@@ -21,8 +21,16 @@ exports[`components/text-input/TextInput should render text input with descripti
       text=""
       theme="error"
     >
-      <input />
+      <input
+        aria-errormessage="errorMessage20"
+        aria-invalid={false}
+      />
     </Tooltip>
+    <span
+      className="accessibility-hidden"
+      id="errorMessage20"
+      role="alert"
+    />
   </Label>
 </div>
 `;
diff --git a/src/features/unified-share-modal/EmailForm.js b/src/features/unified-share-modal/EmailForm.js
@@ -338,7 +338,7 @@ class EmailForm extends React.Component<Props, State> {
                             <FormattedMessage {...commonMessages.cancel} />
                         </Button>
                         <PrimaryButton
-                            isDisabled={submitting || selectedContacts.length === 0 || contactsFieldError} // Check selectedContacts.length === 0 for initial render when contactsFieldError is empty
+                            isDisabled={submitting}
                             isLoading={submitting}
                             type="submit"
                             {...sendButtonProps}
diff --git a/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap b/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap
@@ -214,7 +214,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       />
     </Button>
     <PrimaryButton
-      isDisabled={true}
+      isDisabled={false}
       isLoading={false}
       type="submit"
     >
@@ -292,7 +292,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       />
     </Button>
     <PrimaryButton
-      isDisabled={true}
+      isDisabled={false}
       isLoading={false}
       type="submit"
     >
@@ -420,7 +420,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       />
     </Button>
     <PrimaryButton
-      isDisabled={true}
+      isDisabled={false}
       isLoading={false}
       type="submit"
     >
@@ -503,7 +503,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       />
     </Button>
     <PrimaryButton
-      isDisabled={true}
+      isDisabled={false}
       isLoading={false}
       type="submit"
     >
@@ -597,7 +597,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       />
     </Button>
     <PrimaryButton
-      isDisabled={true}
+      isDisabled={false}
       isLoading={false}
       type="submit"
     >
