508-defect-3 [SEMANTIC MARKUP]: Radio inputs with the same name attribute value MUST be part of a group

[jenstrickland]

508-defect-3

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Description

Radio inputs that have the same name value must be part of a group, ensuring related <input type="radio"> elements have a group and that the group designation is consistent. Fieldset contains unrelated inputs.

The "Learn more about Medicaid" show/hide <button> must not be in a fieldset.

Recommendation for the Caregiver team

The health care coverage program learn more should be moved back to above the form into a Learn more show/hide. There is a forms system issue, where the <button> cannot be in a <fieldset>, so these toggles need to be changes to <a href… and JavaScript added to support that behavior. For sake of scalability and maintenance, this is the responsibility of VSP to create a forms system component.

Additional issues to be addressed in the forms system: Update the Additional Info component to be used for Learn More expandable sections in forms #4330

Point of Contact

VFS Point of Contact: Jennifer

Acceptance Criteria

• As an assistive tech user, I want form checkbox and radio inputs to be matched with the related input and group labels.

• As a screen reader user, I want to digest the content of the page with minimal repetition and extraneous noise.

Environment

• Operating System: all
• Browser: all
• Server destination: staging

Steps to Recreate

1. Enter https://staging.va.gov/caregivers/primary-3 in browser
2. Navigate to the healthcare coverage screen
3. Run an axe-coconut browser scan
4. Verify the issue "Radio inputs with the same name attribute value must be part of a group" is listed, associated with <input type="radio" id="root_primaryMedicaidEnrolledYes" name="root_primaryMedicaidEnrolled" value="Y">

Possible Fixes (optional)

Current code

<form class="rjsf" novalidate="">
  <div>
    <div class="input-section schemaform-field-container">
      <div class="schemaform-block-header">
-   <!-- this is the heading level issue -->
-       <h5 class="vads-u-font-size--h4">Health care coverage</h5>
        <div class="vads-u-margin-bottom--4 vads-u-margin-top--2">
          <p>Please complete the following information about the Primary Family Caregiver’s health coverage.</p>
        </div>
      </div>
      <div>
        <fieldset class="schemaform-field-template schemaform-first-field">
          <legend id="root_primaryMedicaidEnrolled-label" class="schemaform-label">
            Is the Primary Family Caregiver currently in enrolled in Medicaid?<span class="schemaform-required-span">(*Required)</span>
          </legend>
          <div class="vads-u-margin-y--1p5 vads-u-margin-bottom--2p5">
-         <div class="form-expanding-group">
-           <button type="button" class="additional-info-button va-button-link" aria-expanded="false" aria-controls="tooltip-5">
-           <span class="additional-info-title">Learn more about Medicaid<i class="fas fa-angle-down"></i></span>
-           </button>
-           <span id="tooltip-5"></span>
-         </div>
-         </div>
           <div class="schemaform-widget-wrapper">
              <div class="form-radio-buttons">
                <input type="radio" id="root_primaryMedicaidEnrolledYes" name="root_primaryMedicaidEnrolled" value="Y">
                <label for="root_primaryMedicaidEnrolledYes">Yes</label>
                  <input type="radio" id="root_primaryMedicaidEnrolledNo" name="root_primaryMedicaidEnrolled" value="N">
                <label for="root_primaryMedicaidEnrolledNo">No</label>
              </div>
            </div>
            <div></div>
          </fieldset>
        </div>

<!-- etcetera -->
</form>

Recommended code

+ Due to constraints and issues in the forms system, 
+ add a Learn more about health care coverage programs show/hide above the form,
+ and remove the individual Learn more buttons show/hide from within each fieldset

<form class="rjsf" novalidate="">
  <div>
    <div class="input-section schemaform-field-container">
      <div class="schemaform-block-header">
+       <h3 class="vads-u-font-size--h4">Health care coverage</h3>
        <div class="vads-u-margin-bottom--4 vads-u-margin-top--2">
          <p>Please complete the following information about the Primary Family Caregiver’s health coverage.</p>
        </div>
      </div>
      <div>
        <fieldset class="schemaform-field-template schemaform-first-field">
          <legend id="root_primaryMedicaidEnrolled-label" class="schemaform-label">
            Is the Primary Family Caregiver currently in enrolled in Medicaid?<span class="schemaform-required-span">(*Required)</span>
          </legend>
          <div class="vads-u-margin-y--1p5 vads-u-margin-bottom--2p5">
          </div>
           <div class="schemaform-widget-wrapper">
              <div class="form-radio-buttons">
                <input type="radio" id="root_primaryMedicaidEnrolledYes" name="root_primaryMedicaidEnrolled" aria-labelledby="root_primaryMedicaidEnrolled-label root_primaryMedicaidEnrolledYes">
                <label for="root_primaryMedicaidEnrolledYes">Yes</label>
                <input type="radio" id="root_primaryMedicaidEnrolledNo" name="root_primaryMedicaidEnrolled" aria-labelledby="root_primaryMedicaidEnrolled-label root_primaryMedicaidEnrolledNo">
                <label for="root_primaryMedicaidEnrolledNo">No</label>
              </div>
            </div>
            <div></div>
          </fieldset>
        </div>
<!-- etcetera -->
</form>

In a future forms system update, it would be great if it might wrap the radio/checkbox input with the label. This is not being asked of the Caregiver team.

<label for="radioOne">
  <input id="radioOne" type="radio" name="example-radio" />
  <span>One</span>
</label>

WCAG or Vendor Guidance (optional)

• Info and Relationships: Understanding SC 1.3.1

• MDN Using the aria-labelledby attribute

• WebAIM discussion on radio input code pattern

Screenshots or Trace Logs

[ala-yna]

Hi @jenstrickland - this series of questions is no longer a part of the form. Should we close the issue?

[jenstrickland]

Yes! I noticed this in a recent flow through the app. What a wonderful resolution!