Dmirano/4551 ffp screen reader bug (#4640)

* updated ChoiceList component

* choiceList test

* unit test for new ChoiceList componenet

* updated imports

* added choiceList story

web/src/components/ApdUpdate.js

@@ -4,7 +4,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { connect } from 'react-redux';
 
 import { apdTypeToOverviewSchemaMapping, APD_TYPE } from '@cms-eapd/common';
-import { ChoiceList } from '@cmsgov/design-system';
+import ChoiceList from './ChoiceList';
 import { joiResolver } from '@hookform/resolvers/joi';
 
 import {

web/src/components/ChoiceList.js

@@ -0,0 +1,24 @@
+import { ChoiceList } from '@cmsgov/design-system';
+import React, { useEffect, useRef } from 'react';
+
+const ChoiceListComponent = props => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const ariaRegions = ref.current.querySelectorAll('[aria-live]');
+
+    ariaRegions.forEach(region => {
+      region.removeAttribute('aria-live');
+      region.removeAttribute('aria-relevant');
+      region.removeAttribute('aria-atomic');
+    });
+  }, []);
+
+  return (
+    <div ref={ref}>
+      <ChoiceList {...props} />
+    </div>
+  );
+};
+
+export default ChoiceListComponent;

web/src/components/ChoiceList.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import ChoiceList from './ChoiceList';
+
+export default {
+  title: 'Components/ChoiceList',
+  component: ChoiceList,
+  includeStories: /.*Story$/,
+  parameters: {
+    jest: ['ChoiceList.test.js'],
+    controls: {
+      include: ['size'],
+      hideNoControlsWarning: true
+    }
+  },
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium'] }
+  }
+};
+
+const Template = args => <ChoiceList {...args} />;
+
+export const CheckboxStory = Template.bind({});
+CheckboxStory.args = {
+  type: 'checkbox',
+  choices: [
+    {
+      label: 'firstChoice',
+      value: 'first',
+      checked: false
+    },
+    {
+      label: 'secondChoice',
+      value: 'second',
+      checked: false
+    }
+  ],
+  name: 'checkboxList-name',
+  label: 'ChoiceList',
+  size: 'medium'
+};
+
+export const RadioStory = Template.bind({});
+RadioStory.args = {
+  type: 'radio',
+  choices: [
+    {
+      label: 'firstChoice',
+      value: 'first',
+      checked: true
+    },
+    {
+      label: 'secondChoice',
+      value: 'second',
+      checked: false
+    }
+  ],
+  name: 'radioList-name',
+  label: 'ChoiceList',
+  size: 'medium'
+};

web/src/components/ChoiceList.test.js

@@ -0,0 +1,155 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+
+import ChoiceList from './ChoiceList';
+
+const checkedChildren = (
+  <div className="ds-c-choiceList__checkedChild">
+    <ChoiceList
+      label="checkedChlildrenChoiceList"
+      choices={[
+        {
+          label: 'firstChild',
+          value: 'firstChild',
+          checked: true
+        },
+        {
+          label: 'secondChild',
+          value: 'secondChild',
+          checked: false
+        }
+      ]}
+      type="radio"
+      size="small"
+    />
+  </div>
+);
+
+describe('ChoiceList wrapper component', () => {
+  it('renders correctly without checkedChildren', () => {
+    const component = shallow(
+      <ChoiceList
+        label="choiceList-no-children"
+        choices={[
+          {
+            label: 'firstChoice',
+            value: 'first',
+            checked: false
+          },
+          {
+            label: 'secondChoice',
+            value: 'second',
+            checked: false
+          },
+          {
+            label: 'thirdChoice',
+            value: 'third',
+            checked: true
+          }
+        ]}
+        type="radio"
+        size="small"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders correctly with checkedChildren when unchecked', () => {
+    const component = shallow(
+      <ChoiceList
+        label="choiceList-with-children"
+        choices={[
+          {
+            label: 'firstChoice',
+            value: 'first',
+            checked: false,
+            checkedChildren
+          },
+          {
+            label: 'secondChoice',
+            value: 'second',
+            checked: false,
+            checkedChildren
+          },
+          {
+            label: 'thirdChoice',
+            value: 'third',
+            checked: false,
+            checkedChildren
+          }
+        ]}
+        type="radio"
+        name="choiceList-with-children"
+        size="small"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('renders correctly with checkedChildren when checked', () => {
+    const component = shallow(
+      <ChoiceList
+        label="choiceList-with-children"
+        choices={[
+          {
+            label: 'firstChoice',
+            value: 'first',
+            checked: true,
+            checkedChildren
+          },
+          {
+            label: 'secondChoice',
+            value: 'second',
+            checked: false,
+            checkedChildren
+          },
+          {
+            label: 'thirdChoice',
+            value: 'third',
+            checked: false,
+            checkedChildren
+          }
+        ]}
+        type="radio"
+        name="choiceList-with-children"
+        size="small"
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  it('removes ARIA components from checkedChildren', () => {
+    const component = mount(
+      <div className="ds-c-choiceList">
+        <ChoiceList
+          label="choiceList-no-children"
+          choices={[
+            {
+              label: 'firstChoice',
+              value: 'first',
+              checked: false
+            },
+            {
+              label: 'secondChoice',
+              value: 'second',
+              checked: false
+            },
+            {
+              label: 'thirdChoice',
+              value: 'third',
+              checked: true
+            }
+          ]}
+          type="radio"
+          size="small"
+        />
+      </div>
+    );
+
+    // eslint-disable-next-line testing-library/render-result-naming-convention
+    const child = component.find('.ds-c-choiceList').render();
+    expect(child[0].attribs['aria-live']).toBeFalsy();
+    expect(child[0].attribs['aria-relevant']).toBeFalsy();
+    expect(child[0].attribs['aria-atomic']).toBeFalsy();
+  });
+});

web/src/components/MedicaidBusinessAreas.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import TextArea from './TextArea';
 import { MEDICAID_BUSINESS_AREAS_DISPLAY_LABEL_MAPPING } from '@cms-eapd/common';
-import { ChoiceList } from '@cmsgov/design-system';
+import ChoiceList from './ChoiceList';
 import { Controller, useFormContext } from 'react-hook-form';
 
 const MedicaidBusinessAreas = ({