From ffe0c92b94a952aeb20af43aadefa0ca016f3497 Mon Sep 17 00:00:00 2001
From: pearl-truss <pearl@truss.works>
Date: Fri, 8 Sep 2023 17:04:24 -0400
Subject: [PATCH] include required/optional label for textarea

---
 .../src/components/Form/FieldTextarea/FieldTextarea.tsx      | 5 +++++
 .../pages/StateSubmission/SubmissionType/SubmissionType.tsx  | 1 +
 2 files changed, 6 insertions(+)

diff --git a/services/app-web/src/components/Form/FieldTextarea/FieldTextarea.tsx b/services/app-web/src/components/Form/FieldTextarea/FieldTextarea.tsx
index 9c0e7ad6c6..c207559a10 100644
--- a/services/app-web/src/components/Form/FieldTextarea/FieldTextarea.tsx
+++ b/services/app-web/src/components/Form/FieldTextarea/FieldTextarea.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useField } from 'formik'
 import { Label, Textarea, FormGroup } from '@trussworks/react-uswds'
 import { PoliteErrorMessage } from '../..'
+import styles from './FieldTextarea.module.scss'
 
 /**
  * This component renders a ReactUSWDS TextArea component inside of a FormGroup,
@@ -34,6 +35,7 @@ export const FieldTextarea = ({
     ...inputProps
 }: TextAreaProps): React.ReactElement => {
     const [field, meta] = useField({ name })
+    const isRequired = inputProps['aria-required']
 
     // Latch into onBlur to do any input cleaning
     // Initial use case is to trim away trailing whitespace in email addresses
@@ -50,6 +52,9 @@ export const FieldTextarea = ({
             <Label htmlFor={id} error={showError}>
                 {label}
             </Label>
+            <span className={styles.requiredOptionalText}>
+                {isRequired ? 'Required' : 'Optional'}
+            </span>
             {showError && <PoliteErrorMessage>{meta.error}</PoliteErrorMessage>}
             {hint && (
                 <div
diff --git a/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx b/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx
index 859c17d097..d5ae6f73ca 100644
--- a/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx
+++ b/services/app-web/src/pages/StateSubmission/SubmissionType/SubmissionType.tsx
@@ -509,6 +509,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