Remove <div>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
<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
This commit is contained in:
Tom Byers
2020-12-23 15:29:57 +00:00
parent 8a751aa5df
commit 663df4a4f9
4 changed files with 30 additions and 27 deletions

View File

@@ -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

View File

@@ -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