✅ VSA dev intent: Learning center, MVP 1.0 - faq_multiple_q_a

[jenstrickland]

Feedback framework

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

Description

This issue contains the VSA accessibility feedback for the Learning center, MVP 1.0 - faq_multiple_q_a.

Screenshots

Desktop

Mobile

Not provided

Point of Contact

VFS Point of Contact: Jennifer

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

[jenstrickland]

The alertbox heading should be an H2 with the utility class styling for an H3. This is a CMS issue, previously documented: https://github.com/department-of-veterans-affairs/va.gov-team/issues/6375

This is due to the CMS implementing the VA design system alertbox component as-is. For React apps, there is a level prop that takes numeric values. For the alertbox to be implemented in the CMS, it needs to be a static implementation that will work no matter where the alertbox is placed on a page. The heading should be coded as:

  <h2 class="vads-u-font-size--h3">Alertbox heading</h2>

[jenstrickland]

For this multiple Q & A design, consider associating the H2 question with the related list of answers.

  <h2 id="agent-orange-presumptive-disea">Agent Orange presumptive diseases</h2>
  <div class="usa-accordion-bordered">
    <ul class="usa-unstyled-list" aria-labelledby="agent-orange-presumptive-disea">
      <li>First answer</li>
      <!-- etcetera --
    </ul>
  </div>

Guidance

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

[jenstrickland]

Accessibility feedback for this complete. Let me know, of course 😄 if anything isn't clear or overlooked, and feel free to tag me on the PR as a reviewer.

[laflannery]

Closing - the alerts and accordions have been discussed in more recent issues