Add APR rating descriptive text for assistive technologies, wrap APR …

…ratings in <dl>
cfpb · May 21, 2024 · f1a4f16 · f1a4f16
1 parent 44cef70
commit f1a4f16
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
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>