Repository: cal-itp/benefits

Issue:
Form pages: Style inputs + Alignment
## Acceptance Criteria

<!-- Remember to consider edge cases -->

- [x] Eligibility confirm page: new form inputs, new form placeholder
- [x] Test for a11y/focus
- [x] Eligibility page: Radio buttons
- Create label for radio button in the radio_select itself and rename includes to be just for Verifier
- Fix the button javascript issue #948 related to this

1. Add row/alignment code to get the Submit button in the right-aligned-to-centered style
2. Figure out how to style the Radio Button as a 8-col left-aligned
3. And Form as 6-col centered
4. Input colors/font sizes
5. Radio button tweak margins/padding

## Additional context

Read USDWS form input guide for guidance



Discussion:

Resolving patch:
diff --git a/benefits/core/widgets.py b/benefits/core/widgets.py
--- a/benefits/core/widgets.py
+++ b/benefits/core/widgets.py
@@ -11,16 +11,18 @@ class FormControlTextInput(widgets.TextInput):
     def __init__(self, pattern=None, placeholder=None, **kwargs):
         super().__init__(**kwargs)
 
-        self.attrs.update({"class": "form-control form-control-lg"})
+        self.attrs.update({"class": "form-control"})
         if pattern:
             self.attrs.update({"pattern": pattern})
         if placeholder:
             self.attrs.update({"placeholder": placeholder})
 
 
-class RadioSelect(widgets.RadioSelect):
-    template_name = "core/widgets/radio_select.html"
-    option_template_name = "core/widgets/radio_select_option.html"
+class VerifierRadioSelect(widgets.RadioSelect):
+    """A radio select input styled for the Eligibility Verifier"""
+
+    template_name = "core/widgets/verifier_radio_select.html"
+    option_template_name = "core/widgets/verifier_radio_select_option.html"
 
     def __init__(self, choice_descriptions=(), *args, **kwargs):
         super().__init__(*args, **kwargs)
diff --git a/benefits/eligibility/forms.py b/benefits/eligibility/forms.py
--- a/benefits/eligibility/forms.py
+++ b/benefits/eligibility/forms.py
@@ -18,14 +18,15 @@ class EligibilityVerifierSelectionForm(forms.Form):
     action_url = "eligibility:index"
     method = "POST"
 
-    verifier = forms.ChoiceField(label=_("eligibility.pages.index.label"), widget=widgets.RadioSelect)
-
+    verifier = forms.ChoiceField(label="", widget=widgets.VerifierRadioSelect)
+    # sets label to empty string so the radio_select template can override the label style
     submit_value = _("eligibility.buttons.choose")
 
     def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         verifiers = agency.eligibility_verifiers.all()
 
+        self.classes = "offset-lg-1 col-lg-9"
         self.fields["verifier"].choices = [(v.id, _(v.selection_label)) for v in verifiers]
         self.fields["verifier"].widget.choice_descriptions = {
             v.id: _(v.selection_label_description) for v in verifiers if v.selection_label_description
@@ -49,6 +50,7 @@ class EligibilityVerificationForm(forms.Form):
     def __init__(self, verifier: models.EligibilityVerifier, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
+        self.classes = "offset-lg-3 col-lg-6"
         sub_widget = widgets.FormControlTextInput(placeholder=verifier.form_sub_placeholder)
         if verifier.form_sub_pattern:
             sub_widget.attrs.update({"pattern": verifier.form_sub_pattern})
diff --git a/benefits/eligibility/views.py b/benefits/eligibility/views.py
--- a/benefits/eligibility/views.py
+++ b/benefits/eligibility/views.py
@@ -12,7 +12,7 @@
 from benefits.core import recaptcha, session, viewmodels
 from benefits.core.middleware import AgencySessionRequired, LoginRequired, RateLimit, VerifierSessionRequired
 from benefits.core.models import EligibilityVerifier
-from benefits.core.views import ROUTE_HELP, TEMPLATE_PAGE
+from benefits.core.views import ROUTE_HELP
 from . import analytics, forms, verify
 
 
@@ -22,6 +22,7 @@
 ROUTE_CONFIRM = "eligibility:confirm"
 ROUTE_ENROLLMENT = "enrollment:index"
 
+TEMPLATE_INDEX = "eligibility/index.html"
 TEMPLATE_START = "eligibility/start.html"
 TEMPLATE_CONFIRM = "eligibility/confirm.html"
 TEMPLATE_UNVERIFIED = "eligibility/unverified.html"
@@ -47,6 +48,12 @@ def index(request):
         forms=forms.EligibilityVerifierSelectionForm(agency=agency),
     )
 
+    ctx = page.context_dict()
+    ctx["help_page"] = help_page
+    ctx["help_text"] = format_html(
+        _("eligibility.pages.index.help_text%(help_link)s") % {"help_link": f"{help_page}#what-is-cal-itp"}
+    )
+
     if request.method == "POST":
         form = forms.EligibilityVerifierSelectionForm(data=request.POST, agency=agency)
 
@@ -59,14 +66,14 @@ def index(request):
         else:
             # form was not valid, allow for correction/resubmission
             page.forms = [form]
-            response = TemplateResponse(request, TEMPLATE_PAGE, page.context_dict())
+            response = TemplateResponse(request, TEMPLATE_INDEX, ctx)
     else:
         if agency.eligibility_verifiers.count() == 1:
             verifier = agency.eligibility_verifiers.first()
             session.update(request, verifier=verifier)
             response = redirect(eligibility_start)
         else:
-            response = TemplateResponse(request, TEMPLATE_PAGE, page.context_dict())
+            response = TemplateResponse(request, TEMPLATE_INDEX, ctx)
 
     return response
 


Test patch:
diff --git a/tests/pytest/eligibility/test_views.py b/tests/pytest/eligibility/test_views.py
--- a/tests/pytest/eligibility/test_views.py
+++ b/tests/pytest/eligibility/test_views.py
@@ -11,7 +11,7 @@
     ROUTE_LOGIN,
     ROUTE_CONFIRM,
     ROUTE_ENROLLMENT,
-    TEMPLATE_PAGE,
+    TEMPLATE_INDEX,
     TEMPLATE_CONFIRM,
     TEMPLATE_UNVERIFIED,
 )
@@ -71,7 +71,7 @@ def test_index_get_agency_multiple_verifiers(
     response = client.get(path)
 
     assert response.status_code == 200
-    assert response.template_name == TEMPLATE_PAGE
+    assert response.template_name == TEMPLATE_INDEX
     assert "page" in response.context_data
     assert len(response.context_data["page"].forms) > 0
     assert isinstance(response.context_data["page"].forms[0], EligibilityVerifierSelectionForm)
@@ -113,7 +113,7 @@ def test_index_post_invalid_form(client):
     response = client.post(path, {"invalid": "data"})
 
     assert response.status_code == 200
-    assert response.template_name == TEMPLATE_PAGE
+    assert response.template_name == TEMPLATE_INDEX
 
 
 @pytest.mark.django_db