Use appropriate grouping markup including legend/label/fieldset for c…

…heckbox groups (#2590)

* fix calls to <Choice/> and <ChoiceList/> components
* upgrade to @cms/design-system v2.1.0
* update syntax for ds v2.1
* update changelog
* bump resolve-url-loader patch level

CHANGELOG.md

@@ -11,6 +11,7 @@ Anticipated release: October 26th, 2020
 - Metrics: Hook the export button into the API ([#2142])
 - Replace the “Cost Allocation and Budget for FFY 2020” table with part of the new "Summary Budget by Activity” table ([#2306])
 - Other funding amount should be represented as a subtraction on Activity Breakdown table ([#2429])
+- Where groups of checkboxes are used, use appropriate grouping markup including legend/label/fieldset ([#2545])
 - Updates tables to increase accessibility ([#2501])
 - Updates markup to use semantic `<nav>` and `<main>` where appropriate ([#2502])
 - Updated inputs in the Estimated Quarterly Incentive Payments table to use aria-labelledby for better UX/a11y ([#2503])
@@ -21,6 +22,7 @@ Anticipated release: October 26th, 2020
 
 #### ⚙️ Behind the scenes
 
+- Update @cmsgov/design-system to v2.1.1 [[releases](https://github.com/CMSgov/design-system/releases)]
 - Refactor use of Dropdown component ([#2471])
 
 # Previous releases
@@ -36,6 +38,7 @@ See our [release history](https://github.com/CMSgov/eAPD/releases)
 [#2142]: https://github.com/CMSgov/eAPD/issues/2142
 [#2306]: https://github.com/CMSgov/eAPD/issues/2306
 [#2429]: https://github.com/CMSgov/eAPD/issues/2429
+[#2545]: https://github.com/CMSgov/eAPD/issues/2545
 [#2501]: https://github.com/CMSgov/eAPD/issues/2501
 [#2502]: https://github.com/CMSgov/eAPD/issues/2502
 [#2503]: https://github.com/CMSgov/eAPD/issues/2503

web/package.json

@@ -58,7 +58,7 @@
   "homepage": "https://github.com/CMSgov/eAPD#readme",
   "dependencies": {
     "@babel/polyfill": "^7.8.7",
-    "@cmsgov/design-system": "^2.0.0",
+    "@cmsgov/design-system": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
@@ -139,7 +139,7 @@
     "react-test-renderer": "^16.13.1",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.4",
-    "resolve-url-loader": "^3.1.1",
+    "resolve-url-loader": "^3.1.2",
     "sass-loader": "^8.0.2",
     "sinon": "^8.1.1",
     "style-loader": "^1.1.3",

web/src/components/PasswordWithMeter.js

@@ -47,15 +47,15 @@ class Password extends Component {
       <div className={className || undefined}>
         <div className="password-input">
           <Choice
-            className="password-input--show-password ds-u-float--right"
             checked={showPassword}
-            name="show password"
-            value="Show password"
+            className="password-input--show-password ds-u-float--right"
+            label="Show password"
+            name="show-password"
             onChange={this.toggleShowPassword}
             size="small"
-          >
-            Show password
-          </Choice>
+            type="checkbox"
+            value="on"
+          />
 
           <TextField
             hint={

web/src/containers/ApdKeyPerson/ApdKeyPersonForm.js

@@ -76,20 +76,20 @@ const PersonForm = ({
       <fieldset className="ds-c-fieldset">
         <legend className="ds-c-label">{t(`${tRoot}.labels.hasCosts`)}</legend>
         <Choice
-          type="radio"
-          name={`apd-state-profile-hascosts-no${index}`}
-          value="no"
           checked={!hasCosts}
+          label="No"
+          name={`apd-state-profile-hascosts-no${index}`}
           onChange={setPersonHasCosts(false)}
-        >
-          No
-        </Choice>
-        <Choice
           type="radio"
-          name={`apd-state-profile-hascosts-yes${index}`}
-          value="yes"
+          value="no"
+        />
+        <Choice
           checked={hasCosts}
+          label="Yes"
+          name={`apd-state-profile-hascosts-yes${index}`}
           onChange={setPersonHasCosts(true)}
+          type="radio"
+          value="yes"
           checkedChildren={
             <PersonCostForm
               items={years.reduce(
@@ -107,9 +107,7 @@ const PersonForm = ({
               setFTE={setFTEForYear}
             />
           }
-        >
-          Yes
-        </Choice>
+        />
       </fieldset>
     </Fragment>
   );

web/src/containers/ApdSummary.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { ChoiceList } from '@cmsgov/design-system';
 import { connect } from 'react-redux';
 
 import {
@@ -10,7 +11,6 @@ import {
   setNarrativeForMMIS,
   setProgramOverview
 } from '../actions/editApd';
-import Choice from '../components/Choice';
 import RichText from '../components/RichText';
 import Instruction from '../components/Instruction';
 import { Section } from '../components/Section';
@@ -44,24 +44,23 @@ const ApdSummary = ({
     action(html);
   };
 
+  const yearChoices = yearOptions.map(year => ({
+    defaultChecked: years.includes(year),
+    label: year,
+    value: year
+  }))
+
   return (
     <Section resource="apd">
       <h3 className="ds-h3 subsection--title">{t('apd.overview.title')}</h3>
-      <Instruction source="apd.overview.instruction" />
-
-      {yearOptions.map(option => (
-        <Choice
-          key={option}
-          checked={years.includes(option)}
-          name={`apd year ${option}`}
-          onChange={handleYears}
-          type="checkbox"
-          value={option}
-        >
-          {option}
-        </Choice>
-      ))}
-
+      <ChoiceList
+        choices={yearChoices}
+        label={t('apd.overview.instruction.short')}
+        labelClassName="ds-u-margin-bottom--1"
+        name="apd-years"
+        onChange={handleYears}
+        type="checkbox"
+      />
       <div className="ds-u-margin-y--3">
         <Instruction
           labelFor="program-introduction-field"