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

Add GOVUK visually hidden style for map key

Browse Source 
The sentences in the key to the map have 2 forms:
1. the visual form, with an graphic pattern
   alongside text saying what the pattern means
   in the map
2. the semantic form, with text describing what
   the pattern means and how big an area it covers
   for this alert

This is achieved by making the graphic
non-semantic and having hidden words in the
sentence for each paragraph.

While the spaces between words are correct for
both forms of these sentences, we observed screen
readers speaking some groups of words as one when
they spoke the sentence. Most noticably, 'the
alert' was spoken as 'thealert'.

Swapping the class used to hide the visually
hidden words from ours to the GOVUK one seemed to
fix this. It's unclear why it does but the
`govuk-visually-hidden` class adds the following
styles to those in ours:
- width: 1px
- height: 1px
- white-space: nowrap

It also has `margin: 0` instead of `margin: -1px`.
This commit is contained in:
Tom Byers
2021-11-04 15:09:25 +00:00
parent bc22c206b9
commit 2e53a2b6f8
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/templates/views/broadcast/macros/area-map.html
View File

@@ -5,11 +5,13 @@
<rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" />
<polygon points="25 5, 45 25, 25 45, 5 25" stroke="#0B0B0C" stroke-width="2" fill="#96C6E2" />
</svg>
<span class="visually-hidden">
An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles
<span class="govuk-visually-hidden">
An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles&nbsp;
</span>
Will get
<span class="visually-hidden">the</span>
<span class="govuk-visually-hidden">
the
</span>
alert
</p>
<p class="area-list-key area-list-key--likely">
@@ -17,11 +19,11 @@
<rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" />
<polygon points="25 5, 45 25, 25 45, 5 25" stroke="#005ea5" stroke-opacity="1" stroke-width="2" stroke-linecap="square" stroke-linejoin="round" stroke-dasharray="4,7.5,5,7.5,8,8,5,8,7.5,8,5,8,7,8,5,8,4" fill="#2B8CC4" fill-opacity="0.15" />
</svg>
<span class="visually-hidden">
An extra area of {{ (broadcast_message.simple_polygons_with_bleed.estimated_area - broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles is
<span class="govuk-visually-hidden">
An extra area of {{ (broadcast_message.simple_polygons_with_bleed.estimated_area - broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles is&nbsp;
</span>
Likely to get
<span class="visually-hidden">
<span class="govuk-visually-hidden">
the
</span>
alert