fix(checkbox): applies screen-reader improvements (uber#2918)

* fix(checkbox): applies screen-reader improvements * fix(checkbox): snapshots * fix(checkbox): add new types to ts defs * fix(ts): update nullability
cbranch101 · Feb 26, 2020 · cc2a2a3 · cc2a2a3
1 parent b9173fb
commit cc2a2a3
Show file tree

Hide file tree

Showing 21 changed files with 90 additions and 5 deletions.
diff --git a/src/checkbox/checkbox.js b/src/checkbox/checkbox.js
@@ -189,7 +189,8 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
         {this.isToggle() ? (
           <ToggleTrack
             role="checkbox"
-            aria-checked={checked}
+            aria-checked={isIndeterminate ? 'mixed' : checked}
+            aria-invalid={isError || null}
             {...sharedProps}
             {...getOverrideProps(ToggleTrackOverride)}
           >
@@ -204,7 +205,8 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           <Checkmark
             role="checkbox"
             checked={checked}
-            aria-checked={checked}
+            aria-checked={isIndeterminate ? 'mixed' : checked}
+            aria-invalid={isError || null}
             {...sharedProps}
             {...getOverrideProps(CheckmarkOverride)}
           />
@@ -214,6 +216,9 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           name={name}
           checked={checked}
           required={required}
+          aria-checked={isIndeterminate ? 'mixed' : checked}
+          aria-describedby={this.props['aria-describedby']}
+          aria-errormessage={this.props['aria-errormessage']}
           aria-invalid={isError || null}
           aria-required={required || null}
           disabled={disabled}

diff --git a/src/checkbox/index.d.ts b/src/checkbox/index.d.ts
@@ -84,6 +84,8 @@ export interface CheckboxOverrides {
 }
 
 export interface CheckboxProps {
+  'aria-describedby'?: string;
+  'aria-errormessage'?: string;
   children?: React.ReactNode;
   overrides?: CheckboxOverrides;
   checked?: boolean;

diff --git a/src/checkbox/types.js b/src/checkbox/types.js
@@ -41,6 +41,10 @@ export type DefaultPropsT = {
 };
 
 export type PropsT = {
+  /** Id of element which contains a related caption */
+  'aria-describedby'?: string,
+  /** Id of element which contains a related error message */
+  'aria-errormessage'?: string,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
   overrides?: OverridesT,

diff --git a/src/form-control/__tests__/form-control.test.js b/src/form-control/__tests__/form-control.test.js
@@ -45,6 +45,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
 
@@ -60,6 +61,7 @@ Object {
   "$positive": false,
   "children": "Error test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
   });
@@ -180,6 +182,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
   });
@@ -209,6 +212,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
     rendered.setProps({
@@ -231,6 +235,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
     expect(caption).toHaveText('Error test');
@@ -263,6 +268,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
   });
@@ -295,6 +301,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
 });
@@ -330,6 +337,7 @@ Object {
   "$positive": false,
   "children": "Caption test",
   "data-baseweb": "form-control-caption",
+  "id": "bui-mock-id",
 }
 `);
 });

diff --git a/src/form-control/form-control.js b/src/form-control/form-control.js
@@ -8,12 +8,13 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 import {getOverride, getOverrideProps} from '../helpers/overrides.js';
+import getBuiId from '../utils/get-bui-id.js';
 import {
   Label as StyledLabel,
   Caption as StyledCaption,
   ControlContainer as StyledControlContainer,
 } from './styled-components.js';
-import type {FormControlPropsT} from './types.js';
+import type {FormControlPropsT, FormControlStateT} from './types.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -31,14 +32,18 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
   return null;
 }
 
-export default class FormControl extends React.Component<FormControlPropsT> {
+export default class FormControl extends React.Component<
+  FormControlPropsT,
+  FormControlStateT,
+> {
   static defaultProps = {
     overrides: {},
     label: null,
     caption: null,
     error: false,
     positive: false,
   };
+  state = {captionId: getBuiId()};
 
   render() {
     const {
@@ -102,6 +107,9 @@ export default class FormControl extends React.Component<FormControlPropsT> {
             const key = child.key || String(index);
             return React.cloneElement(child, {
               key,
+              'aria-errormessage': error ? this.state.captionId : null,
+              'aria-describedby':
+                caption || positive ? this.state.captionId : null,
               disabled:
                 typeof onlyChildProps.disabled !== 'undefined'
                   ? onlyChildProps.disabled
@@ -119,6 +127,7 @@ export default class FormControl extends React.Component<FormControlPropsT> {
           {(caption || error || positive) && (
             <Caption
               data-baseweb="form-control-caption"
+              id={this.state.captionId}
               {...sharedProps}
               {...getOverrideProps(CaptionOverride)}
             >

diff --git a/src/form-control/index.d.ts b/src/form-control/index.d.ts
@@ -12,6 +12,10 @@ export interface FormControlOverrides {
   ControlContainer?: Override<any>;
 }
 
+export interface FormControlState {
+  captionId: string;
+}
+
 export interface FormControlProps {
   children: React.ReactNode;
   disabled?: boolean;
@@ -22,4 +26,7 @@ export interface FormControlProps {
   positive?: React.ReactNode;
 }
 
-export class FormControl extends React.Component<FormControlProps> {}
+export class FormControl extends React.Component<
+  FormControlProps,
+  FormControlState
+> {}
diff --git a/src/form-control/types.js b/src/form-control/types.js
@@ -9,6 +9,10 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import type {OverrideT} from '../helpers/overrides.js';
 
+export type FormControlStateT = {|
+  captionId: string,
+|};
+
 export type FormControlPropsT = {
   overrides: {
     /** Customizes the label element. */

diff --git a/src/input/__tests__/__snapshots__/base-input.test.js.snap b/src/input/__tests__/__snapshots__/base-input.test.js.snap
@@ -27,6 +27,7 @@ Object {
 exports[`BaseInput - basic functionality: Base input has correct props 1`] = `
 Object {
   "aria-describedby": null,
+  "aria-errormessage": null,
   "aria-invalid": false,
   "aria-label": null,
   "aria-labelledby": null,

diff --git a/src/input/__tests__/__snapshots__/input.test.js.snap b/src/input/__tests__/__snapshots__/input.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Input - basic functionality: input has correct props 1`] = `
 Object {
   "aria-describedby": null,
+  "aria-errormessage": null,
   "aria-invalid": false,
   "aria-label": null,
   "aria-labelledby": null,
@@ -83,6 +84,7 @@ Object {
       $required={false}
       $size="default"
       aria-describedby={null}
+      aria-errormessage={null}
       aria-invalid={false}
       aria-label={null}
       aria-labelledby={null}
@@ -147,6 +149,7 @@ Object {
       $required={false}
       $size="default"
       aria-describedby={null}
+      aria-errormessage={null}
       aria-invalid={false}
       aria-label={null}
       aria-labelledby={null}
@@ -211,6 +214,7 @@ Object {
       $required={false}
       $size="default"
       aria-describedby={null}
+      aria-errormessage={null}
       aria-invalid={false}
       aria-label={null}
       aria-labelledby={null}

diff --git a/src/input/__tests__/__snapshots__/masked-input.test.js.snap b/src/input/__tests__/__snapshots__/masked-input.test.js.snap
@@ -55,6 +55,7 @@ Object {
 exports[`MaskedInput - basic functionality: Masked input has correct props 1`] = `
 Object {
   "aria-describedby": null,
+  "aria-errormessage": null,
   "aria-invalid": false,
   "aria-label": null,
   "aria-labelledby": null,

diff --git a/src/input/base-input.js b/src/input/base-input.js
@@ -31,6 +31,7 @@ class BaseInput<T: EventTarget> extends React.Component<
   InternalStateT,
 > {
   static defaultProps = {
+    'aria-errormessage': null,
     'aria-label': null,
     'aria-labelledby': null,
     'aria-describedby': null,
@@ -277,6 +278,7 @@ class BaseInput<T: EventTarget> extends React.Component<
         <Before {...sharedProps} {...beforeProps} />
         <Input
           ref={this.inputRef}
+          aria-errormessage={this.props['aria-errormessage']}
           aria-label={this.props['aria-label']}
           aria-labelledby={this.props['aria-labelledby']}
           aria-describedby={this.props['aria-describedby']}

diff --git a/src/input/types.js b/src/input/types.js
@@ -77,6 +77,8 @@ export type InputComponentsT = {|
 |};
 
 export type BaseInputPropsT<T> = {|
+  /** Id of element which contains a related error message */
+  'aria-errormessage'?: string,
   /** Sets aria-label attribute. */
   'aria-label'?: string,
   /** Sets aria-labelledby attribute. */

diff --git a/src/radio/index.d.ts b/src/radio/index.d.ts
@@ -52,6 +52,8 @@ export interface StatefulRadioGroupProps {
 export const StatefulRadioGroup: React.FC<StatefulRadioGroupProps>;
 
 export interface RadioGroupProps {
+  'aria-describedby'?: string;
+  'aria-errormessage'?: string;
   'aria-label'?: string;
   'aria-labelledby'?: string;
   overrides?: RadioOverrides & RadioGroupOverrides;

diff --git a/src/radio/radiogroup.js b/src/radio/radiogroup.js
@@ -76,6 +76,9 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
     return (
       <RadioGroupRoot
         role="radiogroup"
+        aria-describedby={this.props['aria-describedby']}
+        aria-errormessage={this.props['aria-errormessage']}
+        aria-invalid={this.props.isError || null}
         aria-label={this.props['aria-label']}
         aria-labelledby={this.props['aria-labelledby']}
         $align={this.props.align}

diff --git a/src/radio/types.js b/src/radio/types.js
@@ -42,6 +42,10 @@ export type DefaultPropsT = {
 };
 
 export type PropsT = {
+  /** Id of element which contains a related caption */
+  'aria-describedby'?: string,
+  /** Id of element which contains a related error message */
+  'aria-errormessage'?: string,
   /**
    * Used to define a string that labels the radio group. Use this prop if the label is not
    * visible on screen. If the label is visible, use the 'aria-labeledby' prop instead.