Announce to the screen reader when a map marker is added

mainio · Apr 18, 2024 · d40d600 · d40d600
1 parent 4158dd4
commit d40d600
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/app/cells/decidim/plans/section_type_edit/field_map_point/show.erb b/app/cells/decidim/plans/section_type_edit/field_map_point/show.erb
@@ -6,7 +6,8 @@
       <div class="field" id="<%= address_id %>">
         <%= form.geocoding_field :address, object: model, label: false, id: field_id(:address), class: "input-group-field address-input-address", data: {
           "coordinates-url": geocoding_path,
-          "address-url": reverse_geocoding_path
+          "address-url": reverse_geocoding_path,
+          "screen-reader-announcement": t(".marker_added")
         }, disabled: field_disabled? %>
         <% unless field_disabled? %>
           <button type="button" class="link reset-input" data-target="#<%= address_id %>"><%= t(".reset_field") %></button>

diff --git a/app/packs/src/decidim/plans/plans_form.js b/app/packs/src/decidim/plans/plans_form.js
@@ -56,6 +56,18 @@ import "src/decidim/plans/exit_handler";
       });
     }
 
+    const announceMarkerAdded = ($field) => {
+      // This is a method that is not available by default but it can be added.
+      // See:
+      // https://github.com/decidim/decidim/pull/12707
+      if (!window.Decidim.announceForScreenReader) {
+        return;
+      }
+
+      const message = $field.data("screen-reader-announcement");
+      window.Decidim.announceForScreenReader(message);
+    }
+
     // Prevent the form submit event on keydown event in the address field
     $address.on("keydown.decidim-plans", (ev) => {
       if (ev.keyCode === 13) {
@@ -111,12 +123,14 @@ import "src/decidim/plans/exit_handler";
       } else {
         performCoordinatesLookup();
       }
+      announceMarkerAdded($address);
     });
 
     $lookup.on("click.decidim-plans", (ev) => {
       ev.preventDefault();
       autocomplete.close();
       performCoordinatesLookup();
+      announceMarkerAdded($address);
     });
 
     if ($latitude.val().length > 0 && $longitude.val().length > 0) {

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -514,6 +514,7 @@ en:
           sub_category_label: Choose a subtheme
         field_map_point:
           address_lookup_button: Show on map
+          marker_added: Marker added to the map.
           reset_field: Reset field
         field_image_attachments:
           add_attachment: Add image

diff --git a/config/locales/fi.yml b/config/locales/fi.yml
@@ -507,6 +507,7 @@ fi:
           sub_category_label: Valitse alateema
         field_map_point:
           address_lookup_button: Näytä kartalla
+          marker_added: Karttamerkki lisätty.
           reset_field: Tyhjennä kenttä
         field_image_attachments:
           add_attachment: Lisää kuva

diff --git a/config/locales/sv.yml b/config/locales/sv.yml
@@ -507,6 +507,7 @@ sv:
           sub_category_label: Välj ett undertema
         field_map_point:
           address_lookup_button: Visa på kartan
+          marker_added: Markör tillagd på kartan.
           reset_field: Återställ fältet
         field_image_attachments:
           add_attachment: Lägg till bilden