Fix #11813: Add ARIA labels and alt text to map markers for accessibi…

.github/workflows/merge-pr-sentry-release.yml

@@ -9,7 +9,7 @@ jobs:
     steps:
       - name: Triggering tests workflow
         run: echo "Triggering tests workflow"
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Sentry Release
         uses: getsentry/[email protected]
         env:

.github/workflows/rebase.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the latest code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           fetch-depth: 0 # otherwise, you will fail to push refs to dest repo

.github/workflows/tests.yml

@@ -20,7 +20,7 @@ jobs:
   unit-tests:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.3 # Not needed with a .ruby-version file
@@ -48,7 +48,7 @@ jobs:
           # Maps port 6379 on service container to the host
           - 6379:6379
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.3 # Not needed with a .ruby-version file
@@ -73,7 +73,7 @@ jobs:
   integration-tests:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.3 # Not needed with a .ruby-version file
@@ -109,7 +109,7 @@ jobs:
           # Maps port 6379 on service container to the host
           - 6379:6379
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.3 # Not needed with a .ruby-version file
@@ -136,7 +136,7 @@ jobs:
         chromedriver --url-base=/wd/hub &
         bundle exec rails test:system
     - name: Archive system test screenshots
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: system-test-screenshots
         path: tmp/screenshots/*
@@ -156,7 +156,7 @@ jobs:
           # Maps port 6379 on service container to the host
           - 6379:6379
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - uses: ruby/setup-ruby@v1
       with:
         ruby-version: 2.7.3 # Not needed with a .ruby-version file
@@ -183,7 +183,7 @@ jobs:
         chromedriver --url-base=/wd/hub &
         bundle exec rails test test/comment_system_tests
     - name: Archive system test screenshots
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: system-test-screenshots
         path: tmp/screenshots/*

app/assets/javascripts/leafletHelper.js

@@ -39,8 +39,19 @@
                    var title = data.items[i].doc_title;
                    var m = L.marker([data.items[i].latitude, data.items[i].longitude], {
                        title: title,
-                       icon: default_markers
+                       icon: default_markers,
+                       alt: title,
+                       keyboard: true,
+                       aria: true
                    }) ;
+
+                   // Set aria-label on the marker's DOM element after it's added to the map
+                   m.on('add', function() {
+                       if (this._icon) {
+                           this._icon.setAttribute('aria-label', "User marker: " + title);
+                           this._icon.setAttribute('role', 'button');
+                       }
+                   });
                    if(markers_hash.has(mid) === false){
                        m.addTo(map).bindPopup("<a href=" + url + ">" + title + "</a>") ;
                        markers_hash.set(mid , m) ;
@@ -83,7 +94,21 @@
                var time_since = TimeAgo().inWords(new Date(data.items[i].created_at));
                // var comment_count = data.items[i].comment_count;
 
-               var m = L.marker([data.items[i].latitude, data.items[i].longitude], {icon: map_marker});
+               var m = L.marker([data.items[i].latitude, data.items[i].longitude], {
+                   icon: map_marker,
+                   title: title,
+                   alt: title,
+                   keyboard: true,
+                   aria: true
+               });
+
+               // Set aria-label on the marker's DOM element after it's added to the map
+               m.on('add', function() {
+                   if (this._icon) {
+                       this._icon.setAttribute('aria-label', nodetype + " marker: " + title);
+                       this._icon.setAttribute('role', 'button');
+                   }
+               });
 
                if(markers_hash.has(mid) === false){
                   var popup_content = "";