add required labels to the submission type page

Enterprise-CMCS · Sep 14, 2023 · 0a3c861 · 0a3c861
1 parent 2f64d62
commit 0a3c861
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/services/app-web/src/components/Form/FieldYesNo/FieldYesNo.module.scss b/services/app-web/src/components/Form/FieldYesNo/FieldYesNo.module.scss
@@ -1,3 +1,6 @@
+@import '../../../styles/uswdsImports.scss';
+@import '../../../styles/custom.scss';
+
 .optionsContainer {
     display: flex;
 }
@@ -18,3 +21,8 @@
 .no {
     margin-left: 3em;
 }
+
+.requiredOptionalText {
+    display: block;
+    color: $theme-color-hint;
+}
diff --git a/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.test.tsx b/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.test.tsx
@@ -30,7 +30,10 @@ describe('SubmissionType', () => {
             },
         })
 
-        expect(screen.getByText(/All fields are required/)).toBeInTheDocument()
+        const requiredLabels = await screen.findAllByText('Required')
+        expect(requiredLabels).toHaveLength(6)
+        const optionalLabels = await screen.queryAllByText('Optional')
+        expect(optionalLabels).toHaveLength(0)
     })
 
     it('displays submission type form when expected', async () => {

diff --git a/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx b/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx
@@ -313,9 +313,6 @@ export const SubmissionType = ({
                         <fieldset className="usa-fieldset">
                             <legend className="srOnly">Submission type</legend>
                             {showFormAlert && <GenericApiErrorBanner />}
-                            <span id="form-guidance">
-                                All fields are required
-                            </span>
 
                             {shouldValidate && (
                                 <ErrorSummary
@@ -334,6 +331,11 @@ export const SubmissionType = ({
                                     aria-required
                                     legend="Which populations does this contract action cover?"
                                 >
+                                    <span
+                                        className={styles.requiredOptionalText}
+                                    >
+                                        Required
+                                    </span>
                                     {showFieldErrors(
                                         errors.populationCovered
                                     ) && (
@@ -395,6 +397,9 @@ export const SubmissionType = ({
                                 <Label htmlFor="programIDs">
                                     Programs this contract action covers
                                 </Label>
+                                <span className={styles.requiredOptionalText}>
+                                    Required
+                                </span>
                                 {showFieldErrors(errors.programIDs) && (
                                     <PoliteErrorMessage>
                                         {errors.programIDs}
@@ -417,6 +422,11 @@ export const SubmissionType = ({
                                     legend="Choose a submission type"
                                     id="submissionType"
                                 >
+                                    <span
+                                        className={styles.requiredOptionalText}
+                                    >
+                                        Required
+                                    </span>
                                     {showFieldErrors(errors.submissionType) && (
                                         <PoliteErrorMessage>
                                             {errors.submissionType}
@@ -467,6 +477,11 @@ export const SubmissionType = ({
                                     legend="Contract action type"
                                     id="contractType"
                                 >
+                                    <span
+                                        className={styles.requiredOptionalText}
+                                    >
+                                        Required
+                                    </span>
                                     {showFieldErrors(errors.contractType) && (
                                         <PoliteErrorMessage>
                                             {errors.contractType}
@@ -497,6 +512,7 @@ export const SubmissionType = ({
                                     id="riskBasedContract"
                                     name="riskBasedContract"
                                     label="Is this a risk-based contract?"
+                                    aria-required
                                     hint="See 42 CFR § 438.2"
                                     showError={showFieldErrors(
                                         errors.riskBasedContract