mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-16 15:21:39 -04:00
663df4a4f9
An accessiblity audit done as part of Notify's service assessment raised the following problem with our big_number component. When you turn CSS off, the sentence in the component is split onto separate lines. This was because the number part is wrapped in a <div> which browsers were interpreting as being a separate sentence to the label. So "1 letter", where "letter" is the label, was seen as: "1" "letter" The accessibility expert consulted on this pointed out that this would sound confusing for users of screen readers when moving through the document sentence by sentence. These changes: - make the <div>s into <span>s which are 'phrasing content' and so are interpreted as part of the same sentence - change the CSS so the number will still sit on top of its label text The HTML5 spec has a section on how browsers should arrange text into paragraphs that explains what was happening in more detail: https://www.w3.org/TR/html52/dom.html#paragraphs
76 lines
2.1 KiB
HTML
76 lines
2.1 KiB
HTML
{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
|
||
{% if link %}
|
||
<a class="govuk-link govuk-link--no-visited-state big-number-link" href="{{ link }}">
|
||
{% endif %}
|
||
<span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
|
||
<span class="big-number-number">
|
||
{% if number is number %}
|
||
{% if currency %}
|
||
{{ "{}{:,.2f}".format(currency, number) }}
|
||
{% else %}
|
||
{{ "{:,}".format(number) }}
|
||
{% endif %}
|
||
{% else %}
|
||
{{ number }}
|
||
{% endif %}
|
||
</span>
|
||
{% if label %}
|
||
<span class="big-number-label">{{ label }}</span>
|
||
{% endif %}
|
||
</span>
|
||
{% if link %}
|
||
</a>
|
||
{% endif %}
|
||
{% endmacro %}
|
||
|
||
|
||
{% macro big_number_with_status(
|
||
number,
|
||
label,
|
||
failures,
|
||
failure_percentage,
|
||
danger_zone=False,
|
||
failure_link=None,
|
||
link=None,
|
||
show_failures=True,
|
||
smaller=False,
|
||
smallest=False
|
||
) %}
|
||
<span class="big-number-with-status">
|
||
{{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
|
||
{% if show_failures %}
|
||
<span class="big-number-status{% if danger_zone %}-failing{% endif %}">
|
||
{% if failures %}
|
||
{% if failure_link %}
|
||
<a class="govuk-link govuk-link--no-visited-state" href="{{ failure_link }}">
|
||
{{ "{:,}".format(failures) }}
|
||
failed – {{ failure_percentage }}%
|
||
</a>
|
||
{% else %}
|
||
{{ "{:,}".format(failures) }}
|
||
failed – {{ failure_percentage }}%
|
||
{% endif %}
|
||
{% else %}
|
||
No failures
|
||
{% endif %}
|
||
</span>
|
||
{% endif %}
|
||
</span>
|
||
{% endmacro %}
|
||
|
||
|
||
{% macro big_number_simple(number, label) %}
|
||
<span class="big-number-dark bottom-gutter-2-3">
|
||
<span class="big-number-number">
|
||
{% if number is number %}
|
||
{{ "{:,}".format(number) }}
|
||
{% else %}
|
||
{{ number }}
|
||
{% endif %}
|
||
</span>
|
||
{% if label %}
|
||
<span class="big-number-label">{{ label }}</span>
|
||
{% endif %}
|
||
</span>
|
||
{% endmacro %}
|