Better sorting of countries for screen reader

src/assets/js/keyboard-mode.js

@@ -505,7 +505,7 @@ function assignNumbersToCountries() {
 function getAnnouncementText(baseText) {
     if (KEYBOARD_MODE_ACTIVE) {
         const audioFeedbackIsEnabled = window.auditoryFeedback && window.auditoryFeedback.isEnabled();
-        return `${baseText}. ${getVisibleCountriesSummary()}. ${audioFeedbackIsEnabled ? "Press A to turn off audio feedback." : ""}`;
+        return `${baseText} ${getVisibleCountriesSummary()}, ${audioFeedbackIsEnabled ? "Press A to turn off audio feedback." : ""}`;
     }
     return baseText;
 }
@@ -668,6 +668,11 @@ function getAnnouncementText(baseText) {
                     // Update visible countries and keyboard mode
                     updateVisibleCountries(zoom);
 
+                    // Announce if keyboard mode was just disabled
+                    if (KEYBOARD_MODE_ACTIVE && s < MIN_ZOOM_LEVEL_FOR_KEYBOARD_MODE) {
+                        announcer.announce("Keyboard mode disabled.", "assertive", 100);
+                    }
+
                     // Update announcement to include country count only when keyboard mode is active
                     setTimeout(() => {
                         const baseMessage = `Zoom ${e.key === '+' ? "in" : "out"} level ${parseInt(newScale)}`;
@@ -708,7 +713,7 @@ function getAnnouncementText(baseText) {
                     const countries = getCurrentlyVisibleCountries();
 
                     // Sort countries by their assigned number
-                    countries.sort((a, b) => a.number.localeCompare(b.number));
+                    countries.sort((a, b) => parseInt(a.number) - parseInt(b.number));
 
                     countries.forEach((country) => {
                         message += `${country.number}: ${country.name} (${country.artistCount} artists), `;
@@ -747,6 +752,11 @@ function getAnnouncementText(baseText) {
     }
 
     keyboardMode.cleanup = function () {
+        // Announce if keyboard mode was active before cleanup
+        if (KEYBOARD_MODE_ACTIVE) {
+            announcer.announce("Keyboard mode disabled.", "assertive", 100);
+        }
+
         hideKeyboardModeMessage();
         KEYBOARD_MODE_ACTIVE = false;
         // Reset the letter map when exiting keyboard mode completely

src/assets/js/map.js

@@ -640,10 +640,11 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
 
     // Append the artists to the details section
     pageItems.forEach(artist => {
-      var artistDiv = d3.select("#top-artist-list")
+      var artistLi = d3.select("#top-artist-list")
       .append("li")
-        .attr("class", "artist-li")
-      .append("button")
+        .attr("class", "artist-li");
+
+      var artistDiv = artistLi.append("button")
         .attr({
           "class": `scrobbled artist-div lowlight`,
           "data-artist": artist.artist
@@ -654,6 +655,9 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
             "lowlight": true,
             "highlight": false
           });
+          // Remove aria-owns from all li elements
+          d3.selectAll(".artist-li").attr("aria-owns", null);
+
           // Highlight selected artist
           d3.select(this).classed({
             "highlight": true,
@@ -662,6 +666,9 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
           d3.selectAll(".artist-div").attr("aria-pressed", "false");
           d3.select(this).attr("aria-pressed", "true");
 
+          // Add aria-owns to the parent li element
+          d3.select(this.parentNode).attr("aria-owns", "summaryText");
+
           makeSummaryDiv(d3.select(this).attr("data-artist"), []);
         });
 
@@ -971,6 +978,9 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
     currentCountry = null;
     api.cancelRecommendationRequests();
 
+    // Remove aria-owns from all li elements
+    d3.selectAll(".artist-li").attr("aria-owns", null);
+
     infoContainer.transition().style("opacity", 0).duration(prefersReducedMotion ? 0 : 1000);
 
     infoContainer.classed("hidden", true);
@@ -1106,7 +1116,7 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
       makeArtistDiv(d);
       highlightCountry(true, d);
 
-      announcer.announce(`Opened ${countryNames.find(c => c.id === d.id).name}`, "assertive");
+      announcer.announce(`Opened ${countryNames.find(c => c.id === d.id).name}. Use TAB key to find scrobbled artists.`, "assertive");
 
       //Special rules for special countries:
       switch (d.id) {
@@ -1150,7 +1160,7 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
 
       //Landet är redan centrerat
     } else {
-      announcer.announce(`Left ${countryNames.find(c => c.id === d.id).name}`, "assertive");
+      announcer.announce(`Left ${countryNames.find(c => c.id === d.id).name}`, "polite");
       x = -width / 2;
       y = -height / 2 - height * 0.08;
       k = 1
@@ -1173,6 +1183,10 @@ window.addEventListener('wheel', function() { window.lastInputWasKeyboard = fals
   }
 
 function dismissCenteredCountry() {
+  if (centered) {
+    const countryName = countryNames.find(c => c.id === centered.id).name;
+    announcer.announce(`Left ${countryName}`, "polite");
+  }
   removeArtistDiv();
   highlightCountry(false);
   centered = null;