Change map key items from list to paragraphs

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

@@ -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 %}

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