[closed] sitewide, forms [SCREENREADER, AXE-CORE]: container of the radio input options **should** be enclosed by a `role="group"` attribute

[jenstrickland]

508-defect-2

!  Team affected: VSA BAM2; Project: MDOT

Feedback framework

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

Description

The container of the radio input options should be enclosed by a role="group" attribute. This issue is also relevant both the page "Select the hearing aid batteries you need" radio inputs and the "Select the hearing aid accessories you need" with the checkboxes.

Point of Contact

VFS Point of Contact: Jennifer

Acceptance Criteria

As a screen reader user, I want to know what options are grouped for me to select from.

Environment

• Operating System: all
• Browser: any
• Screenreading device: any
• Server destination: staging

Steps to Recreate

1. Enter https://staging.va.gov/hearing-aid-batteries-and-accessories/introduction in browser
2. Log in as user #####

Potential Fix

Current code

<form class="rjsf" novalidate="">
  <div>
-    <div class="input-section schemaform-field-container">
      <div>
        <p class="vads-u-margin-top--2">
          We'll ship your order to the address below. Orders typically arrive within 7 to 10 business days.
        </p>
        <div class="review-card">
          <div class="review-card--header vads-u-background-color--gray-lightest vads-u-padding-top--0 vads-u-padding-x--1 vads-u-display--flex vads-u-justify-content--space-between vads-u-align-items--center vads-u-padding--2" style="min-height: 5rem;">
            <h4 class="review-card--title vads-u-display--inline vads-u-margin--0">
              Permanent address
            </h4>
          </div>
          <div class="review-card--body vads-u-border-color--gray-lightest vads-u-background-color--gray-lightest vads-u-border--2px vads-u-border-top--0 vads-u-padding-x--2 vads-u-padding-bottom--2 vads-u-padding-top--0 vads-u-margin-bottom--1">
            <div class="vads-u-border-left--7px vads-u-border-color--primary">
              <p class="vads-u-margin-left--2 vads-u-margin-top--0">
                101 Example Street<br>
                Apt 2<br>
                Kansas City, MO 64117
                <span class="vads-u-display--block">USA</span>
              </p>
            </div>
-            <a class="vads-c-link vads-u-margin-top--1 vads-u-width--auto" aria-label="Edit permanent address" style="min-width: 8rem;">
              Edit permanent address
            </a>
            <div class="radio-button vads-u-background-color--primary button-dimensions vads-u-color--white vads-u-border-color--primary vads-u-border--2px">
              <input id="permanentAddress" type="radio" checked="">
              <label class="vads-u-font-weight--bold" for="permanentAddress">
                Send my order to this address
              </label>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="review-card">
          <div class="review-card--header vads-u-background-color--gray-lightest vads-u-padding-top--0 vads-u-padding-x--1 vads-u-display--flex vads-u-justify-content--space-between vads-u-align-items--center vads-u-padding--2" style="min-height: 5rem;">
            <h4 class="review-card--title vads-u-display--inline vads-u-margin--0">
              Temporary address
            </h4>
          </div>
          <div class="review-card--body vads-u-border-color--gray-lightest vads-u-background-color--gray-lightest vads-u-border--2px vads-u-border-top--0 vads-u-padding-x--2 vads-u-padding-bottom--2 vads-u-padding-top--0 vads-u-margin-bottom--1">
              <div class="vads-u-border-left--7px vads-u-border-color--primary">
                <p class="vads-u-margin-left--2 vads-u-margin-top--0">
                  201 Example Street<br>
                  Galveston, TX 77550
                  <span class="vads-u-display--block">USA</span>
                </p>
              </div>
              <a class="vads-c-link vads-u-margin-top--1 vads-u-width--auto" aria-label="Edit temporary address" style="min-width: 8rem;">
                Edit temporary address
              </a>
              <div class="radio-button vads-u-background-color--white vads-u-color--link-default button-dimensions vads-u-border-color--primary vads-u-border--2px">
                <input id="temporaryAddress" type="radio">
                <label class="vads-u-font-weight--bold" for="temporaryAddress">
                  Send my order to this address
                </label>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="schemaform-field-template vads-u-margin-bottom--3 schemaform-first-field">
            <label id="root_email-label" class="schemaform-label" for="root_email">
              <h4>
                Email address
              </h4>
            </label>
            <p>We will send an order confirmation email with a tracking number to this email address.</p>
-            <p>Email address</p>
            <div class="schemaform-widget-wrapper">
              <input type="email" id="root_email" name="root_email" class="va-input-large" value="veteran@gmail.asd">
            </div>
            <div>
            </div>
          </div>
        </div>
        <div>
          <div class="schemaform-field-template">
-            <label **id**="root_confirmationEmail-label" class="schemaform-label" for="root_confirmationEmail">
              Re-enter email address
            </label>
            <div class="schemaform-widget-wrapper">
              <input type="email" id="root_confirmationEmail" name="root_confirmationEmail" class="va-input-large" value="">
            </div>
            <div>
            </div>
          </div>
        </div>
        <div>
          <div class="schemaform-field-template vads-u-display--none">
-            <label **id**="root_currentAddress-label" class="schemaform-label" for="root_currentAddress">
!            currentAddress
            </label>
            <div class="schemaform-widget-wrapper">
!            <select id="root_currentAddress" name="root_currentAddress" class="undefined ">                    
!                <option value="permanentAddress">permanentAddress</option>
!                <option value="temporaryAddress">temporaryAddress</option>
!          )}</select>
           </div>
         <div>
         </div>
       </div>
     </div>
   </div>
  </div>
  <div class="row form-progress-buttons schemaform-buttons">
    <div class="small-6 medium-5 columns">
      <button type="button" class="usa-button-secondary null" id="9-continueButton">
-        <span class="button-icon">« </span>Back
      </button>
    </div>
    <div class="small-6 medium-5 end columns">
      <button type="submit" class="usa-button-primary null" id="10-continueButton">
-        Continue<span class="button-icon"> »</span>
      </button>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <div name="saveFormLinkTop"></div>
      <span>
        <button type="button" class="va-button-link schemaform-sip-save-link">
          Finish this application later
      </button>.
    </span>
  </div>
 </div>
</form>

Recommended code

<form class="rjsf" novalidate="">
  <div>
+    <div role="group" class="input-section schemaform-field-container">
      <div>
        <p class="vads-u-margin-top--2">
          We'll ship your order to the address below. Orders typically arrive within 7 to 10 business days.
        </p>
        <div class="review-card">
          <div class="review-card--header vads-u-background-color--gray-lightest vads-u-padding-top--0 vads-u-padding-x--1 vads-u-display--flex vads-u-justify-content--space-between vads-u-align-items--center vads-u-padding--2" style="min-height: 5rem;">
            <h4 class="review-card--title vads-u-display--inline vads-u-margin--0">
              Permanent address
            </h4>
          </div>
          <div class="review-card--body vads-u-border-color--gray-lightest vads-u-background-color--gray-lightest vads-u-border--2px vads-u-border-top--0 vads-u-padding-x--2 vads-u-padding-bottom--2 vads-u-padding-top--0 vads-u-margin-bottom--1">
            <div class="vads-u-border-left--7px vads-u-border-color--primary">
              <p class="vads-u-margin-left--2 vads-u-margin-top--0">
                101 Example Street<br>
                Apt 2<br>
                Kansas City, MO 64117
                <span class="vads-u-display--block">USA</span>
              </p>
            </div>
            <a class="vads-c-link vads-u-margin-top--1 vads-u-width--auto">
              Edit permanent address
            </a>
            <div class="radio-button vads-u-background-color--primary button-dimensions vads-u-color--white vads-u-border-color--primary vads-u-border--2px">
+              <input id="permanentAddress" type="radio" checked="" name="address" value="permanent address">
              <label class="vads-u-font-weight--bold" for="permanentAddress">
                Send my order to this address
              </label>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="review-card">
          <div class="review-card--header vads-u-background-color--gray-lightest vads-u-padding-top--0 vads-u-padding-x--1 vads-u-display--flex vads-u-justify-content--space-between vads-u-align-items--center vads-u-padding--2" style="min-height: 5rem;">
            <h4 class="review-card--title vads-u-display--inline vads-u-margin--0">
              Temporary address
            </h4>
          </div>
          <div class="review-card--body vads-u-border-color--gray-lightest vads-u-background-color--gray-lightest vads-u-border--2px vads-u-border-top--0 vads-u-padding-x--2 vads-u-padding-bottom--2 vads-u-padding-top--0 vads-u-margin-bottom--1">
              <div class="vads-u-border-left--7px vads-u-border-color--primary">
                <p class="vads-u-margin-left--2 vads-u-margin-top--0">
                  201 Example Street<br>
                  Galveston, TX 77550
                  <span class="vads-u-display--block">USA</span>
                </p>
              </div>
              <a class="vads-c-link vads-u-margin-top--1 vads-u-width--auto" aria-label="Edit temporary address" style="min-width: 8rem;">
                Edit temporary address
              </a>
              <div class="radio-button vads-u-background-color--white vads-u-color--link-default button-dimensions vads-u-border-color--primary vads-u-border--2px">
+                <input id="temporaryAddress" type="radio" name="address" value="temporary address">
                <label class="vads-u-font-weight--bold" for="temporaryAddress">
                  Send my order to this address
                </label>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="schemaform-field-template vads-u-margin-bottom--3 schemaform-first-field">
            <label id="root_email-label" class="schemaform-label" for="root_email">
              <h4>
                Email address
              </h4>
            </label>
            <p>We will send an order confirmation email with a tracking number to this email address.</p>
+            <label for="root_email">Email address</label>
            <div class="schemaform-widget-wrapper">
              <input type="email" id="root_email" name="root_email" class="va-input-large" value="veteran@gmail.asd">
            </div>
            <div>
            </div>
          </div>
        </div>
        <div>
          <div class="schemaform-field-template">
+            <label for="root_confirmationEmail-label" class="schemaform-label" for="root_confirmationEmail">
              Re-enter email address
            </label>
            <div class="schemaform-widget-wrapper">
              <input type="email" id="root_confirmationEmail" name="root_confirmationEmail" class="va-input-large" value="">
            </div>
            <div>
            </div>
          </div>
        </div>
        <div>
! <!-- these items are for the schema, I believe -->
          <div class="schemaform-field-template vads-u-display--none">
+            <label **for**="root_currentAddress-label" class="schemaform-label" for="root_currentAddress">
!            currentAddress
            </label>
            <div class="schemaform-widget-wrapper">
!            <select id="root_currentAddress" name="root_currentAddress" class="undefined ">                    
!                <option value="permanentAddress">permanentAddress</option>
!                <option value="temporaryAddress">temporaryAddress</option>
!          )}</select>
           </div>
         <div>
         </div>
       </div>
     </div>
   </div>
  </div>
  <div class="row form-progress-buttons schemaform-buttons">
    <div class="small-6 medium-5 columns">
      <button type="button" class="usa-button-secondary null" id="9-continueButton">
        <span aria-hidden="true" role="presentation" class="button-icon">« </span>Back
      </button>
    </div>
    <div class="small-6 medium-5 end columns">
      <button type="submit" class="usa-button-primary null" id="10-continueButton">
        Continue<span  aria-hidden="true" role="presentation" class="button-icon"> »</span>
      </button>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <div name="saveFormLinkTop"></div>
      <span>
        <button type="button" class="va-button-link schemaform-sip-save-link">
          Finish this application later
      </button>.
    </span>
  </div>
 </div>
</form>

Guidance

• MDN Using the group role
• W3C WCAG 2.0 - ARIA17: Using grouping roles to identify related form controls

WCAG or Vendor Guidance (optional)

Screenshots or Trace Logs

[jenstrickland]

The issue is not appearing in the code today, although this wasn't changed.