Merge pull request #6144 from consuldemocracy/serious_accessibility_issues

Fix most Axe serious accessibility issues

app/assets/javascripts/account_menu.js

@@ -0,0 +1,8 @@
+(function() {
+  "use strict";
+  App.AccountMenu = {
+    initialize: function() {
+      $(".account-menu > li > form button").attr("role", "menuitem");
+    }
+  };
+}).call(this);

app/assets/javascripts/application.js

@@ -117,6 +117,7 @@
 //= require budget_edit_associations
 //= require budget_hide_money
 //= require datepicker
+//= require account_menu
 //= require authenticity_token_refresh
 //= require_tree ./admin
 //= require_tree ./polls
@@ -181,6 +182,7 @@ var initialize_modules = function() {
   App.PollsForm.initialize();
   App.SDGRelatedListSelector.initialize();
   App.SDGManagementRelationSearch.initialize();
+  App.AccountMenu.initialize();
   App.AuthenticityTokenRefresh.initialize();
   App.CookiesConsent.initialize();
 };

app/assets/javascripts/map.js

@@ -28,17 +28,19 @@
         markers = L.layerGroup();
       }
       marker = null;
-      markerIcon = L.divIcon({
+      markerIcon = function(alt_text) {
-        className: "map-marker",
+        return L.divIcon({
-        iconSize: [30, 30],
+          className: "map-marker",
-        iconAnchor: [15, 40],
+          iconSize: [30, 30],
-        html: '<div class="map-icon"></div>'
+          iconAnchor: [15, 40],
-      });
+          html: $('<div class="map-icon"></div>').attr("aria-label", alt_text)[0].outerHTML
-      createMarker = function(latitude, longitude) {
+        });
+      };
+      createMarker = function(latitude, longitude, text) {
         var newMarker, markerLatLng;
         markerLatLng = new L.LatLng(latitude, longitude);
         newMarker = L.marker(markerLatLng, {
-          icon: markerIcon,
+          icon: markerIcon(text),
           draggable: editable
         });
         if (editable) {
@@ -71,7 +73,7 @@
 
       markerData = App.Map.markerData(element);
       if (markerData.lat && markerData.long && !investmentsMarkers) {
-        marker = createMarker(markerData.lat, markerData.long);
+        marker = createMarker(markerData.lat, markerData.long, markerData.title);
       }
       if (editable) {
         $(removeMarkerSelector).on("click", removeMarker);
@@ -115,7 +117,8 @@
 
       dataCoordinates = {
         lat: $(element).data("marker-latitude"),
-        long: $(element).data("marker-longitude")
+        long: $(element).data("marker-longitude"),
+        title: $(element).data("marker-title")
       };
       formCoordinates = {
         lat: inputs.lat.val(),
@@ -133,6 +136,7 @@
       return {
         lat: latitude,
         long: longitude,
+        title: dataCoordinates.title,
         zoom: formCoordinates.zoom
       };
     },
@@ -188,7 +192,7 @@
           var marker;
 
           if (App.Map.validCoordinates(coordinates)) {
-            marker = createMarker(coordinates.lat, coordinates.long);
+            marker = createMarker(coordinates.lat, coordinates.long, coordinates.title);
             marker.options.id = coordinates.investment_id;
             marker.bindPopup(App.Map.getPopupContent(coordinates));
           }

app/components/admin/legislation/draft_versions/form_component.html.erb

@@ -53,7 +53,7 @@
                                                  class: "legislation-draft-version-body" %>
         </div>
 
-        <div class="small-12 medium-6 column markdown-preview">
+        <div class="small-12 medium-6 column markdown-preview" tabindex="0">
         </div>
       </div>
     <% end %>

app/components/shared/map_location_component.rb

@@ -58,6 +58,7 @@ class Shared::MapLocationComponent < ApplicationComponent
         marker_investments_coordinates: investments_coordinates,
         marker_latitude: map_location.latitude.presence,
         marker_longitude: map_location.longitude.presence,
+        marker_title: map_location.title.presence,
         marker_clustering: feature?("map.feature.marker_clustering"),
         geozones: geozones_data
       }.merge(input_selectors)

app/models/map_location.rb

@@ -8,6 +8,10 @@ class MapLocation < ApplicationRecord
     latitude.present? && longitude.present? && zoom.present?
   end
 
+  def title
+    (proposal || investment)&.title
+  end
+
   def json_data
     {
       investment_id: investment_id,

spec/shared/system/mappable.rb

@@ -36,7 +36,8 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
       find("#new_map_location").click
 
       within ".map-location" do
-        expect(page).to have_css(".map-icon")
+        expect(page).to have_css ".map-icon"
+        expect(page).not_to have_css ".map-icon[aria-label]"
       end
     end
 
@@ -274,14 +275,15 @@ shared_examples "mappable" do |mappable_factory_name, mappable_association_name,
       set_arguments(arguments, mappable, mappable_path_arguments)
     end
 
-    scenario "Should display map and marker on #{mappable_factory_name} show page" do
+    scenario "Should display marker on #{mappable_factory_name} show page with aria label" do
       arguments[:id] = mappable.id
+      mappable.update!(title: "Malformed quote\" and >")
 
       do_login_for user, management: management if management
       visit send(mappable_show_path, arguments)
 
       within ".map-location" do
-        expect(page).to have_css(".map-icon")
+        expect(page).to have_css ".map-icon[aria-label='#{mappable.title}']"
       end
     end
 

spec/system/budgets/ballots_spec.rb

@@ -193,6 +193,8 @@ describe "Ballots" do
           expect(page).to have_content "OpenStreetMap"
           expect(page).to have_content "New Block"
           expect(page).to have_css ".map-icon", visible: :all, count: 2
+          expect(page).to have_css ".map-icon[aria-label='More bridges']", visible: :all
+          expect(page).to have_css ".map-icon[aria-label='Less bridges']", visible: :all
         end
 
         add_to_ballot("More bridges")