Step 1 Typography Audit: Audit DS-staged typography update for product impact

[jilladams]

Description or Additional Context

The Design system is updating the typography sitewide. This will be done in 2 steps. This is the audit for Step 1 - Root change from 10px to 16px - Wednesday May 22nd.

• The ask: Visual QA starting on May 8th and lasting one sprint.
• IMPORTANT: There should be no visual changes due to this code change.
• This change alters the underpinnings of the entire typography setup in the system and prepares us to match the USWDS and bump up our base font size.
• The Design System team has done visual QA detailed in this spreadsheet. We are asking VFS teams to go over their specific applications. Pick some heavily trafficked exemplary pages and visually QA those. Our expectation is that if those look okay then your application is likely going to be fine with these changes.

Steps for Implementation

Review product portfolio in the Design system PR for visual issues

Environment

https://github.com/department-of-veterans-affairs/vets-website/pull/26606

Prerequisities

• A build with this code staged (whether local or Tugboat)

• SOCKS access

  QA spreadsheet

  Google Spreadsheet

ACs

Facilities products are audited for typography impact

• [x] VAMC
  • [x] VAMC System: https://www.va.gov/minneapolis-health-care/ -- custom code details #16952
  • [x] VAMC Facility: https://www.va.gov/minneapolis-health-care/locations/minneapolis-va-medical-center/ -- custom code #17654
  • [x] Health Services: https://www.va.gov/minneapolis-health-care/health-services/ -- has custom code (#17657)
  • [x] News Releases: https://www.va.gov/minneapolis-health-care/news-releases/ -- custom code #17068
  • [x] Stories: https://www.va.gov/minneapolis-health-care/stories/ -- custom code #17067
  • [x] Programs: https://www.va.gov/minneapolis-health-care/programs/
  • [x] Policies: https://www.va.gov/minneapolis-health-care/policies/
  • [x] Police: https://www.va.gov/minneapolis-health-care/va-police/ -- custom code details: #16953
  • [x] Billing & Insurance: https://www.va.gov/fayetteville-arkansas-health-care/billing-and-insurance/ -- custom code #16960
  • [x] Medical Records office: https://www.va.gov/tampa-health-care/medical-records-office/ -- custom code #16960
  • [x] Register for Care: https://www.va.gov/miami-health-care/register-for-care/ (includes a Facility status banner as of 4/12) -- custom code: #16957
  • [x] Locations - https://www.va.gov/minneapolis-health-care/locations/ - custom code #16964
  • [x] Detail page: https://www.va.gov/minneapolis-health-care/work-with-us/ -- custom code #16999
  • [x] Operating status: https://www.va.gov/boston-health-care/operating-status/ -- custom code #16998
  • [x] Staff page: https://www.va.gov/battle-creek-health-care/about-us/leadership/ -- custom code #17066
  • [x] Staff profile: https://www.va.gov/battle-creek-health-care/staff-profiles/michelle-martin/ -
• [x] System banner with situation update - https://www.va.gov/miami-health-care/register-for-care/ (includes a Facility status banner as of 4/12)
• [x] Vet Centers - CMS examples: https://prod.cms.va.gov/admin/content?title=&type=vet_center&moderation_state=published&owner=All
  • [x] Location: https://www.va.gov/manchester-vet-center/locations/
• [x] Facility Locator - https://www.va.gov/find-locations
• [x] Facility Locator detail pages - https://www.va.gov/find-locations/facility/vba_348
• [ ] ~Regional Offices (pre-prod templates) -- this is probably not possible to test on the branch unless we set up a Tugboat for it, so may need to wait til typography hits prod and then test on preview~

Public Websites

• [x] Global header / footer
• [x] Search / results:
• [x] VA.gov homepage
• [ ] Header / footer injection -- https://benefits.va.gov
• [x] Veterans Crisis Line modal
• [x] Benefits Detail Page - https://www.va.gov/health-care/
• [x] Benefits Hub Landing Page - https://www.va.gov/health-care/about-va-health-benefits/
• [x] Campaign Landing Page - examples from cms - https://prod.cms.va.gov/admin/content?title=&type=campaign_landing_page&moderation_state=published&owner=All
• [x] CTA widgets
  • [x] Get medical records
  • [x] Cerner: Make appointment - https://www.va.gov/health-care/schedule-view-va-appointments/
  • [x] Cerner: Refill/track prescriptions - https://www.va.gov/health-care/refill-track-prescriptions/
  • [x] Cerner: Send secure message - https://www.va.gov/health-care/secure-messaging/
  • [x] Cerner: View test and lab results page - https://www.va.gov/health-care/view-test-and-lab-results/
• [x] Discharge upgrade wizard - https://www.va.gov/discharge-upgrade-instructions/questions
• [x] Event -- CMS examples (prob good to check a few): https://www.va.gov/discharge-upgrade-instructions/questions
• [x] Events List -- https://www.va.gov/outreach-and-events/events/
• R&S content types
  • [x] FAQ page -- CMS examples: https://prod.cms.va.gov/admin/content?title=&type=faq_multiple_q_a&moderation_state=published&owner=All
  • [x] Resources and Support Detail Page -- https://prod.cms.va.gov/admin/content?title=&type=support_resources_detail_page&moderation_state=published&owner=All
  • [x] Reusable Q&A -- https://prod.cms.va.gov/admin/content?title=&type=q_a&moderation_state=published&owner=All
• [x] Find a Form - https://www.va.gov/find-forms/
• [x] Full width alert - any published will be here: https://prod.cms.va.gov/admin/content?title=&type=banner&moderation_state=published&owner=All.. (4/12: only published one appears on /housing-assistance/)
• [ ] Income Limits -- https://www.va.gov/health-care/income-limits/introduction
• [x] Outreach Hub -- https://www.va.gov/outreach-and-events/outreach-materials/
• [ ] ~Promo banner -- there are none published right now. We may need to get a Tugboat going to create content in order to see this example live: https://prod.cms.va.gov/admin/content?title=&type=promo_banner&moderation_state=published&owner=All~
• [x] Translations widget - https://www.va.gov/family-member-benefits/comprehensive-assistance-for-family-caregivers-esp/
• [x] PACT Act -- https://staging.va.gov/pact-act-eligibility/introduction -- this isn't in prod, you may not be able to preview it for this audit. If not, we can cut a separate ticket to review it / fix things once typography update is in prod.

Other

• [x] Notes on impact are added to ticket and reviewed with PM in order to define follow up tickets
  • [x] All custom code instances are specifically reviewed
  • [x] Overall spacing (margins, padding etc)
  • [x] Text alignment & legibility
• [x] Next step tickets are created, for any work that isn't captured by existing component adoption tickets

[jilladams]

Noting: since Public Websites has completed component adoption, theoretically we won't run into issues there. I did not cut a companion ticket for Public Websites for this. That may change if the UX assessment brings up things I haven't considered. (fyi @FranECross )

[jilladams]

Starting a tugboat here: 17806-typography-update-preview Will need to set the vets-website branch in Content Release UI once it's up.

[jilladams]

We realized that in cases where PW wasn't able to adopt components, we still may be affected, so expanding this ticket to cover both teams. (FYI @FranECross )

[jilladams]

@thejordanwood I added in Public Websites products, and added links to example content or CMS list of example content. I am thinking that 5 estimate is way low. I am also questioning if this actually make ssense for you to handle alone, per our convo in refinement yesterday. Could you take a look and think it over for what a more realistic estimate should be, and I think in next sprint we'll have to figure out how to divide and conquer in order to hit the deadline.

[jilladams]

And: realizing the PW list is probably possible to winnow down technically to only pages where we have impostor components / custom code still. But: I admit I'm pretty nervous about letting this ship without at least a cursory look at all our products for sanity check. Open to thoughts on that.

[jilladams]

@randimays FYI that we expanded this ticket to cover PW today, and I know you started taking a look at PW products today in PR (saw your notes here). I love it and I think Jordan is going to need the help. Would you mind ticking AC boxes for PW things you review / have reviewed?

[randimays]

@jilladams This comment on the typography PR said they're not ready for us to review yet. I did get through a handful of our products but it sounds like they're going to make a ton more changes before they're ready for everyone to have a look?

[jilladams]

Breadcrumbs: they're built with custom code in most places and will potentially be affected here. The Breadcrumbs column in this spreadsheet spells out where breadcrumbs appear, and if it says "No" that means it's not using a DS component and typography might make it weird.

[mmiddaugh]

Per Matt, the following imposter components: are at greatest risk during the upcoming typography change

• Alert
• Breadcrumbs
• Pagination
• Process list
• Related links
• Banner

[davidmpickett]

@laflannery comment from Slack

• Alert
  • We only have 1 remaining instance of these, slim alerts on the VAMC operating status pages. These are also impacted by the va-icon update so there may be a chance here to weigh the effort of "do we update just the custom icon or does it make more sense to update to use the component"? This will most likely be discuss in refinement next week
• Back to top
  • Everywhere we are currently using "Back to top" we are using the proper component. The remaining tickets are just asking that we add this component to templates that don't currently use it because they meet the criteria to have it. So we don't currently have any imposter instances of this therefore there should be no impact here.
• Pagination
  • All instances of this have since been updated to use v3, so again we are good here and there should be no impact.
• Process list
  • All instances of this that I have found are unfortunately within CMS content which means I do not believe we are going to be able to update these to use the component. This is still in a ticket to be reviewed and confirmed but there is a high probability there won't be much we can do with this. This will be a case where if there are issues found during the typography testing, that will need to be discussed
• Related links
  • I honestly don't have much to say about this other than yes, these are ticket to be updated.
• Banner
  • The VAMC banners are the ones that need to be updated. While they do show on every VAMC page, it is only 1 file that needs to be updated. This is the same case as the Alert - it is impacted by the va-icon update as well so I have recommended it be discussed at refinement next week to discuss the benefits/effort of updating just the icon or the entire component

[jilladams]

Noting: Platform FE indicated on https://github.com/department-of-veterans-affairs/vets-website/pull/26606 that this work is delayed and the DS will resume it in sprint that starts 4/24. We don't know yet if an environment will be available during this sprint for review. We also don't know if the 5/8 deadline will move. Until we hear that the deadline is moving, if an environment becomes available, it will still be a goal to get started on review.

DS thread re: the deadline: https://dsva.slack.com/archives/C06V7AAFVH7/p1713477160426989

[davidmpickett]

@laflannery @thejordanwood @aklausmeier

Following up on the comments about spacing in Max's PR I adjusted the ACs above to note some of the specific visual issues we will be looking for in this audit. Might be worth reviewing this again in a group context before this gets underway.

@jilladams Is this officially out of Sprint 2?

[eselkin]

I wonder if we should release this vets-website PR on the tugboat with the service locations. @davidmpickett What do you think?

[laflannery]

I don't know if this will be needed - the SL may be launched (or pretty close to ready) by the time this is ready for testing

[jilladams]

Moving this ticket from Sprint 2 to Sprint 4 based on Design System updates made today: https://dsva.slack.com/canvas/C01DBGX4P45

Typography Step 1: Root change from 10px to 16px - Wednesday May 22nd

• The ask: Visual QA starting on May 8th and lasting one sprint.
• IMPORTANT: There should be no visual changes due to this code change.
• This change alters the underpinnings of the entire typography setup in the system and prepares us to match the USWDS and bump up our base font size.
• The Design System team has done visual QA detailed in this spreadsheet. We are asking VFS teams to go over their specific applications. Pick some heavily trafficked exemplary pages and visually QA those. Our expectation is that if those look okay then your application is likely going to be fine with these changes.

Typography Step 2: Increase base font-size from 16px to 16.96px - Wednesday June 5th

• The ask: Again visual QA starting on May 22nd and lasting one sprint.
• IMPORTANT: Focus on reviewing any "imposter", or exempted v1, components. No development is required, only QA. The base font size increase should not break imposter or v1 components since those will inherit both the new base font size and also the scaled rem values. However, given that they are not Design System web-components the Design System team will not have been able to QA them in advance.
• NOTE: v3 web-components have already moved to 16.96px within the components and you will have already moved to v3 by now.
• This change increase our base font size to match the normalized value of 16.96px for Source Sans Pro in the USWDS.

Sprint 4 runs from May 15-May 28. With this in mind: We will plan to review Step 1 early in Sprint 4, Step 2 late in Sprint 4. FYI @mmiddaugh & @aklausmeier

[davidmpickett]

Moving out of current sprint column since this is blocked until May 8

[jilladams]

@davidmpickett @Agile6MSkinner @mmiddaugh @aklausmeier FYI: the typography audit is ready for us, when it wasn't at the time we planned sprint 3. Discussed this am with Laura, Jordan, Randi and team has a preference to start now and demote the Facility Locator design ticket from sprint, in order to start on this and have a sense of where it's at long before the May 22 merge deadline.

[thejordanwood]

@jilladams @davidmpickett This is the spreadsheet that we're going to use for QA. Thanks @laflannery for creating this!

[jilladams]

From scrum:

• VBA - we won't be through staging review by the time typography launches, so once it's in main we can deal with it.
• Promo banners - same. These rarely get made, we do a staging preview once it's in main.
• VCL - button is slightly changed in position. Jordan is not bothered. We are not going to do anything with this, and can address it if we get other feedback later.
• QA process:
  • DS is actively addressing issues. This is modifying the results of our testing, as we test. Hard to pin down the truth of the state of things, while changes are being actively made. We are testing and retesting. I'll take this to the shared channel to request testing window. We shared feedback / Micah agrees: https://dsva.slack.com/archives/C06V7AAFVH7/p1715270173918349

[laflannery]

• All tickets created and added to appropriate epics
• Majority reviewed/refined with the team
  • 2 were found later so those were sent to Product for next steps

Facilities products No notes!

Public websites products

• Income limits:
  • Needs to be tested locally because you can't get past the API/Zip code field in a Review instance.
  • I tried doing it and saw an issue regarding the feedback button not being present but Randi was unable to replicate this and tbh I trust Randi way more to test something locally.
  • That being said, if we want to review this on every breakpoint, we may want to request additional engineering support here
• Injected Header/Footer:
  • This also needs to be tested locally
  • Randi did take a look at this for us but not positive if we did it on every breakpoint. I'm also not sure if all the breakpoints apply to the injected header/footer in the same way so is additional review necessary?

[laflannery]

@jilladams @FranECross See my comment above - do we feel like we need to test Income limits and Injected header/footer on every single breakpoint? Should we discuss an engineering assist in scrum next week or is the testing that was already done good and we could close this ticket?

[laflannery]

From Scrum -

• We aren't going to test Income limits on every break point
• We are going to do additional testing on the Injected header/Footer

[aklausmeier]

I'd like to see the before and after for the VCL - button. Does someone have screenshots to share? I am not able to access that Google spreadsheet.

[laflannery]

@aklausmeier here are some other things for you:

• Mural where Jordan and I put all the issues we found
• PW epic with their issue tickets
• Facilities epic with their issue tickets

The epics might be more useful than the mural because if contains all the screen shots but also the context for anything that has already been discussed

[laflannery]

All testing for this step is complete!