include required/optional label for textarea

Enterprise-CMCS · Sep 8, 2023 · ffe0c92 · ffe0c92
1 parent 39be654
commit ffe0c92
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git 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
@@ -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