Add ARIA roles to child content container (#315)

* initial add of choice children example for React (WIP) * Add checkedChildren to the choice example and remove from choiceList. * Add ARIA roles to container of checkedChildren * Update example radio names and values * Fix jest snapshot of Month picker * Update choice example - add fieldsets and make naming consistent. * Explicitly set the locale to 'en' in the snapshot test for MonthPicker
CMSgov · Feb 15, 2019 · 783cc28 · 783cc28
1 parent 0c33cd5
commit 783cc28
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 43 deletions.
diff --git a/packages/core/src/components/ChoiceList/Choice.example.jsx b/packages/core/src/components/ChoiceList/Choice.example.jsx
@@ -1,32 +1,94 @@
 import Choice from './Choice';
+import ChoiceList from './ChoiceList';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+const selectChoices = [
+  { label: 'A', value: 'A' },
+  { defaultChecked: true, label: 'B', value: 'B' },
+  { label: 'C', value: 'C' },
+  { label: 'D', value: 'D' },
+  { label: 'E', value: 'E' },
+  { label: 'F', value: 'F' },
+  { label: 'G', value: 'G' },
+  { label: 'H', value: 'H' }
+];
+
+const childSelect = (
+  <ChoiceList
+    choices={selectChoices}
+    label="Select example"
+    className=""
+    name="select_choices_field"
+  />
+);
+
 ReactDOM.render(
   <div>
-    <Choice
-      defaultChecked
-      hint="Checkbox A hint"
-      name="checkbox_choice"
-      value="a"
-    >
-      Checkbox A
-    </Choice>
-    <Choice name="checkbox_choice" value="b">
-      Checkbox B
-    </Choice>
-    <Choice name="checkbox_choice" value="c">
-      Checkbox C
-    </Choice>
+    <fieldset className="ds-c-fieldset">
+      <legend className="ds-c-label">Checkbox example</legend>
+      <Choice
+        defaultChecked
+        hint="Checkbox A hint"
+        name="checkbox_choice"
+        value="a"
+      >
+        Checkbox A
+      </Choice>
+      <Choice name="checkbox_choice" value="b">
+        Checkbox B
+      </Choice>
+      <Choice name="checkbox_choice" value="c">
+        Checkbox C
+      </Choice>
+    </fieldset>
+
+    <fieldset className="ds-c-fieldset">
+      <legend className="ds-c-label">Checkbox example with children</legend>
+      <Choice
+        hint="Checkbox A hint"
+        defaultChecked
+        name="checkbox_choice_children"
+        value="a"
+      >
+        Checkbox A
+      </Choice>
+      <Choice
+        name="checkbox_choice_children"
+        value="b"
+        checkedChildren={childSelect}
+      >
+        Checkbox B - with children
+      </Choice>
+      <Choice name="checkbox_choice_children" value="c">
+        Checkbox C
+      </Choice>
+    </fieldset>
 
-    <div className="ds-u-margin-top--4">
-      <Choice defaultChecked name="radio_choice" type="radio" value="a">
+    <fieldset className="ds-c-fieldset">
+      <legend className="ds-c-label">Radio example</legend>
+      <Choice name="radio_choice" type="radio" value="a">
         Radio A
       </Choice>
       <Choice name="radio_choice" type="radio" value="b">
         Radio B
       </Choice>
-    </div>
+    </fieldset>
+
+    <fieldset className="ds-c-fieldset">
+      <legend className="ds-c-label">Radio example with children</legend>
+      <Choice name="radio_choice_children" type="radio" value="c">
+        Radio A
+      </Choice>
+      <Choice
+        name="radio_choice_children"
+        type="radio"
+        value="d"
+        checkedChildren={childSelect}
+      >
+        Radio B - with children
+      </Choice>
+    </fieldset>
   </div>,
   document.getElementById('js-example')
 );
diff --git a/packages/core/src/components/ChoiceList/Choice.jsx b/packages/core/src/components/ChoiceList/Choice.jsx
@@ -104,7 +104,12 @@ export class Choice extends React.PureComponent {
     if (inputProps.onChange) delete inputProps.onChange;
 
     return (
-      <div className={className}>
+      <div
+        className={className}
+        aria-live={checkedChildren ? 'polite' : null}
+        aria-relevant={checkedChildren ? 'additions text' : null}
+        aria-atomic={checkedChildren ? 'false' : null}
+      >
         <input
           className={inputClasses}
           id={this.id}

diff --git a/packages/core/src/components/MonthPicker/MonthPicker.test.jsx b/packages/core/src/components/MonthPicker/MonthPicker.test.jsx
@@ -237,7 +237,7 @@ describe('MonthPicker', () => {
 
   it('renders a snapshot', () => {
     const tree = renderer
-      .create(<MonthPicker name="months" label="Months" />)
+      .create(<MonthPicker name="months" label="Months" locale="en" />)
       .toJSON();
 
     expect(tree).toMatchSnapshot();