Customer stories: Stories page and homepage update

[machikoyasuda]

closes #354

• Nav: Add customer stories to nav
• Stories page: Add all content and static TOC
• Stories page: Impact section - Mobile
• Stories page: Impact section - Large/Medium: Outer alignment
• Stories page: Large/Medium: Fix the footer
• Stories page: Impact section - Large/Medium: Inner alignment
• Stories page: Figure out the fade in / out effect
• Stories page: Add footnote links
• Stories page: Anchor links
• Home page: Add stats
• Stories/Partners page: Footnote code

How to test this PR

• Enter the page through an anchor tag: https://deploy-preview-380--cal-itp-website.netlify.app/customer-stories#stories-GTFS-VCTC https://deploy-preview-380--cal-itp-website.netlify.app/customer-stories#stories-benefits-MST
• Enter without anchor tag https://deploy-preview-380--cal-itp-website.netlify.app/customer-stories
• Click on the sidebar links - active area should be in blue
• After clicking on a sidebar link, click Back on the browser. The URL should change and the active title should match the browser URL.
• Check the stats on the homepage: https://deploy-preview-380--cal-itp-website.netlify.app
• Nav should have Customer stories highlighted

Sidebar

• Desktop: The sidebar stays sticky on scroll, but also goes behind the Impact section (and has the fade background)
• Clicking / tabbing and entering on a link takes you to the section
• Clicking / tabbing on a single link will make both pairs of links colored in styling
• If you enter the page with an anchor tag, like #stories-GTFS-VCTD, then the link pairs will be set to active and styled appropriately

[netlify]

✅ Deploy Preview for cal-itp-website ready!

Name	Link
🔨 Latest commit	99f305e
🔍 Latest deploy log	https://app.netlify.com/sites/cal-itp-website/deploys/66a832451881d2000841d991
😎 Deploy Preview	https://deploy-preview-380--cal-itp-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[machikoyasuda]

Hey @ohmegasquared,

This page is not 100% done yet, but it's close. I have all the sections for both desktop and mobile aligned with the latest content and for the most part, have the font sizes, colors and margins/padding. There's some refinement with the inside of the Our impact section (font size, mobile inner stat alignment) that's not done yet, and the table of contents link don't work yet at all. But other than that, the major "bones" of the page are complete.

Here's how I approached coding the tricky Our impact (image and stats side-by-side/on-top design) section:

1. Get the mobile version working first. If all else fails, the mobile version will work.
2. Get the desktop widths of the image and the stat section working.
3. Get the desktop vertical alignment of the image and stat section working.
4. Get the way the table of contents goes underneath the stat section working. Get the table of contents stickyness working.
5. The last part I tried was the fade in/out linear gradient of the stat section. It's a little tricky because there's already a lot of code magic happening to make the rhombus-with-rounded-corners working.

This is the way the stat section on desktop is constructed:

There is a background applied to the div highlighted in purple, that has the linear gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0.16%, #fff 30.54%). I got that code from Figma. It's basically saying, "make a vertical linear gradient that grades between #ffffff and 25% transparency". But, as you can tell from the screenshot, this means that the gradient also shows up here -- the 190px of overlap between the two sections:

I have hard-coded this 190px overlap by using a negative margin.

But what I think we need here is a gradient that's more complex than a linear gradient: a gradient that has the linear gradient on the whole rectangle, except, the left-hand half is entirely transparent. Trying to draw out what I mean in Google Spreadsheets:

CSS gradients can be made quite complex, but I don't think it can make a gradient of what I need. Instead of a CSS-coded gradient, can use an image of a gradient as a background instead of linear gradient code.

Do you think you could make an image like this in Photoshop or Figma?

There are some other approaches I can try after, but they're slightly hackier, so I want to try this gradient image approach first.

[ohmegasquared]

Yes, here is an image gradient! Thanks for tackling this tricky problem!

Let me know if you need a different size/change for the image

[machikoyasuda]

@allejo Hey Vlad, I was wondering if you could give this a code review on two specific elements. Note that the copy in this PR is not 100% complete, so that's why, for example, the first footnote's source is not a link and it doesn't go anywhere:

1. Footnotes: The Customer stories page has 2 footnotes https://deploy-preview-380--cal-itp-website.netlify.app/customer-stories#fnref:1 The home page has 3 footnotes. https://deploy-preview-380--cal-itp-website.netlify.app/#fnref:1 I copied the way you did it, code-wise - both CSS classes (.footnotes) and HTML elements (<ol>, <li>, <sup>), on Convert Minimum Accounts Memo to Markdown #322.

I had some questions about how to approach the design of footnote sections overall:

• Does the Footnotes title have to be there? The design doesn't call for it. It's there now on the customer stories page b/c I'm using the footnotes class you used.
• Is it an anti-pattern to have a link that is just titled, "Source"? Would it be better for the source to have a title and the link to use the title instead? Should this title use <cite>?

2. Sidebar nav: This page has an interesting sidebar nav. When you click on a link, like Benefits - both Benefits and the Monterey-Salinas Transit links turn to active. There are 3 sections of text, and the sidebar is divided up into Topics and Agencies - each with 3 items. There is only one corresponding topic to one corresponding agency: GTFS-VCTC, Contactless-Glenn, Benefits-MST. Clicking on 1 section's title activates the link of the corresponding topic/agency pair. Do you see anything off with this, accessibility-wise or otherwise?

I have the divs ordered so that the sidebar gets focused on first before the actual content div. Does that seem logical?

Thank you

[machikoyasuda]

I had to add this to get the footer to stay at the bottom on the Customer stories page. The way the Our impact section is absolutely positioned breaks the normal flow of every HTML element below it, including the footer. This allows me to add the absolute-footer class on this page only, which allows me to add the CSS code to keep the footer down where it should be.

[machikoyasuda]

This PR is now ready for code and design review. Please review the code/design, and mark this PR as approved (or not) wih the GitHub button. Once this PR is approved, it will be merged into #364. After that, all the copy for both Partners and Customer Stories will be reviewed together.

[thekaveman]

This is looking really good code-wise.

• Small file rename suggestion
• Small code change request to the sidebar script
• Questions/comments on Stories page headings

[ohmegasquared]

(missing '#stories' in homepage URL anchor links)

Design approved on mobile and web 🚀

[machikoyasuda]

Posting the pa11y test results of current PR here:

pa11y http://localhost:4000/customer-stories

Welcome to Pa11y

 > Running Pa11y on URL http://localhost:4000/customer-stories

Results for URL: http://localhost:4000/customer-stories

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777d.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(2) > figure:nth-child(1) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2"> Courtesy of Vent...</figcaption>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777d.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(3) > figure:nth-child(1) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2">Courtesy of TBD</figcaption>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 3.09:1. Recommendation:  change text colour to #73777d.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── html > body > main > section > div > div > article > section:nth-child(5) > figure:nth-child(8) > figcaption
   └── <figcaption class="small text-end text-secondary pt-2">Courtesy of Monterey-Salinas Tr...</figcaption>

3 Errors

[machikoyasuda]

The Wednesday update:

@thekaveman This is ready for code re-review.

I'd like to try to get this merged into #364 by the end of day today, if possible.

One reason is because I've now identified one accesssibility testing issue, that affects both #364 and #354 -- the super small font style color is not dark enough. This color/size combo is used on photo captions on Customer Stories and on footnoes for the Partners page. I'd like to fix that in one combined PR, b/c the underlying code is the same.

I've run pa11y testing (https://pa11y.org/) on both PRs, on both the home pages and the stories and partners pages, and there are no other issues.

I have 2 small PRs that can go into Production (#384 #387), approved by @ohmegasquared, and ready for code review. These 2 PR's can then be rebased into the future combined PR.

As of right now, the copy is still not ready yet. So hopefully I can get the real copy in tomorrow when the copy is ready, in one PR.

[machikoyasuda]

@allejo Axe results on the footnote stuff:

[machikoyasuda]

Ugh - Not sure why but the Netlify deploy has not updated today. So the link is not trustworthy! Please test locally.

[allejo]

Does the Footnotes title have to be there? The design doesn't call for it. It's there now on the customer stories page b/c I'm using the footnotes class you used.

Nope, "Footnotes" doesn't have to be there. Kramdown already generates that section with the appropriate* ARIA roles, so that should suffice.

* It looks like Kramdown generates <li>s with doc-endnote roles, which is now deprecated, as mentioned in the WAI-ARIA specification. This also appears to be a known issue in Kramdown (gettalong/kramdown#729).

Doing some more research, Pandoc removed the doc-endnote from their generated code and left the non-deprecated doc-endnotes (notice the plural).

I'm not too concerned about this causing problems from an accessibility perspective, considering the accepted and valid doc-endnotes is being generated where it should be. I would either submit a PR to Kramdown to correct this behavior or just wait patiently until someone else does it.

Is it an anti-pattern to have a link that is just titled, "Source"? Would it be better for the source to have a title and the link to use the title instead? Should this title use ?

It is 100% bad practice to have a link just called "Source" or "Read more." Screen readers can extract all links from a page; this means that if an Assistive Technology (AT) user uses this feature, they would receive a dozen URLs with no context of where they came from (i.e., what the surrounding sentences were), and the only information they'd have is the name of the link, which would be "Source."

A better practice is for links to have enough context in the name to be useful standalone, e.g., the name of the page the link is referencing.

Sidebar nav: This page has an interesting sidebar nav. When you click on a link, like Benefits - both Benefits and the Monterey-Salinas Transit links turn to active. There are 3 sections of text, and the sidebar is divided up into Topics and Agencies - each with 3 items. There is only one corresponding topic to one corresponding agency: GTFS-VCTC, Contactless-Glenn, Benefits-MST. Clicking on 1 section's title activates the link of the corresponding topic/agency pair. Do you see anything off with this, accessibility-wise or otherwise?

Hmm... I can't see this causing problems for AT users since the only things affected are the link's classes. If you were misusing the aria-current attribute on those sidebar links, then that could cause confusion. It doesn't make sense to use that here since they're all links within the same page, so it wouldn't convey any extra meaning.

[allejo]

Oops, I missed one!

I have the divs ordered so that the sidebar gets focused on first before the actual content div. Does that seem logical?

Yes.

[thekaveman]

One more small fix for sidenav logic

[machikoyasuda]

@thekaveman Added a final else if, for the going Back on a non-hashed url instance: 68487af

[thekaveman]

This looks soooooo nice! All the interactions feel very smooth. Incredible work!