mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-16 20:49:00 -04:00
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:
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user