Refactor: agency selection frontend

[angela-tran]

Closes #1197
Closes #1214

This PR implements the designs from #1090.

The overall approach here was to use Bootstrap's Modal component in a Django template that can be extended. A template called agency-selector.html then extends modal.html and handles defining the cards. It is used specifically by the core/index.html template.

[angela-tran]

This is still a work-in-progress due to some minor questions / fixes needed, but here are some screenshots of it so far:

Screenshots

Screen size	Indirect Entry (Index) /	Modal is open	Hovering over a card
Desktop
Mobile

GIFs

Desktop	Mobile

Questions for @srhhnry:

• Does the faded background and animation look ok to you? It's just the default from Bootstrap. It doesn't match what's currently in Figma exactly, but you were saying you wanted to see what Bootstrap does.
• I exported the logos from Figma and noticed the MST logo in the mobile designs is truncated (some of the text in "Monterey-Salinas Transit" is cut off). Is that easy for you to fix? Once it's updated, I'll re-export it.

[srhhnry]

Thoughts:

1. The bootstrap default animation looks just fine to me. We're just visually indicating to the user that the rest of the screen is inactive. Also, the rest of the screen should be inactive (I'm assuming that's standard bootstrap modal/lightbox behavior).

2. Ideally we should get logo assets from the agencies. As we haven't done this before, there's a bit of a workflow issue there (e.g. does product handle that? Customer relations? Design? Unclear). But I pulled those logos from the internet, and I'm not 100% sure they are robust enough for an actual site (they work for Figma screens, but may not have the fidelity for say, a 49 inch monitor). I'll ask around for how we get those assets.

3. Choose Your Provider CTA on desktop should be justified left to align with the copy--this is an update from the previous iteration of the home page.

4. The mobile CTA and header (within the white box) looks a little low--the hero image feels like it's taking up a lot of real estate, causing the user to have to scroll to see the full context for the page. In the Figma boards the white box starts about midway up the Visa CC (instead of at the bottom)

Possible to move the box/header/CTA up? Expected behavior would be the user can see the CTA button without having to scroll.

[srhhnry]

Oh, and I fixed the MST logo on the Mobile board (it was filling the image instead of fitting to the box!) so at the very least it's not cut off anymore. Standing by on logo assets though.

[angela-tran]

1. ... Also, the rest of the screen should be inactive (I'm assuming that's standard bootstrap modal/lightbox behavior).

Currently I have it configured so that if the user clicks outside the modal dialog, it closes. Bootstrap also gives us the option to not do anything in that case (the user would have to click the "X" to close the modal dialog).

3. Choose Your Provider CTA on desktop should be justified left to align with the copy--this is an update from the previous iteration of the home page.
4. The mobile CTA and header (within the white box) looks a little low--the hero image feels like it's taking up a lot of real estate, causing the user to have to scroll to see the full context for the page. In the Figma boards the white box starts about midway up the Visa CC (instead of at the bottom)

Thanks for pointing these out @srhhnry! I'll look into making these changes.

[srhhnry]

Currently I have it configured so that if the user clicks outside the modal dialog, it closes. Bootstrap also gives us the option to not do anything in that case (the user would have to click the "X" to close the modal dialog).

Yup! That's perfect. Usually more savvy users will click outside the modal whereas less savvy will look for the X. Having both is great.

[machikoyasuda]

I'm going through the modal user experience with an eye on accessibility (keyboard only, keyboard shortcuts) and matching the mocks.

These flows all work:

• Use tab to get focus ring on CTA. Then, use enter or space to open the modal. ✅
• Once modal is open, and nothing is in focus, use escape to exit modal. ✅
• Once modal is open, press tab. The first icon in focus is the X. Use either space or enter on the focused X to exit modal. ✅
• Once modal is open, press tab twice. The MST button is selected. Use either space or enter get to MST (or SacRT). ✅

The one thing missing: There needs to be a focus ring around the whole button very clearly. We don't have designs for it necessary @srhhnry but we can use default (from our styles)

or @srhhnry can design something custom.

Looking more deeply into the way the card link is constructed, it might be tricky (but not impossible) to style the "invisble" linke to not look like below on focus, but rather a ring that goes around the entire card.

Resources:
https://www.sarasoueidan.com/blog/focus-indicators/#new-focus-indicator-accessibility-requirements-in-wcag-2.2
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/#accessible-focus-styles

[machikoyasuda]

@angela-tran Thinking about the HTML structure of the MST and SacRT components more, I think it should/could all be a <button> with an image inside, rather than a card. How I'd approach it: https://www.sarasoueidan.com/blog/accessible-icon-buttons/#icon-sitting-next-to-text

[machikoyasuda]

I wonder if there's a way to move this link or add styles to it so this link does not affect the height/flow of the parent div. Also, I wonder if there's a way to add styles so that the focus ring of this link borders the entire div cleanly.

[thekaveman]

Similarly, this link needs to at least wrap the h4 text, we shouldn't have a link with no text content.

[thekaveman]

FWIW @machikoyasuda I think this stretched-link utility is the right way to do this for cards in Bootstrap: https://getbootstrap.com/docs/4.6/utilities/stretched-link/

But we do need text content in the link

[thekaveman]

+1 to also needing a solution for the focus state on each card when navigating by keyboard.

[angela-tran]

@angela-tran Thinking about the HTML structure of the MST and SacRT components more, I think it should/could all be a <button> with an image inside, rather than a card. How I'd approach it: https://www.sarasoueidan.com/blog/accessible-icon-buttons/#icon-sitting-next-to-text

I read through that article, and I can see some benefit to switching it to a <button> (mostly that screenreaders would read it as an actual button?). I'm not sure how much time we have to make the switch, so maybe this is a refactor we could take on after the initial release?

I will definitely work on fixing the focus style with the suggestion you sent me in Slack @machikoyasuda.

[angela-tran]

So @thekaveman and @machikoyasuda , I tried each of your suggestions. The similarities between the two are that

• the tab focus ring does not cause the text to shift ✅
• I could not find a way to change the style of the focus ring (it seems browser-defined)

Here's what they each looked like:

Use stretched-link class on <a> element which wraps <h4>

Code snippet

<div class="card mt-lg-4 mx-lg-auto">
    <div class="card-body d-flex flex-row-reverse flex-lg-column justify-content-center align-items-center">
        <img class="sm d-lg-none ms-auto"
             src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-sm.svg"
             width="46"
             height="29"
             alt="{% blocktranslate with agency_short_name=agency.short_name %}core.pages.index.agency_selector{{ agency_short_name }}{% endblocktranslate %}">
        <img class="lg d-none d-lg-block mt-lg-3 mx-lg-auto"
             src="{% get_static_prefix %}img/agencies/{{ agency.slug }}-lg.svg"
             width="117"
             height="74"
             alt="{% blocktranslate with agency_short_name=agency.short_name %}core.pages.index.agency_selector{{ agency_short_name }}{% endblocktranslate %}">
        <a href="{{ agency.eligibility_index_url }}" class="stretched-link"><h4 class="card-title mt-lg-3 mb-0 mb-lg-3">{{ agency.long_name }}</h4></a>
    </div>
</div>

Screenshots

Chrome	Firefox

Make the element with card class an <a> instead of <div>

Code

See 801b57c

Screenshots

Chrome	Firefox

I went with the latter suggestion because it puts the focus ring around the whole card.

Let me know if there's something I'm missing re: styling the focus ring.

[machikoyasuda]

@angela-tran this is looking good!

one small thing to add: remove the underline when hovered - by adding custom style for .card:hover

[thekaveman]

Thanks for the changes, this looks good to me.

[machikoyasuda]

LGTM! ✨ ✨ 🚀

[srhhnry]

Catching up on this thread. It sounds like the focus ring can't be designed? And is set by the browser?

In case that's not the case, my suggestion would be to keep the behavior fairly close to default, with the exception being the use of our blue (#046b99) for the focus outline. To get real fancy, I'd suggest the hover color (#2f4c65) when selecting the agency button.

[angela-tran]

Catching up on this thread. It sounds like the focus ring can't be designed? And is set by the browser?

In case that's not the case, my suggestion would be to keep the behavior fairly close to default, with the exception being the use of our blue (#046b99) for the focus outline. To get real fancy, I'd suggest the hover color (#2f4c65) when selecting the agency button.

Yeah, so the cards are <a> elements (links), which are styled by the browser when given focus. For example, try tabbing around the links on http://info.cern.ch/.

[angela-tran]

If we'd like to revisit the focus ring styling and using <a> vs. <button> for the cards, I recommend we create new issues for those topics. I'll go ahead and merge in this PR's changes.

[srhhnry]

Sounds good!