Replace 'x' psuedo element with SVG

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

View File

@@ -832,8 +832,8 @@ def test_broadcast_page(
'ctry19-E92000001',
'ctry19-S92000003',
], [
'England remove',
'Scotland remove',
'England Remove England',
'Scotland Remove Scotland',
], [
'An area of 200,000 square miles Will get the alert',
'An extra area of 8,000 square miles is Likely to get the alert',
@@ -846,11 +846,11 @@ def test_broadcast_page(
'wd20-E05003228',
'wd20-E05003229',
], [
'Penrith Carleton remove',
'Penrith East remove',
'Penrith Pategill remove',
'Penrith South remove',
'Penrith West remove',
'Penrith Carleton Remove Penrith Carleton',
'Penrith East Remove Penrith East',
'Penrith Pategill Remove Penrith Pategill',
'Penrith South Remove Penrith South',
'Penrith West Remove Penrith West',
], [
'An area of 6 square miles Will get the alert',
'An extra area of 20 square miles is Likely to get the alert',
@@ -859,7 +859,7 @@ def test_broadcast_page(
([
'lad20-E09000019',
], [
'Islington remove',
'Islington Remove Islington',
], [
'An area of 10 square miles Will get the alert',
'An extra area of 5 square miles is Likely to get the alert',
@@ -868,7 +868,7 @@ def test_broadcast_page(
([
'ctyua19-E10000019',
], [
'Lincolnshire remove',
'Lincolnshire Remove Lincolnshire',
], [
'An area of 4,000 square miles Will get the alert',
'An extra area of 700 square miles is Likely to get the alert',
@@ -878,7 +878,7 @@ def test_broadcast_page(
'ctyua19-E10000019',
'ctyua19-E10000023'
], [
'Lincolnshire remove', 'North Yorkshire remove',
'Lincolnshire Remove Lincolnshire', 'North Yorkshire Remove North Yorkshire',
], [
'An area of 10,000 square miles Will get the alert',
'An extra area of 2,000 square miles is Likely to get the alert',
@@ -991,7 +991,7 @@ def test_preview_broadcast_areas_page_with_custom_polygons(
normalize_spaces(item.text)
for item in page.select('ul.area-list li.area-list-item')
] == [
'Area one remove', 'Area two remove', 'Area three remove',
'Area one Remove Area one', 'Area two Remove Area two', 'Area three Remove Area three',
]
assert len(page.select('#area-list-map')) == 1