From 21790db37b5eb6e9ec7aefaaefa2201fed2f2b90 Mon Sep 17 00:00:00 2001 From: Tommy Feldt Date: Tue, 13 May 2025 17:36:19 +0200 Subject: [PATCH 1/5] Better sorting of countries --- src/assets/js/keyboard-mode.js | 2 +- src/assets/js/map.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/js/keyboard-mode.js b/src/assets/js/keyboard-mode.js index 760fc6f..0f07a61 100644 --- a/src/assets/js/keyboard-mode.js +++ b/src/assets/js/keyboard-mode.js @@ -708,7 +708,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), `; diff --git a/src/assets/js/map.js b/src/assets/js/map.js index 8893a82..9ea222b 100644 --- a/src/assets/js/map.js +++ b/src/assets/js/map.js @@ -1106,7 +1106,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) { From dd4bba8a47b976a8c63b707288974279d9431147 Mon Sep 17 00:00:00 2001 From: Tommy Feldt Date: Wed, 14 May 2025 20:44:39 +0200 Subject: [PATCH 2/5] Add announcement when the user exits keyboard mode --- src/assets/js/keyboard-mode.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/assets/js/keyboard-mode.js b/src/assets/js/keyboard-mode.js index 0f07a61..65da878 100644 --- a/src/assets/js/keyboard-mode.js +++ b/src/assets/js/keyboard-mode.js @@ -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)}`; @@ -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 From dcd8064e48c809eda6888f72f9513f2e32c9a7c9 Mon Sep 17 00:00:00 2001 From: Tommy Feldt Date: Wed, 14 May 2025 20:58:12 +0200 Subject: [PATCH 3/5] Add annoucnement when leaving a country --- src/assets/js/map.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/assets/js/map.js b/src/assets/js/map.js index 9ea222b..dc08a5a 100644 --- a/src/assets/js/map.js +++ b/src/assets/js/map.js @@ -1150,7 +1150,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 +1173,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; From dd751f454f427801e75e2fe36d7693ca5e2c0cf2 Mon Sep 17 00:00:00 2001 From: Tommy Feldt Date: Wed, 14 May 2025 21:02:20 +0200 Subject: [PATCH 4/5] Modify announcement text to decrease wait time --- src/assets/js/keyboard-mode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/js/keyboard-mode.js b/src/assets/js/keyboard-mode.js index 65da878..8c4bb78 100644 --- a/src/assets/js/keyboard-mode.js +++ b/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; } From 367eb2340662709f27d153f9c71db3d94e77d2d6 Mon Sep 17 00:00:00 2001 From: Tommy Feldt Date: Wed, 14 May 2025 21:11:51 +0200 Subject: [PATCH 5/5] Use aria-owns to make it easier to find the artist description --- src/assets/js/map.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/assets/js/map.js b/src/assets/js/map.js index dc08a5a..c6a26cc 100644 --- a/src/assets/js/map.js +++ b/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);