Merge pull request #58 from mold/screen-reade-improvements

Tweak screen reader announcements
mold · Jan 29, 2024 · cdd56ab · cdd56ab
2 parents 0d855f4 + 6f80207
commit cdd56ab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 30 deletions.
diff --git a/src/assets/js/map.js b/src/assets/js/map.js
@@ -564,6 +564,8 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
       if (currentPage < artists.length / itemsPerPage) {
           currentPage++;
           showArtists(currentPage, itemsPerPage);
+          // Give feedback to screen readers
+          announcer.announce("Showing next five artists", "polite");
           //Send event to google analytics
           ga('send', {
             hitType: 'event',
@@ -578,6 +580,8 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
       if (currentPage > 1) {
           currentPage--;
           showArtists(currentPage, itemsPerPage);
+          // Give feedback to screen readers
+          announcer.announce("Showing previous five artists", "polite");
           //Trigger GA event
           ga('send', {
             hitType: 'event',

diff --git a/src/assets/js/script.js b/src/assets/js/script.js
@@ -326,7 +326,7 @@ var countryCountObj = {};
         announcer.announce(document.getElementById("loading-text").innerText);
         announcementIntervalId = setInterval(() => {
             announcer.announce(document.getElementById("loading-text").innerText);
-        }, 60000);
+        }, 45000);
 
         setTimeout(function () {
             if (d3.select("#loading-text").html() === "Getting library...") {

diff --git a/src/assets/js/search.js b/src/assets/js/search.js
@@ -20,6 +20,40 @@ let noCountryArtists = [];
 let filteredShortcuts = [];
 
 (function () {
+
+    // Function to generate screen reader feedback text for current search results
+    search.getAnnouncement = function () {
+        let announcementParts = [];
+
+        const input = document.querySelector('input.search');
+
+        const totalArtistLength = filteredArtists.slice(0, 100).length + filteredCountryArtists.slice(0, 100).length + noCountryArtists.slice(0, 100).length;
+
+        if (filteredShortcuts.length > 0 && input.value.length > 3) {
+            let shortcutText = filteredShortcuts.length === 1 ? 'shortcut' : 'shortcuts';
+            announcementParts.push(`${filteredShortcuts.length} ${shortcutText}`);
+        }
+
+        if (filteredCountries.slice(0, 5).length > 0 && input.value.length > 1) {
+            let countryText = filteredCountries.length === 1 ? 'country' : 'countries';
+            announcementParts.push(`${filteredCountries.length} ${countryText}`);
+        }
+
+        if (totalArtistLength && input.value.length > 1) {
+            let artistText = totalArtistLength === 1 ? 'artist' : 'artists';
+            announcementParts.push(`${totalArtistLength} ${artistText}`);
+        }
+
+
+        let announcement = '';
+        if (announcementParts.length > 0) {
+            announcement = 'Showing ' + announcementParts.slice(0, -1).join(', ') + (announcementParts.length > 1 ? ' and ' : '') + announcementParts.slice(-1);
+        } else {
+            announcement = 'No results found';
+        }
+        return announcement;
+      }
+
     search.initSearch = function () {
 
     SEARCH_IS_OPEN = true;
@@ -434,35 +468,8 @@ let filteredShortcuts = [];
         // Announce the number of results to screen readers
         clearTimeout(typingTimeout);
         typingTimeout = setTimeout(() => {
-
-        let announcementParts = [];
-
-        const totalArtistLength = filteredArtists.slice(0, 100).length + filteredCountryArtists.slice(0, 100).length + noCountryArtists.slice(0, 100).length;
-
-        if (filteredShortcuts.length > 0 && input.value.length > 3) {
-            let shortcutText = filteredShortcuts.length === 1 ? 'shortcut' : 'shortcuts';
-            announcementParts.push(`${filteredShortcuts.length} ${shortcutText}`);
-        }
-
-        if (filteredCountries.slice(0, 5).length > 0 && input.value.length > 1) {
-            let countryText = filteredCountries.length === 1 ? 'country' : 'countries';
-            announcementParts.push(`${filteredCountries.length} ${countryText}`);
-        }
-
-        if (totalArtistLength && input.value.length > 1) {
-            let artistText = totalArtistLength === 1 ? 'artist' : 'artists';
-            announcementParts.push(`${totalArtistLength} ${artistText}`);
-        }
-
-
-        let announcement = '';
-        if (announcementParts.length > 0) {
-            announcement = 'Showing ' + announcementParts.slice(0, -1).join(', ') + (announcementParts.length > 1 ? ' and ' : '') + announcementParts.slice(-1);
-        } else {
-            announcement = 'No results found';
-        }
-        announcer.announce(announcement, 'polite');
-        }, 2000);
+            announcer.announce(search.getAnnouncement(), 'polite');
+        }, 750);
     });
 
     // Close the search when the user presses escape
@@ -575,6 +582,8 @@ let filteredShortcuts = [];
 
   }
 
+
+
   search.stopSearch = function () {
     const searchButtonClose = document.querySelector('#search-button');
     const inputElement = document.querySelector('.search');