From b968c0299ec0bd94a09a01459a4b1179b31308d4 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 7 Oct 2021 14:29:51 +0100
Subject: [PATCH] Change map key items from list to paragraphs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I recently found that there is a problem with the
overuse of lists online for sequences of content
that don't need to be in a list. I think that's
what we're doing with our map key.

The problem is large enough that browsers include
heuristics to determine if lists should be
presented as such to the accessibility API (and so
to assistive tech' like screen readers). This
thread contains more details:

https://twitter.com/cookiecrook/status/1337226933822603270

Based on the metric described in the thread:

'If all of the styles that make it “list-like”
have been removed, it’s no longer relevant to
convey it as a list.'

...or

'if a sighted user doesn’t need to know it’s a
list, why would a screen reader user need to know
or want to know?'

Based on that, I think the items in our map key
should be paragraphs, not items in a list.

Also, they read really well as sentences when
announced by a screen reader, partly because of
the extra (hidden) info @quis added to them.
This also doesn't change their visual appearance.
---
 app/templates/views/broadcast/macros/area-map.html | 14 ++++++--------
 tests/app/main/views/test_broadcast.py             |  4 ++--
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html
index 289bb24e3..06c9c67b0 100644
--- a/app/templates/views/broadcast/macros/area-map.html
+++ b/app/templates/views/broadcast/macros/area-map.html
@@ -1,15 +1,14 @@
 {% macro map(broadcast_message) %}
   <div id="area-list-map"></div>
-  <ul>
-    <li class="area-list-key area-list-key--certain">
+    <p class="area-list-key area-list-key--certain">
       <span class="visually-hidden">
         An area of {{ (broadcast_message.simple_polygons.estimated_area)|round_to_significant_figures(1)|format_thousands }} square miles
       </span>
       Will get
       <span class="visually-hidden">the</span>
       alert
-    </li>
-    <li class="area-list-key area-list-key--likely">
+    </p>
+    <p class="area-list-key area-list-key--likely">
       <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>
@@ -18,8 +17,8 @@
         the
       </span>
       alert
-    </li>
-    <li class="area-list-key area-list-key--phone-estimate">
+    </p>
+    <p class="area-list-key area-list-key--phone-estimate">
       {% if broadcast_message.count_of_phones == 0 %}
         Unknown number of phones
       {% elif broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
@@ -27,6 +26,5 @@
       {% else %}
         {{ broadcast_message.count_of_phones|format_thousands }} to {{ broadcast_message.count_of_phones_likely|format_thousands }} phones
       {% endif %}
-    </li>
-  </ul>
+    </p>
 {% endmacro %}
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 3c13b281c..8d83ca66d 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -923,7 +923,7 @@ def test_preview_broadcast_areas_page(
 
     assert [
         normalize_spaces(item.text)
-        for item in page.select('ul li.area-list-key')
+        for item in page.select('.area-list-key')
     ] == estimates
 
 
@@ -998,7 +998,7 @@ def test_preview_broadcast_areas_page_with_custom_polygons(
 
     assert [
         normalize_spaces(item.text)
-        for item in page.select('ul li.area-list-key')
+        for item in page.select('.area-list-key')
     ] == expected_list_items