Refactor: All modal triggers are now links, not buttons (#1627)

benefits/core/templates/core/includes/modal-trigger.html

@@ -1,2 +1,4 @@
-<!-- Button to trigger modal -->
-<button type="button" class="{{ classes }}" data-bs-toggle="modal" data-bs-target="#{{ id }}">{{ text }}</button>
+<!-- Inline link to trigger modal -->
+{# djlint:off #}
+<a href="#{{ modal }}" class="{{ classes }}" id="{{ id }}" data-bs-toggle="modal" data-bs-target="#{{ modal }}">{{ text }}{% if login %}<span class="fallback-text color-logo">Login.gov</span>{% endif %}</a>{% if period %}.{% endif %}
+{# djlint:on #}

benefits/core/templates/core/index.html

@@ -10,7 +10,7 @@
 {% endblock headline %}
 
 {% block call-to-action %}
-  {% translate "Choose your Provider" as trigger_text %}
-  {% include "core/includes/modal-trigger.html" with id="modal--agency-selector" classes="btn btn-lg btn-primary" text=trigger_text %}
+  {% translate "Choose your Provider" as text %}
+  {% include "core/includes/modal-trigger.html" with modal="modal--agency-selector" classes="btn btn-lg btn-primary" text=text period=False %}
   {% include "core/includes/modal--agency-selector.html" with id="modal--agency-selector" %}
 {% endblock call-to-action %}

benefits/eligibility/templates/eligibility/includes/media-item--bankcardcheck--start.html

@@ -14,8 +14,8 @@
     <div class="media-body--details">
         <p>
             {% translate "Your contactless card must be a debit or credit card by Visa or Mastercard." %}
-            {% translate "Learn more about contactless cards" as trigger_text %}
-            {% include "core/includes/modal-trigger-link.html" with id="modal--contactless" text=trigger_text %}
+            {% translate "Learn more about contactless cards" as text %}
+            {% include "core/includes/modal-trigger.html" with modal="modal--contactless" text=text period=True %}
         </p>
     </div>
 

benefits/eligibility/templates/eligibility/includes/media-item--idcardcheck--start--senior.html

@@ -10,8 +10,8 @@
     <div class="media-body--details">
         <p>
             {% translate "You will be able to create an account using your email address if you do not already have one. We use your Login.gov account to verify your identity." %}
-            {% translate "Learn more about identity verification" as trigger_text %}
-            {% include "core/includes/modal-trigger-link.html" with id="modal--identity-verification" text=trigger_text %}
+            {% translate "Learn more about identity verification" as text %}
+            {% include "core/includes/modal-trigger.html" with modal="modal--identity-verification" text=text period=True %}
         </p>
         <div class="media-body--items">
             <p>{% translate "For this process you will need:" %}</p>

benefits/eligibility/templates/eligibility/includes/selection-label--senior.html

@@ -8,11 +8,7 @@
 {% block description %}
     {% translate "You must be 65 years or older. You will need to verify your identity with" %}
 
-    <!-- Button to trigger modal -->
-    <button id="login" type="button" class="border-0 bg-transparent p-0" data-bs-toggle="modal" data-bs-target="#modal--login-gov">
-        <span class="fallback-text color-logo">Login.gov</span>
-    </button>
-    .
+    {% include "core/includes/modal-trigger.html" with classes="border-0 bg-transparent p-0" id="login" modal="modal--login-gov" login=True period=True %}
 
     {% include "eligibility/includes/modal--senior-help.html" with id="modal--login-gov" size="modal-lg" %}
 {% endblock description %}

benefits/enrollment/templates/enrollment/includes/media-item--bankcardcheck--index.html

@@ -14,8 +14,8 @@
     <div class="media-body--details">
         <p>
             {% translate "You will be directed to our payment partner, " %}
-            {% include "core/includes/modal-trigger-link.html" with id="modal--littlepay" text="Littlepay" %}
             {% translate "We don’t store your information, and you won’t be charged." %}
+            {% include "core/includes/modal-trigger.html" with modal="modal--littlepay" text="Littlepay" period=True %}
         </p>
         <p>{% translate "Please use a debit or credit card by Visa or Mastercard." %}</p>
     </div>