Add estimated areas for non-visual users

Since the key relies on visual association between the shapes on the
maps and the styling of the key, it won’t work for non-visual users.
An alternative way of giving them the same information is by providing
the size of the area numerically.

app/broadcast_areas/polygons.py

@@ -14,6 +14,9 @@ class Polygons():
 
     approx_metres_to_degree = 111_320
     approx_square_metres_to_square_degree = approx_metres_to_degree ** 2
+    square_degrees_to_square_miles = (
+        approx_square_metres_to_square_degree / (1000 * 1000) * 0.386102
+    )
 
     # Estimated amount of bleed into neigbouring areas based on typical
     # range/separation of cell towers.
@@ -161,6 +164,12 @@ class Polygons():
     def point_count(self):
         return len(list(itertools.chain(*self.as_coordinate_pairs_long_lat)))
 
+    @property
+    def estimated_area(self):
+        return sum(
+            polygon.area for polygon in self
+        ) * self.square_degrees_to_square_miles
+
 
 def flatten_polygons(polygons):
     if isinstance(polygons, GeometryCollection):

app/templates/views/broadcast/macros/area-map.html

@@ -0,0 +1,23 @@
+{% macro map(broadcast_message) %}
+  <div id="map"></div>
+  <ul>
+    <li class="area-key area-key--certain">
+      <span class="visually-hidden">
+        An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
+      </span>
+      Will get
+      <span class="visually-hidden">the</span>
+      alert
+    </li>
+    <li class="area-key area-key--likely">
+      <span class="visually-hidden">
+        An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
+      </span>
+      Likely to get
+      <span class="visually-hidden">
+        the
+      </span>
+      alert
+    </li>
+  </ul>
+{% endmacro %}

app/templates/views/broadcast/preview-areas.html

@@ -1,6 +1,7 @@
 {% from "components/button/macro.njk" import govukButton %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "views/broadcast/macros/area-map.html" import map %}
 
 {% extends "withnav_template.html" %}
 
@@ -51,15 +52,7 @@
   {% endfor %}
 
   {% if broadcast_message.areas %}
-    <div id="map"></div>
-    <div>
-      <div class="area-key area-key--certain">
-        Will get alert
-      </div>
-      <div class="area-key area-key--likely">
-        Likely to get alert
-      </div>
-    </div>
+    {{ map(broadcast_message) }}
     <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
       {{ page_footer('Continue to preview') }}
     </form>

app/templates/views/broadcast/view-message.html

@@ -5,6 +5,7 @@
 {% from "components/banner.html" import banner %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "views/broadcast/macros/area-map.html" import map %}
 
 {% extends "withnav_template.html" %}
 
@@ -139,7 +140,7 @@
 
   {{ govukDetails({
     "summaryText": "Show map",
-    "html": '<div id="map"></div>'
+    "html": map(broadcast_message)
   }) }}
 
   {{ broadcast_message.template|string }}

tests/app/main/views/test_broadcast.py

@@ -331,12 +331,30 @@ def test_preview_broadcast_areas_page(
     mock_get_draft_broadcast_message,
 ):
     service_one['permissions'] += ['broadcast']
-    client_request.get(
+    page = client_request.get(
         '.preview_broadcast_areas',
         service_id=SERVICE_ONE_ID,
         broadcast_message_id=fake_uuid,
     )
 
+    assert [
+        normalize_spaces(item.text)
+        for item in page.select('ul.area-list li.area-list-item')
+    ] == [
+        'England remove',
+        'Scotland remove',
+    ]
+
+    assert len(page.select('#map')) == 1
+
+    assert [
+        normalize_spaces(item.text)
+        for item in page.select('ul li.area-key')
+    ] == [
+        'An area of 176,714.9 square miles Will get the alert',
+        'An extra area of 3,052.8 square miles is Likely to get the alert',
+    ]
+
 
 def test_choose_broadcast_library_page(
     client_request,