Improve screen reader experience based on user feedback.

src/assets/js/keyboard-mode.js

@@ -56,13 +56,17 @@ const handleLetterKeyPress = (e) => {
 }
 
 function getCurrentlyVisibleCountries() {
+    const userName = window.location.href.split("username=")[1];
+    let data = script.getCurrentData();
     // return an array consiting of objects with the country name in plain text + the index number of the country
     let formattedCountries = [];
     visibleCountries.forEach((country) => {
+        const countryId = parseInt(country.id.slice(1));
         const letter = ALPHABET[visibleCountries.indexOf(country)];
         formattedCountries.push({
             name: utils.getCountryNameFromId(parseInt(country.id.slice(1))),
-            number: letter
+            number: letter,
+            artistCount: data[countryId][userName].length || 0
         });
     });
     return formattedCountries;
@@ -354,7 +358,7 @@ function getVisibleCountries(zoom) {
                     let message = "List of countries: ";
                     const countries = getCurrentlyVisibleCountries();
                     countries.forEach((country) => {
-                        message += `${country.number}: ${country.name}, `;
+                        message += `${country.number}: ${country.name} (${country.artistCount} artists), `;
                     });
                     announcer.announce(message, "assertive", 100);
                     console.log(message);

src/assets/js/script.js

@@ -298,11 +298,7 @@ var countryCountObj = {};
         // Screen reader status update every 30 seconds
         setTimeout(function () {
             announcer.announce(document.getElementById("loading-text").innerText);
-        }, 3000);
-        announcer.announce(document.getElementById("loading-text").innerText);
-        announcementIntervalId = setInterval(() => {
-            announcer.announce(document.getElementById("loading-text").innerText);
-        }, 45000);
+        }, 6000);
 
         setTimeout(function () {
             if (d3.select("#loading-text").html() === "Getting library...") {
@@ -311,7 +307,6 @@ var countryCountObj = {};
                     if (d3.select("#loading-text").html() === "Last.fm is taking<br>a long time to<br>respond...") {
                         d3.select("#loading-text").html("Maybe <a href='http://last.fm' target='_blank'>last.fm</a> has<br>gone offline...")
                             .style("pointer-events", "all");
-                        clearInterval(announcementIntervalId);
                     }
                 }, 8000);
             }
@@ -414,10 +409,10 @@ var countryCountObj = {};
 
         // Screen reader status update
         clearInterval(announcementIntervalId);
-        announcer.announce("All artists are loaded!");
+        announcer.announce("All artists have been loaded!");
         const map = document.querySelector("#map-container svg")
         const existingAriaLabelledBy = map.getAttribute("aria-labelledby");
-        map.setAttribute("aria-labelledby", `${existingAriaLabelledBy} progress-text`);
+        map.setAttribute("aria-labelledby", `${existingAriaLabelledBy} progress-text sr-instructions`);
 
         // We're done, fade out loader
         var loader = d3.select(".loader");

src/assets/js/search.js

@@ -47,7 +47,7 @@ let filteredShortcuts = [];
 
         let announcement = '';
         if (announcementParts.length > 0) {
-            announcement = 'Showing ' + announcementParts.slice(0, -1).join(', ') + (announcementParts.length > 1 ? ' and ' : '') + announcementParts.slice(-1);
+            announcement = 'Showing ' + announcementParts.slice(0, -1).join(', ') + (announcementParts.length > 1 ? ' and ' : '') + announcementParts.slice(-1) + ', press down arrow to go to results';
         } else {
             announcement = 'No results found';
         }

src/index.html

@@ -313,6 +313,7 @@ <h2 class="no-countries__info"></h2>
 			<!-- Labels used for screen reader labels -->
 			<span class="hidden" id="map-label">Your world map</span>
 			<span class="hidden" id="showing">Currently showing</span>
+			<span class="hidden" id="sr-instructions">Press L to list visible countries</span>
 			<span class="hidden" id="music-from">Music from</span>
 			<span class="hidden" id="tags-for">Tags for</span>
 			</footer>