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/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 }}