darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Replace 'x' psuedo element with SVG

Browse Source 
The current link button for removing an area is
created using a psuedo element with an 'x' as
content.

The inline box for the 'x' overlapped its parent.
This is visible in high contrast mode, breaking the
parent's border. Despite existing in CSS, the 'x'
is also announced by screen readers, which is not
what we want.

This changes it to be an inline SVG with a role of
image. It doesn't require as large an inline box
so doesn't cause visual issues in high contrast
modes. It also means we can set it's label similar to
how you would an image's alt text, giving us
control over what is announced by screen readers.

This commit also includes some extra CSS,
targeting high contrast modes, giving the
link button the following when viewed in those
modes:
- a complete border so it is
  distinguishable from the list item
- a focus style
This commit is contained in:
Tom Byers
2021-10-21 13:26:40 +01:00
parent 82eaf4e40c
commit 9d59edb3ce
3 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
app/assets/stylesheets/components/area-list.scss
View File

@@ -6,55 +6,65 @@
display: inline-block;
border: 2px solid $black;
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
// Create space for the remove link on the right of the list item (including borders)
padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px + (2 * 2px)) govuk-spacing(1) govuk-spacing(2);
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
position: relative;
&-remove {
font-size: 0;
display: block;
position: absolute;
top: -2px; // cover list-item border-top
right: -2px; // cover list-item border-right
bottom: -2px; // cover list-item border-bottom
width: 35px;
background: $govuk-blue;
color: $white;
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1);
border: 2px solid $govuk-blue;
border-left: none;
text-align: center;
text-decoration: none;
&:before {
content: "×";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
width: 35px;
background: $govuk-blue;
color: $white;
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
border: 2px solid $govuk-blue;
border-left: none;
font-size: 24px;
font-weight: normal;
line-height: 40px;
text-align: center;
text-decoration: none;
// The box-shadow that separates the remove link from the list item is hidden in
// high contrast mode. Remake using a border instead
@media (-ms-high-contrast: active), (forced-colors: active) {
& {
border-left: 2px solid $govuk-blue;
}
}
&:hover,
&:focus {
color: $light-blue-25;
}
&:before {
color: $light-blue-25;
@media (-ms-high-contrast: active), (forced-colors: active) {
&,
&:hover,
&:focus {
color: CanvasText;
}
}
&:focus {
outline: none;
&:before {
background: $govuk-focus-colour;
color: $black;
border-color: $black;
}
background: $govuk-focus-colour;
color: $black;
border-color: $black;
}
// counter background colours being overridden
@media (-ms-high-contrast: active), (forced-colors: active) {
&:focus {
outline: 3px solid transparent;
color: CanvasText;
}
}
}
&:last-child {

11
app/templates/views/broadcast/preview-areas.html
View File

@@ -30,7 +30,16 @@
<ul class="area-list">
{% endif %}
<li class="area-list-item">
{{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
{{ area.name }}
<a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
<svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
<title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
<g transform="rotate(45),translate(1, -7.5)">
<line stroke-width="2" id="svg_1" y2="0" x2="7.5" y1="15" x1="7.5" stroke="currentColor" fill="none"/>
<line stroke-width="2" id="svg_3" y2="7.5" x2="0" y1="7.5" x1="15" stroke="currentColor" fill="none"/>
</g>
</svg>
</a>
</li>
{% if loop.last %}
</ul>