508 Spike – Audit FE codebase for all accordion components

[wesrowe]

Description

Discovery = https://github.com/department-of-veterans-affairs/va.gov-cms/issues/10136

Related/companion issue = CMS-side audit for accordions is ticketed #10486

Assuming that the latest version of the Accordion design system component can be passed a parameter that selects its header level...

Search the PW codebase (across repos) to find the instances/templates that use the Accordion component.

In vets-website, there are only 20-25 files using the va-accordion component, and a similar number in content-build, which would make auditing header level and adjusting manually a manageable task.

Acceptance Criteria

• [ ] Document all instances of accordions – where in codebase, what page (or page type)
• [ ] Assess whether default h2 is correct
• [ ] Categorize instances for the complexity of correcting the header level

CMS Team

Please check the team(s) that will do this work.

• [ ] Program
• [ ] Platform CMS Team
• [ ] Sitewide Crew
• [ ] ⭐️ Sitewide CMS
• [x] ⭐️ Public Websites
• [ ] ⭐️ Facilities
• [ ] ⭐️ User support

[jilladams]

I asked re: a CMS content audit of accordions, https://dsva.slack.com/archives/CT4GZBM8F/p1661364422311699?thread_ts=1661354422.964899&cid=CT4GZBM8F

per Swirt he concurred we need a code audit, so this should represent code level check:

[Accordions are] a little more complicated as accordions I think are used in multiple types. So it may be a little more challenging to find them all. Also I think some only exist on the FE.

A question for the engineer who picks this up is probably: will our FE code audit cover all cases of accordions coming through the CMS? And what level of confidence do we have in that answer?

[jtmst]

Accordion headers audit

Summary: In total, I've found 7 examples of the va-accordion component using incorrect header levels. 4 in vets-website on various react components, and 3 in content-build on various liquid templates. Some instances can be resolved by passing in the appropriate header level as props, and others will require some conditional logic to be added.

Vets Website:

Coronavirus vaccination widget

• Correct header
• Passed h3 via props

Coronavirus info pages

• Correct header
• Passed h4 via props

Healthcare apply widget

• health-care/apply/application
• Correct usage
• Passed h3 via props

How to pay detail FAQ

• Correct usage
• health-care/pay-copay-bill/
• Hard coded h3

Connected Apps FAQ

• resources/connected-apps-faqs/
• Needs fixing
• Default h2 (code appears to be trying to insert as H3, but not correctly with props. Needs checked out)
• Vets-website: src/applications/dhp-connected-devices/components/FrequentlyAskedQuestions.jsx
• 3 out of 5 for complexity to fix

Manage debt page (CMS)

• Needs fixing
• This is coming from CMS
• /manage-va-debt/
• H2 being used when it should likely be an H4. Above header is h3
• 2/5 complexity

How to pay

• Needs fixing
• Default h2, above header is h3.
• src/applications/medical-copays/components/HowToPay.jsx
• 2/5 complexity

Virtual Agent FAQ

• Needs fixing
• Default h2, above header is h3
• contact-us/virtual-agent/
• src/applications/virtual-agent/components/page/Disclaimer.jsx
• 2/5 complexity

Content Build

Facility Health Service

• Correct usage
• Conditional switch from h3 to h4
• Example tennessee-valley-health-care/locations/nashville-va-medical-center/
• src/site/facilities/facility_health_service.drupal.liquid

Vet Centers Services

• src/site/includes/vet_centers/services.liquid
• Correct usage
• H3 passed in props

Campaign Landing Page

• src/site/layouts/campaign_landing_page.drupal.liquid
• Correct usage
• H3 passed as props

FAQ Multiple template

• Conditional logic for switching from h2 to h3
• Correct usage

Healthcare Local Facility

• Correctly usage
• Passes H3 in as props
• src/site/layouts/health_care_local_facility.drupal.liquid

Landing page template

• Correctly usage
• Passes H3 in as props
• src/site/layouts/landing_page.drupal.liquid

Vet Center

• Correctly usage
• Passes H3 in as props
• src/site/layouts/vet_center.drupal.liquid

Health Service

• /tennessee-valley-health-care/health-services/
• Needs Fixing
• Currently is an h2 under and h2. Probably should be h3
• src/site/facilities/health_service.drupal.liquid
• 3/5 complexity

Collapsable Panel

• Needs fixing
• src/site/paragraphs/collapsible_panel.drupal.liquid
• https://www.va.gov/health-care/covid-19-vaccine/
• Likely needs conditional logic added mirroring the FAQ template
• Complexity 3/5

QA Collapsable Panel

• Needs Fixing
• https://www.va.gov/health-care/eligibility/
• src/site/paragraphs/q_a.collapsible_panel.drupal.liquid
• There is logic existing for handling header level but doesn’t seem to always work.
• Complexity 4/5