Files
notifications-admin/tests
Tom Byers 663df4a4f9 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
2021-01-05 11:39:18 +00:00
..
2021-01-05 11:39:18 +00:00