Skip to content

Commit

Permalink
Merge pull request #8358 from cfpb/tccp/a11y
Browse files Browse the repository at this point in the history 
TCCP: Accessibility and BEM improvements
  • Loading branch information
@contolini
contolini authored May 7, 2024
2 parents 94fe5de + ce00216 commit 588d9b9
Show file tree
Hide file tree
Showing 10 changed files with 218 additions and 193 deletions.
128 changes: 80 additions & 48 deletions cfgov/tccp/jinja2/tccp/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,24 @@
<div class="eyebrow">{{ card.institution_name }}</div>

<h1>{{ card.product_name }}</h1>

{% set tiers_description = 'This credit card is recommended for people with the following credit scores: ' %}
{% set targeted_tiers = [] %}
{% for tier_value, tier_name, _ in credit_tier_lookup %}
{% if tier_value in card.targeted_credit_tiers %}
{% do targeted_tiers.append(tier_name) %}
{% endif %}
{% endfor %}
{% set tiers_description = tiers_description + oxfordize(targeted_tiers) %}
<div class="o-card-details-section o-card-details-section--introduction">
{# TODO: Need to make this more accessible for screen readers #}
<div class="m-credit-tier-chart">
<div class="m-credit-tier-chart" role="figure">
<p class="u-visually-hidden">{{ tiers_description }}</p>
{% for tier_value, tier_name, _ in credit_tier_lookup %}
{% if tier_value in card.targeted_credit_tiers %}
{% set targeted_tier = true %}
{% else %}
{% set targeted_tier = false %}
{% endif %}
<div class="m-credit-tier-chart__tier m-credit-tier-chart__tier{{ '--selected' if targeted_tier else '--unselected' }}">
<div class="m-credit-tier-chart__tier m-credit-tier-chart__tier{{ '--selected' if targeted_tier else '--unselected' }}" aria-hidden="true">
<span class="m-credit-tier-chart__icon">
{%- if targeted_tier -%}
{{ svg_icon('approved-round') }}
Expand All @@ -63,7 +70,7 @@ <h1>{{ card.product_name }}</h1>
</div>
{% endfor %}
</div>
<div class="h4 u-mt5">
<div class="h4 u-mt5" aria-hidden="true">
Recommended credit scores
</div>
{% if card.availability_of_credit_card_plan == "One State/Territory" %}
Expand Down Expand Up @@ -190,6 +197,13 @@ <h2>
- No min and max but a median: "29.74% median purchase APR"
- Single APR for everyone: "24.90% purchase APR"
#}
{% if card.purchase_apr_min is not none
and card.purchase_apr_max is not none
%}
{% set purchase_apr_term = 'Purchase APR' %}
{% elif card.purchase_apr_median is not none %}
{% set purchase_apr_term = 'Median purchase APR' %}
{% endif %}
<div class="h2 u-mb0">
{% if card.purchase_apr_min is not none
and card.purchase_apr_max is not none
Expand All @@ -198,15 +212,10 @@ <h2>
{% elif card.purchase_apr_median is not none %}
{{ apr(card.purchase_apr_median) }}
{% endif %}
<span class="u-visually-hidden">{{ purchase_apr_term }}</span>
</div>
<div class="h4 u-mt0">
{% if card.purchase_apr_min is not none
and card.purchase_apr_max is not none
%}
Purchase APR
{% elif card.purchase_apr_median is not none %}
Median purchase APR
{% endif %}
<div class="h4 u-mt0" aria-hidden="true">
{{ purchase_apr_term }}
</div>
<p>
An APR, or annual percentage rate, is the interest you‘ll pay
Expand Down Expand Up @@ -239,6 +248,13 @@ <h2>
<p>This card does not charge interest on purchases.</p>
{% endif %}
{% if card.introductory_apr_offered %}
{% if card.intro_apr_min is not none
and card.intro_apr_max is not none
%}
{% set introductory_apr_term = 'Introductory APR' %}
{% elif card.intro_apr_median is not none %}
{% set introductory_apr_term = 'Median introductory APR' %}
{% endif %}
<div class="h3 u-mb0 u-mt30">
{% if card.intro_apr_min is not none
and card.intro_apr_max is not none
Expand All @@ -250,15 +266,10 @@ <h2>
for
{{ '%.0f' | format(card.median_length_of_introductory_apr ) }}
months
<span class="u-visually-hidden">{{ introductory_apr_term }}</span>
</div>
<div class="u-mb15">
{% if card.intro_apr_min is not none
and card.intro_apr_max is not none
%}
Introductory APR
{% elif card.intro_apr_median is not none %}
Median introductory APR
{% endif %}
<div class="u-mb15" aria-hidden="true">
{{ introductory_apr_term }}
</div>
{% if card.introductory_apr_vary_by_credit_tier %}
<p>
Expand Down Expand Up @@ -411,8 +422,9 @@ <h2>
{% else %}
{{ currency(card.annual_fee) if card.annual_fee else currency(0) }}
{% endif %}
<span class="u-visually-hidden">Annual fee</span>
</div>
<div class="h4 u-mt0 u-mb0">
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Annual fee
</div>
</div>
Expand Down Expand Up @@ -442,8 +454,9 @@ <h2>
{% else %}
{{ currency(card.monthly_fee) }}
{% endif %}
<span class="u-visually-hidden">Monthly fee</span>
</div>
<div class="h4 u-mt0 u-mb0">
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Monthly fee
</div>
</div>
Expand All @@ -455,8 +468,9 @@ <h2>
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{{ currency(card.weekly_fee) }}
<span class="u-visually-hidden">Weekly fee</span>
</div>
<div class="h4 u-mt0 u-mb0">
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
Weekly fee
</div>
</div>
Expand All @@ -468,8 +482,12 @@ <h2>
<div class="m-payment-calculation__part">
<div class="h2 u-mb0 u-mt0">
{{ currency(card.other_periodic_fee_amount) }}
<span class="u-visually-hidden">
{{ card.other_periodic_fee_name | capitalize }},
{{ card.other_periodic_fee_frequency | lower }}
</span>
</div>
<div class="h4 u-mt0 u-mb0">
<div class="h4 u-mt0 u-mb0" aria-hidden="true">
{{ card.other_periodic_fee_name | capitalize }},
{{ card.other_periodic_fee_frequency | lower }}
</div>
Expand Down Expand Up @@ -602,8 +620,9 @@ <h2>
{%- do rewards.append(rewards_lookup[reward]) -%}
{%- endfor -%}
{{ oxfordize(rewards) | capitalize }}
<span class="u-visually-hidden">Rewards</span>
</div>
<div class="h4 u-mt0">
<div class="h4 u-mt0" aria-hidden="true">
Rewards
</div>
{% else %}
Expand Down Expand Up @@ -669,6 +688,13 @@ <h2>
- Minimum transfer fee: "($5 minimum)" added at the end
#}
{% if card.balance_transfer_offered %}
{% if card.transfer_apr_min is not none
and card.transfer_apr_max is not none
%}
{% set balance_transfer_apr_term = 'Balance transfer APR' %}
{% elif card.transfer_apr_median is not none %}
{% set balance_transfer_apr_term = 'Median balance transfer APR' %}
{% endif %}
<div class="m-payment-calculation u-mb15">
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
Expand All @@ -679,17 +705,13 @@ <h2>
{% elif card.transfer_apr_median is not none %}
{{ apr(card.transfer_apr_median) }}
{% endif %}
<span class="u-visually-hidden">
{{ balance_transfer_apr_term }} for {{ '%.0f' | format(card.median_length_of_balance_transfer_apr ) }}
months
</span>
</div>
<div class="h4 u-mt0">
{% if card.transfer_apr_min is not none
and card.transfer_apr_max is not none
%}
Balance transfer APR
{% elif card.transfer_apr_median is not none %}
Median balance transfer APR
{% endif %}
for
{{ '%.0f' | format(card.median_length_of_balance_transfer_apr ) }}
<div class="h4 u-mt0" aria-hidden="true">
{{ balance_transfer_apr_term }} for {{ '%.0f' | format(card.median_length_of_balance_transfer_apr ) }}
months
</div>
</div>
Expand All @@ -715,8 +737,12 @@ <h2>
and card.balance_transfer_fee_percentage is none
}}
{{ currency(0) if not card.balance_transfer_fees }}
<span class="u-visually-hidden">
Balance transfer fee
{{- ', see details' if card.balance_transfer_fee_calculation }}
</span>
</div>
<div class="h4 u-mt0">
<div class="h4 u-mt0" aria-hidden="true">
Balance transfer fee
{{- ', see details' if card.balance_transfer_fee_calculation }}
</div>
Expand Down Expand Up @@ -760,6 +786,15 @@ <h2>
Cash advance interest rate and fees
</h2>
{% if card.cash_advance_apr_offered %}
{% if card.advance_apr_min is not none
and card.advance_apr_max is not none
%}
{% set cash_advance_apr_term = 'Cash advance APR' %}
{% elif card.advance_apr_median is not none %}
{% set cash_advance_apr_term = 'Median cash advance APR' %}
{% else %}
{% set cash_advance_apr_term = 'Cash advance APR' %}
{% endif %}
<div class="m-payment-calculation u-mb15">
<div class="m-payment-calculation__part">
<div class="h2 u-mb0">
Expand All @@ -772,17 +807,10 @@ <h2>
{% else %}
N/A
{% endif %}
<span class="u-visually-hidden">{{ cash_advance_apr_term }}</span>
</div>
<div class="h4 u-mt0">
{% if card.advance_apr_min is not none
and card.advance_apr_max is not none
%}
Cash advance APR
{% elif card.advance_apr_median is not none %}
Median cash advance APR
{% else %}
Cash advance APR
{% endif %}
<div class="h4 u-mt0" aria-hidden="true">
{{ cash_advance_apr_term }}
</div>
</div>
<div class="m-payment-calculation__operator h2">+</div>
Expand All @@ -807,8 +835,12 @@ <h2>
and card.cash_advance_fee_percentage is none
}}
{{ currency(0) if not card.cash_advance_fees }}
<span class="u-visually-hidden">
Cash advance fee
{{- ', see details' if card.cash_advance_fee_calculation }}
</span>
</div>
<div class="h4 u-mt0">
<div class="h4 u-mt0" aria-hidden="true">
Cash advance fee
{{- ', see details' if card.cash_advance_fee_calculation }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion cfgov/tccp/jinja2/tccp/cards.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ <h1 class="u-mb45">{{ heading }}</h1>
{% endif %}

<div class="block block--flush-top">
<div class="o-filterable-list-results o-filterable-list-results--partial htmx-results">
<div class="o-filterable-list-results o-filterable-list-results--partial" id="htmx-results" aria-live="polite" aria-busy="false">
{% include "tccp/includes/card_list.html" %}
</div>
<div id="u-show-more-fade" class="u-js-only{% if form.ordering.data[0] == 'product_name' %} u-hidden{% endif %}" data-js-hook="behavior_show-more">
Expand Down
5 changes: 3 additions & 2 deletions cfgov/tccp/jinja2/tccp/includes/filter_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,9 @@
hx-trigger="change from:.htmx-container"
hx-swap="show:none"
hx-indicator=".htmx-container"
hx-target=".htmx-results"
hx-replace-url="true">
hx-target="#htmx-results"
hx-replace-url="true"
aria-controls="htmx-results">
<div class="content-l">

{{ render_form_fields(form) }}
Expand Down
4 changes: 2 additions & 2 deletions cfgov/tccp/jinja2/tccp/includes/speed_bump.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

========================================================================== #}
{%- macro speed_bump(value, large = false) -%}
<article class="o-well o-well--speed-bump{% if large %} o-well--speed-bump-large{% endif %}">
<div class="o-well o-well--speed-bump{% if large %} o-well--speed-bump-large{% endif %}">
{% if large %}
<p>
{{ svg_icon("lightbulb-round") }} Did you know:
Expand All @@ -31,5 +31,5 @@
{% if not large %}<strong>{{ svg_icon("lightbulb-round") }} Did you know:</strong>{% endif %}
{{ value.content }}{% if value.link %} <a href="{{ value.url }}">{{ value.link }}</a>{% endif %}
</p>
</article>
</div>
{%- endmacro -%}
49 changes: 23 additions & 26 deletions cfgov/tccp/jinja2/tccp/landing_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,24 +61,22 @@
<h2>
How is this comparison tool different than others you may have used?
</h2>
<p>
<ul class="m-list">
<li class="m-list__item">
Larger pool of cards, likely including banks you’ve never heard of with great rates
</li>
<li class="m-list__item m-list__item--has-icon">
<a
href="{{ url('tccp:about') }}"
>Credit card companies are required by law to submit data to us</a>
</li>
<li class="m-list__item m-list__item--has-icon">
No paid advertising
</li>
<li class="m-list__item m-list__item--has-icon">
Card interest is rated, to help you compare
</li>
</ul>
</p>
<ul class="m-list">
<li class="m-list__item">
Larger pool of cards, likely including banks you’ve never heard of with great rates
</li>
<li class="m-list__item">
<a
href="{{ url('tccp:about') }}"
>Credit card companies are required by law to submit data to us</a>
</li>
<li class="m-list__item">
No paid advertising
</li>
<li class="m-list__item">
Card interest is rated, to help you compare
</li>
</ul>
</div>

<div class="block block--flush-top">
Expand All @@ -95,7 +93,7 @@ <h2>

{{ form.credit_tier }}

<small class="a-label__helper a-label__helper--block">
<p class="a-label__helper a-label__helper--block">
If you don’t know it,
<a href="/ask-cfpb/where-can-i-get-my-credit-scores-en-316/"
>find your credit score</a>.
Expand All @@ -114,7 +112,7 @@ <h2>

{{ form.location }}

<div class="a-form-alert a-form-alert__error u-visually-hidden" id="location-required" role="alert">
<div class="a-form-alert a-form-alert--error u-visually-hidden" id="location-required" role="alert">
{{ svg_icon("error-round") }}
<span class="a-form-alert__text">
Required field, select a location.
Expand All @@ -123,18 +121,17 @@ <h2>
</div>
</div>

<legend class="a-legend">
I’m looking for a card that will help me...
</legend>

<div class="o-form__group">
<fieldset class="o-form__fieldset">
<fieldset class="o-form__fieldset o-form__fieldset--helpers">
<legend class="a-legend">
I’m looking for a card that will help me...
</legend>
{{ form.situations }}
</fieldset>
</div>

<div class="m-btn-group">
<button class="a-btn a-btn--full-on-xs" title="See cards for your situation" data-js-hook="behavior_submit-situations">See cards for your situation</button>
<button class="a-btn a-btn--full-on-xs" data-js-hook="behavior_submit-situations">See cards for your situation</button>
<div class="u-btn-helper">
Or <a href="{{ url('tccp:cards') }}">see all cards</a> in our database
</div>
Expand Down
Loading

0 comments on commit 588d9b9

Please sign in to comment.