Have all APR ratings contained within an APR rating group (#8431)

* Add APR rating descriptive text for assistive technologies, wrap APR ratings in <dl> * Replace dl spacing overrides with footer margin
cfpb · May 21, 2024 · a9cf18b · a9cf18b
1 parent 44cef70
commit a9cf18b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/cfgov/tccp/jinja2/tccp/includes/apr_rating.html b/cfgov/tccp/jinja2/tccp/includes/apr_rating.html
@@ -6,6 +6,9 @@
             {% for i in range(rating + 1) -%}
                 {{ svg_icon("dollar-round") }}
             {%- endfor %}
+            <span class="u-visually-hidden">
+                {{ rating + 1 }} dollar sign symbol{{ (rating + 1) | pluralize() }}
+            </span>
         </dt>
         <dd>
             Pay {{ label }} interest

diff --git a/cfgov/tccp/jinja2/tccp/includes/apr_table.html b/cfgov/tccp/jinja2/tccp/includes/apr_table.html
@@ -38,7 +38,9 @@
                     {% if show_comparison %}
                     <td>
                         {% if tier_apr_rating is not none -%}
+                        <dl>
                             {{ apr_rating(tier_apr_rating) }}
+                        </dl>
                         {%- endif %}
                     </td>
                     {% endif %}

diff --git a/cfgov/tccp/jinja2/tccp/includes/card_list.html b/cfgov/tccp/jinja2/tccp/includes/card_list.html
@@ -74,7 +74,9 @@ <h2>Cards you're looking for have these features:</h2>
                     <h3 class="m-card__heading">{{ card.institution_name }}</h3>
                     <p class="m-card__subtitle">{{ card.product_name }}</p>
                 </div>
-                {{ apr_rating(card.purchase_apr_for_tier_rating) }}
+                <dl>
+                    {{ apr_rating(card.purchase_apr_for_tier_rating) }}
+                </dl>
                 <dl class="m-data-specs">
                     <div class="m-data-spec m-data-spec--apr">
                         <dt><strong>Purchase APR</strong></dt>

diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.less
@@ -161,6 +161,11 @@
       padding-bottom: unit((20px / @base-font-size-px), rem);
     });
   }
+
+  dl {
+    margin-bottom: 0;
+  }
+
   &:hover {
     > a {
       box-shadow:
@@ -204,6 +209,11 @@
 
   .m-card__footer {
     margin-top: unit((5px / @base-font-size-px), rem);
+
+    // Tablet and above.
+    .respond-to-min(@bp-sm-min, {
+      margin-top: unit((20px / @base-font-size-px), rem);
+    });
   }
 
   .m-apr-rating {
@@ -253,12 +263,10 @@
   grid-template-columns: 2fr 3fr;
   column-gap: 20px;
   row-gap: 15px;
-  margin-bottom: 0;
 
   .respond-to-min(@bp-sm-min, {
     grid-template-areas: 'apr fee transfer rewards requirements';
     grid-template-columns: 5fr 4fr 6fr 7fr 7fr;
-    margin-bottom: unit((15px / @base-font-size-px), rem);
   });
 }