Update appointment list headings to align with VAOS

[cgednalske]

Following a recent sync with VAOS designers, the headings for the appointment list date need to be updated to align with the current VAOS design.

Tasks

Sketch:

• [x] Update Sketch symbols for appointment list cards. The date ("2" for example) should be H4.
• [x] Check artboards to ensure there's no rogue cards in the appointment list that weren't updated.
• [x] Document new heading on the annotations page
• [x] Document the aria label on the annotations page for the dates ("2 Mon"). Use "Monday, February 2nd" which is what Angela suggested during her walkthrough.

CodePen:

• [x] Update appointment list date H3s to H4s in CodePen to match our new heading structure
• [x] Update aria labels for dates

Acceptance Criteria

• [x] Sketch symbols updated
• [x] Annotations page updated with new heading and aria label
• [x] CodePen updated with new heading and aria label

[loripusey]

@cgednalske @benbrasso-agile6 Questions:

• Are we only tackling this work now as part of the unified experience?
• Will we need to implement these changes in what we have in production now?

[benbrasso-agile6]

I don't think the current app has this pattern, because we only ever show appointments for "today," and therefore, the design pattern is slightly different. Christina?

[cgednalske]

Yep that's right! This just applies to the appointment list, so the current app is all set as is 👍

[cgednalske]

Hi @loripusey -- @benbrasso-agile6 and I just touched base on this ticket. I have capacity to pull it into into this sprint so it's done before midpoint review. Any updates I should make to the ticket?

[cgednalske]

@loripusey @benbrasso-agile6 this is ready for validation. The appointment list dates have been updated to h4 for both Sketch and CodePen. The annotations page in Sketch has also been updated to include that new heading and aria label. (This took me about 2.5 hours if we want to retrospectively point it.)

[benbrasso-agile6]

LGTM