Remove extra group from remove SVG

The SVG used for the 'X' in the remove area button
has 2 <g> (group) elements, one wrapping
everything and one wrapping the two lines that
make the cross. The first <g> isn't needed and
means that the SVG ends up with 2 accessible
names:
1. the <svg> element gets named with the text from
   the <title> because of it's aria-labelledby
   attribute referencing it
2. the first <g> gets named with the text from
   the <title> because the algorithm that gets the
   name looks for any descendent <title>s

This removes the first <g> so only the accessible
name for the <svg> gets announced.
This commit is contained in:
Tom Byers
2021-11-03 10:33:10 +00:00
parent 7e2bd45c73
commit 21999f152a

View File

@@ -32,7 +32,7 @@
<li class="area-list-item">
{{ area.name }}
<a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" 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="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
<svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg">
<title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
<g transform="rotate(45),translate(1, -6)">
<line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>