Add iframe title attributes to map blocks (#208)

coderedcms/blocks/html_blocks.py

@@ -69,6 +69,12 @@ class EmbedGoogleMapBlock(BaseBlock):
         label=_('Search query'),
         help_text=_('Address or search term used to find your location on the map.'),
     )
+    map_title = blocks.CharBlock(
+        required=False,
+        max_length=255,
+        label=_('Map title'),
+        help_text=_('Map title for screen readers, ex: "Map to Goodale Park"')
+    )
     place_id = blocks.CharBlock(
         required=False,
         max_length=255,

coderedcms/templates/coderedcms/blocks/google_map.html

@@ -1,8 +1,8 @@
 <div class="embed-responsive embed-responsive-16by9 {{self.settings.custom_css_clas}}"
 {% if self.custom_css_id %}id="{{self.settings.custom_css_id}}"{% endif %}>
-    {% if self.place_id %}
+	{% if self.place_id %}
-        <iframe class="embed-responsive-item" width="100%" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:{{ self.place_id }}&zoom={{ self.map_zoom_level }}&key={{ settings.GoogleApiSettings.google_maps_api_key}}" allowfullscreen></iframe>
+		<iframe class="embed-responsive-item" width="100%" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:{{ self.place_id }}&zoom={{ self.map_zoom_level }}&key={{ settings.GoogleApiSettings.google_maps_api_key}}" title="{{self.map_title}}" allowfullscreen></iframe>
-    {% else %}
+	{% else %}
-        <iframe class="embed-responsive-item" width="100%" style="border:0" src="https://maps.google.com/maps?q={{ self.search|urlencode }}&output=embed" allowfullscreen></iframe>
+		<iframe class="embed-responsive-item" width="100%" style="border:0" src="https://maps.google.com/maps?q={{ self.search|urlencode }}&output=embed" title="{{self.map_title}}" allowfullscreen></iframe>
-    {% endif %}
+	{% endif %}
 </div>

coderedcms/templates/coderedcms/includes/iframe_gmap.html

@@ -1,7 +1,9 @@
+{% load i18n %}
+
 {% if address %}
 <div class="my-2">
     <div class="embed-responsive embed-responsive-16by9 mb-5">
-        <iframe class="embed-responsive-item" width="100%" style="border:0" src="https://maps.google.com/maps?q={{ address }}&output=embed" allowfullscreen></iframe>
+        <iframe class="embed-responsive-item" width="100%" style="border:0" src="https://maps.google.com/maps?q={{ address }}&output=embed" title="{% trans 'Map of' %} {{address}}" allowfullscreen></iframe>
     </div>
 </div>
 {% endif %}