mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-22 00:49:23 -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
196 lines
3.0 KiB
SCSS
196 lines
3.0 KiB
SCSS
%big-number,
|
|
.big-number {
|
|
|
|
display: block;
|
|
|
|
&-number,
|
|
&-label {
|
|
display: block;
|
|
}
|
|
|
|
&-number {
|
|
@include bold-48($tabular-numbers: true);
|
|
}
|
|
|
|
&-label {
|
|
@include core-19;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.pill .big-number-number {
|
|
|
|
// reduce padding until screen is bigger than 420px / zoomed below 300%
|
|
padding-left: govuk-spacing(1);
|
|
|
|
@include govuk-media-query($from: 420px) {
|
|
padding-left: govuk-spacing(2);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-dark {
|
|
@extend %big-number;
|
|
padding: govuk-spacing(3);
|
|
position: relative;
|
|
background: $black;
|
|
color: $white;
|
|
|
|
.big-number-number {
|
|
@include bold-36($tabular-numbers: true);
|
|
}
|
|
}
|
|
|
|
.big-number-smaller {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-36($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-smallest {
|
|
|
|
@extend %big-number;
|
|
|
|
.big-number-number {
|
|
@include bold-24($tabular-numbers: true);
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-with-status {
|
|
|
|
@extend %big-number;
|
|
position: relative;
|
|
margin-bottom: govuk-spacing(4);
|
|
|
|
.big-number,
|
|
.big-number-smaller {
|
|
padding: govuk-spacing(3);
|
|
position: relative;
|
|
background: $black;
|
|
color: $white;
|
|
}
|
|
|
|
.big-number-label {
|
|
|
|
padding-bottom: 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $link-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-link {
|
|
|
|
text-decoration: none;
|
|
background: $link-colour;
|
|
color: $white;
|
|
display: block;
|
|
border: 2px solid $link-colour;
|
|
margin-bottom: 5px;
|
|
|
|
&:hover {
|
|
|
|
color: $light-blue-25;
|
|
|
|
.big-number,
|
|
.big-number-number,
|
|
.big-number-smaller,
|
|
.big-number-label {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background: $govuk-focus-colour;
|
|
border: none;
|
|
padding: 2px; /* replace the spacing the border gave */
|
|
/* override the default focus style to inset the underline */
|
|
box-shadow: inset 0 -4px $govuk-focus-text-colour;
|
|
|
|
.big-number-number,
|
|
.big-number-smaller,
|
|
.big-number-label {
|
|
color: $govuk-focus-text-colour;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.big-number,
|
|
.big-number-smaller {
|
|
background: transparent;
|
|
}
|
|
|
|
.big-number-label {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
}
|
|
|
|
%big-number-status,
|
|
.big-number-status {
|
|
|
|
@include core-19;
|
|
display: block;
|
|
background: $green;
|
|
color: $white;
|
|
padding: 15px;
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active,
|
|
&:hover {
|
|
color: $white;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
color: $black;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-status-failing {
|
|
@extend %big-number-status;
|
|
background: $error-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.big-number-meta-wrapper {
|
|
|
|
position: relative;
|
|
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
|
|
background: $govuk-blue;
|
|
|
|
.big-number-meta {
|
|
|
|
padding: govuk-spacing(2) govuk-spacing(3);
|
|
color: $white;
|
|
pointer-events: none;
|
|
|
|
@include media(desktop) {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
right: 5px;
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
}
|