[CST] Make document short name the primary header of claim letter list items

[jacobworrell]

Value Statement

As a veteran looking for a specific letter in the claim letters section of CST I want to be able to clearly distinguish different types of letters from one another So that I can quickly find what I'm looking for.

---

Background Context

Current UI

Desired UI

Accessibility annotations/notes

The letter type should be a h2 styled as a h4.

The dates for each letter (below the letter type) should also be wrapped in the h2, something like:

<h2 class=”vads-u-font-size--h4”>
   Letter type
   <span class=”vads-u-font-size--base”>
     date of letter
   </span
</h2>

The date should be styled like body text.

Bug

• Steps to reproduce
• What is the bug?

New Feature

• Why are we doing this work?
• Epic Link

Outcome, Success Measure, KPI(S), and Tracking Link

• Add here

Design

FIGMA

Enablement team (if needed)

@member of team

Engineering

• Component to be updated is here: src/applications/claims-status/components/claim-letters/ClaimLetterListItem.jsx
• The date should also be part of the header (h3) but styled as regular text

Out of scope

• Add here

Open questions

• What do we need to do from an accessibility standpoint to make this usable for screenreader users?

Tasks

• [ ] Create official Figma spec for this design
• [ ] Update the ClaimLetterListItem component to use the letter type as the heading
• [ ] Update the ClaimLetterListItem component to use the received date of the letter as part of the heading, but styled like list item content.
• [ ] Update unit tests to reflect changes made

Definition of Done

• [ ] Meets acceptance criteria
• [ ] Passed E2E testing (90% coverage)
• [ ] Passed unit testing (90% coverage)
• [ ] Passed integration testing (if applicable)
• [ ] Code reviewed (internal)
• [ ] Submitted to staging
• [ ] Team approved production verification process
• [ ] Design performs design QA and verifies the implementation matches the design spec
• [ ] Accessibility specialist performs accessibility review (in code or design)
• [ ] Engineering identifies staging users required to test and shares account and credentials with design and product
• [ ] Product performs functional QA and verifies acceptance criteria was met

Acceptance Criteria

• [ ] Behind subsequent dev letters feature flag
• [ ] Short name of document is the primary header of a claim letter list item
• [ ] Date of document is the secondary information for each list and is presented in the format "[Month] [Day Number], [Year Number]"
• [ ] The third item is the hyperlink that allows the user to download the document and does not need to change from present convention.
• [ ] Users who rely on a screen reader to navigate through list items hear both the title of the doc and the date of the doc as they proceed through primary headers.

[skylerschain]

Added spec link to "Design" section of ticket.

[LouisFettet]

Discussed this issue in Slack w/ Jacob and Skyler; I had some questions about whether we were making changes to the document short names and about the rendering of the heading and subheading. Quick recap is:

• We’re not changing the document short names in this ticket.
• We want to swap the position of the current heading and subheading so that the document short name is the heading and the date is the subheading (the date only, dropping the "letter", i.e. [date], not [date] letter).
• We want to wrap both the heading and subheading content in an h2 for a11y best practices, but still style the heading and subheading in the same way we do now (heading styled as an h4, subheading styled as normal text).