From 663df4a4f9d000eb72e08a55aae0943ab07108b8 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 23 Dec 2020 15:29:57 +0000 Subject: [PATCH 1/7] Remove
s from big_number text 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
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
s into 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 --- .../stylesheets/components/big-number.scss | 7 ++- app/templates/components/big-number.html | 46 +++++++++---------- tests/app/main/views/test_dashboard.py | 2 +- tests/app/main/views/test_platform_admin.py | 2 +- 4 files changed, 30 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss index b8dabea7b..aeb78df42 100644 --- a/app/assets/stylesheets/components/big-number.scss +++ b/app/assets/stylesheets/components/big-number.scss @@ -3,14 +3,17 @@ display: block; + &-number, + &-label { + display: block; + } + &-number { @include bold-48($tabular-numbers: true); - display: block; } &-label { @include core-19; - display: inline-block; padding-bottom: 10px; } diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html index 8b5176a04..50790b474 100644 --- a/app/templates/components/big-number.html +++ b/app/templates/components/big-number.html @@ -2,22 +2,22 @@ {% if link %} {% endif %} -
-
- {% if number is number %} - {% if currency %} - {{ "{}{:,.2f}".format(currency, number) }} - {% else %} - {{ "{:,}".format(number) }} + + + {% if number is number %} + {% if currency %} + {{ "{}{:,.2f}".format(currency, number) }} + {% else %} + {{ "{:,}".format(number) }} + {% endif %} + {% else %} + {{ number }} + {% endif %} + + {% if label %} + {{ label }} {% endif %} - {% else %} - {{ number }} - {% endif %} -
- {% if label %} - {{ label }} - {% endif %} -
+ {% if link %} {% endif %} @@ -36,10 +36,10 @@ smaller=False, smallest=False ) %} -
+ {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }} {% if show_failures %} -
+ {% if failures %} {% if failure_link %} @@ -53,23 +53,23 @@ {% else %} No failures {% endif %} -
+ {% endif %} -
+ {% endmacro %} {% macro big_number_simple(number, label) %} -
-
+ + {% if number is number %} {{ "{:,}".format(number) }} {% else %} {{ number }} {% endif %} -
+ {% if label %} {{ label }} {% endif %} -
+ {% endmacro %} diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py index 90eb91c76..23dc8ceab 100644 --- a/tests/app/main/views/test_dashboard.py +++ b/tests/app/main/views/test_dashboard.py @@ -1426,7 +1426,7 @@ def test_service_dashboard_updates_gets_dashboard_totals( service_id=SERVICE_ONE_ID, ) - numbers = [number.text.strip() for number in page.find_all('div', class_='big-number-number')] + numbers = [number.text.strip() for number in page.find_all('span', class_='big-number-number')] assert '123' in numbers assert '456' in numbers diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py index e4b99cb45..bff8eb62c 100644 --- a/tests/app/main/views/test_platform_admin.py +++ b/tests/app/main/views/test_platform_admin.py @@ -627,7 +627,7 @@ def test_platform_admin_displays_stats_in_right_boxes_and_with_correct_styling( # Email complaints status box - link exists and number is correct assert page.find('a', string='15 complaints') # SMS total box - number is correct - assert page.find_all('div', class_='big-number-number')[1].text.strip() == '168' + assert page.find_all('span', class_='big-number-number')[1].text.strip() == '168' # Test SMS box - number is correct assert '5' in page.find_all('div', class_='govuk-grid-column-one-third')[4].text # SMS technical failure status box - number is correct and failure class is used From 24af9788711a69a0a639eaae3800bb0f07d085c8 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Tue, 22 Dec 2020 14:50:17 +0000 Subject: [PATCH 2/7] Remove big_number import from table component Looks like this was added in: https://github.com/alphagov/notifications-admin/commit/4a226a7a29d83a4187ae2df089098bbdcebf2202 ...and used in the spark_bar_field macro. That macro was removed in: https://github.com/alphagov/notifications-admin/commit/89b88ee4cb681267177570a6b79db8ff1f4afdf3 ..but the import was missed out. --- app/templates/components/table.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/templates/components/table.html b/app/templates/components/table.html index e88a27f97..72b6cdc3b 100644 --- a/app/templates/components/table.html +++ b/app/templates/components/table.html @@ -1,5 +1,3 @@ -{% from "components/big-number.html" import big_number %} - {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
From 520574387107f4d8f49cc74a5c68d2061a56ba8a Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 24 Dec 2020 16:24:27 +0000 Subject: [PATCH 3/7] Remove big_number import from uploaded-letters Looks like the import was there when the template was added but there are no calls to it so removing it. --- app/templates/views/uploads/uploaded-letters.html | 1 - 1 file changed, 1 deletion(-) diff --git a/app/templates/views/uploads/uploaded-letters.html b/app/templates/views/uploads/uploaded-letters.html index 976859662..bfe7e2093 100644 --- a/app/templates/views/uploads/uploaded-letters.html +++ b/app/templates/views/uploads/uploaded-letters.html @@ -1,5 +1,4 @@ {% extends "withnav_template.html" %} -{% from 'components/big-number.html' import big_number %} {% from 'components/message-count-label.html' import message_count_label %} {% from "components/page-header.html" import page_header %} From fb442237a1bec5deba07e0a7dabd55e59eb1de41 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 24 Dec 2020 16:32:49 +0000 Subject: [PATCH 4/7] Remove big_number import from dashboard It was added in: https://github.com/alphagov/notifications-admin/pull/734 but neither macro is called so assuming it can be removed. --- app/templates/views/dashboard/dashboard.html | 1 - 1 file changed, 1 deletion(-) diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html index fa8405690..b0afa1d54 100644 --- a/app/templates/views/dashboard/dashboard.html +++ b/app/templates/views/dashboard/dashboard.html @@ -1,6 +1,5 @@ {% extends "withnav_template.html" %} -{% from "components/big-number.html" import big_number, big_number_with_status %} {% from "components/show-more.html" import show_more %} {% from "components/message-count-label.html" import message_count_label %} {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %} From 0237ce7725e38c95c8b49ea56b54e13475f8dfac Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 24 Dec 2020 16:34:25 +0000 Subject: [PATCH 5/7] Remove big_number import from _inbox partial It was used for the spark bar but, I think, wasn't removed when the call to big_number_with_status was: https://github.com/alphagov/notifications-admin/pull/3295 --- app/templates/views/dashboard/_inbox.html | 1 - 1 file changed, 1 deletion(-) diff --git a/app/templates/views/dashboard/_inbox.html b/app/templates/views/dashboard/_inbox.html index 901b23195..10ec4694a 100644 --- a/app/templates/views/dashboard/_inbox.html +++ b/app/templates/views/dashboard/_inbox.html @@ -1,4 +1,3 @@ -{% from "components/big-number.html" import big_number, big_number_with_status %} {% from "components/message-count-label.html" import message_count_label %}
From ab8a68ccd14c47a3dd7778cfc89d23cc684a788c Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 24 Dec 2020 16:38:17 +0000 Subject: [PATCH 6/7] Remove jobs/_scheduled.html template From what I can determine, the last include for this template was removed in: https://github.com/alphagov/notifications-admin/pull/3338 This assumes that it should have been removed then so removes it now. --- app/templates/views/jobs/_scheduled.html | 34 ------------------------ 1 file changed, 34 deletions(-) delete mode 100644 app/templates/views/jobs/_scheduled.html diff --git a/app/templates/views/jobs/_scheduled.html b/app/templates/views/jobs/_scheduled.html deleted file mode 100644 index edd6e4ef5..000000000 --- a/app/templates/views/jobs/_scheduled.html +++ /dev/null @@ -1,34 +0,0 @@ -{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %} -{% from "components/big-number.html" import big_number %} -{% from "components/show-more.html" import show_more %} - -{% if current_service.scheduled_jobs %} -
- {% call(item, row_number) list_table( - current_service.scheduled_jobs, - caption="In the next few days", - caption_visible=False, - empty_message='Nothing to see here', - field_headings=[ - 'File', - 'Messages to be sent' - ], - field_headings_visible=True - ) %} - {% call row_heading() %} -
- {{ item.original_file_name }} - - Sending {{ item.scheduled_for|format_datetime_relative }} - -
- {% endcall %} - {% call field() %} - {{ big_number( - item.notification_count, - smallest=True - ) }} - {% endcall %} - {% endcall %} -
-{% endif %} From 72bf9679c61a26a06844f5fb48f35cdc5f87123b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 24 Dec 2020 16:40:20 +0000 Subject: [PATCH 7/7] Remove big_number import from _upcoming template Think the only use of the macro in this page was removed in: https://github.com/alphagov/notifications-admin/pull/3316 ...but the import wasn't. This removes it. --- app/templates/views/dashboard/_upcoming.html | 1 - 1 file changed, 1 deletion(-) diff --git a/app/templates/views/dashboard/_upcoming.html b/app/templates/views/dashboard/_upcoming.html index cd0579195..23ab02890 100644 --- a/app/templates/views/dashboard/_upcoming.html +++ b/app/templates/views/dashboard/_upcoming.html @@ -1,5 +1,4 @@ {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %} -{% from "components/big-number.html" import big_number %} {% from "components/show-more.html" import show_more %}