Eligibility Index: Veterans - Use Older Adult copy

[machikoyasuda]

This PR depends on #1705 to be merged first.

What this PR does

• Copy: On Elig Index, for the Veteran pathway, change the last sentence to read: You will need to verify your identity with Login.gov., with a link to the Login.gov modal. Both links from the Veteran and the Older Adult radio input open the same exact modal.
• Templates: Like in Eligibility Start: Veterans - Use Older Adult copy #1705, rename senior modal to login-gov modal.

Includes, CSS changes

• CSS: Convert the #login id to a class. This is necessary b/c now, for the first time, a page has more than one Login.gov button on it. This requires changing all calls to the #login id to the class. This affects the Eligibility Start page for Veterans, Eligibility Start page for Older Adults, and the Enrollment Success page.
• Modal trigger element: Previously the Modal trigger element needed an id field to pass in the id of login, to show the color Login.gov trigger image. Now, though, there is no id necessary to pass in. So I removed the field entirely from the includes template. It was actually causing an interesting bug on the radio button field page, where the id of the radio button field was being used in the modal trigger instead - which was resulting in 2 links with the same id. And that was coming up in a11y testing.

How to test this PR

• Test the regular app flow
• Pay attention to all buttons with the Login.gov icon: Elig Start, Log out on Enrollment Success, Login.gov modal triggers. Ensure no visual regressions.

[machikoyasuda]

This is for the Login.gov Sign Out button on the Enrollment Success page for the Login.gov flows.

[machikoyasuda]

@thekaveman @angela-tran This modal trigger link opens the modal--login-gov modal, which is included into the page from the selection-label--senior.html file. That means that technically, under this design, if a transit agency ONLY offers Veterans benefits, but doesn't offer an Older Adult one, this template will have to be modified to also include the modal code. In other words, the Veteran selection label would require the Older Adult one to also be there.

Alternatively, I could also add this line here:

{% include "eligibility/includes/modal--login-gov-help.html" with id="modal--login-gov" size="modal-lg" header="p-md-2 p-3" body="pb-md-3 mb-md-3 mx-md-3 py-0 pt-0 absolute-top" %}

but then this HTML modal code would be duplicated on this page, and since there would be 2 modals with the same id (modal--login-gov), we'd have to have 2 different IDs pointing to duplicated HTML. Not sure which approach is better.

[angela-tran]

Hmm, that is tricky. With your second idea - the one about including the login-gov-help modal in the veteran selection-label - maybe the selection-label include templates can have a variable that says whether to include the modal or not?

[machikoyasuda]

Hrmm - yeah, but that variable would have to live in 0002_data.py because that's where the radio button selector templates get required for each agency:

And that seems like a little too much for this situation?

Might just be better to go with adding the modal all the time just to make each selection template independent.

[machikoyasuda]

Update: ff4ee18

The page now has 2 modals with 2 different IDs. The Veteran selector will have a modal with the ID "modal--login-gov-veterans" and the trigger will open that one.

[angela-tran]

And that seems like a little too much for this situation?

Might just be better to go with adding the modal all the time just to make each selection template independent.

Oh I see. Yeah, I didn't look too deeply at how the variable would get passed in, and what you're saying makes sense. Seems like having 2 modals is our best option here

[machikoyasuda]

Ready for review @thekaveman @angela-tran

[thekaveman]

👍