More keyboard mode changes

src/assets/js/map.js

@@ -3,8 +3,8 @@ api/api.js
 api/lastfm.js
 script.js
 aria-announcer.js
+keyboard-mode.js
 */
-
 var map = {};
 //White theme default:
 var colorArray = ["#feebe2", "#feebe2", "#fcc5c0", "#fa9fb5", "#f768a1", "#dd3497", "#ae017e", "#7a0177"];
@@ -13,6 +13,8 @@ var countryScore = 0;
 let currentPage = 1;
 let itemsPerPage = 5;
 let artists = []; // Your artists data goes here
+let currentZoom = 1;
+const MAX_ZOOM = 25;
 
 const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
@@ -23,7 +25,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
   var filter = "artists"; // filter by artists or plays
 
   var zoom = d3.behavior.zoom()
-    .scaleExtent([1, 9])
+    .scaleExtent([1, MAX_ZOOM])
     .on("zoom", move);
 
 
@@ -44,6 +46,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
   //Setting color and range to be used
   var color;
 
+
   // Set theme
   const defaultTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "blue_black" : "pink_white";
   var theme = window.localStorage.theme || defaultTheme;
@@ -266,6 +269,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
   updateScale();
   updateDimensions();
   setup(width, height);
+  keyboardMode.init(zoom, move, width, height, MAX_ZOOM);
 
   function setup(width, height) {
     projection = d3.geo.naturalEarth()
@@ -274,11 +278,13 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
 
     path = d3.geo.path().projection(projection);
 
-    svg = d3.select("#map-container").append("svg")
+    svg = d3.select("#map-container")
+      .attr("role", "application")
+      .append("svg")
       .attr("role", "img")
-      .attr("tabindex", "-1")
-      .attr("aria-labelledby", "map-label progress-text")
-      .attr("aria-describedby", "map-hint")
+      .attr("tabindex", "0")
+      .attr("aria-labelledby", "map-label")
+      // .attr("aria-describedby", "map-hint")
       .attr("id", "map-svg")
       .attr("width", width)
       .attr("height", height)
@@ -344,6 +350,12 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
         .attr("title", function(d, i) {
           return d.properties.name;
         })
+        .attr("data-center-x", function(d, i) {
+          return getCountryCenter(d).x;
+        })
+        .attr("data-center-y", function(d, i) {
+          return getCountryCenter(d).y;
+        })
         .style("fill", function() {
           return color(0);
         })
@@ -451,8 +463,15 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
    * @param  {Array} tr      Optional: Translation tuple [x, y]
    * @param  {Number} sc      Optional: Scale factor
    * @param  {Boolean} animate Optional: Decides whether to animate the map movement
+   * @param  {Boolean} withKeyboard If the move was initiated by the keyboard
    */
-  function move(tr, sc, animate) {
+  function move(tr, sc, animate, withKeyboard) {
+
+    // If move was not initiated by the keyboard, remove the keyboard mode
+    if (!withKeyboard) {
+      keyboardMode.cleanup();
+    }
+
     var t = tr || (d3.event ? d3.event.translate : false) || zoom.translate();
     var s = sc || (d3.event ? d3.event.scale : false) || zoom.scale();
 
@@ -961,6 +980,8 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
 
   function clicked(d) { //d är det en har klickat på
 
+    keyboardMode.cleanup();
+
     var x, y, k;
     //bounding box for clicked country
     var b = path.bounds(d);
@@ -1047,6 +1068,12 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)
     move([pt[0] + x * k, pt[1] + y * k], k, !prefersReducedMotion);
 
   }
+
+function dismissCenteredCountry() {
+  removeArtistDiv();
+  highlightCountry(false);
+  centered = null;
+}
 function getCountryCenter(countryTopoData) {
   let x, y;
   let b = path.bounds(countryTopoData);
@@ -1090,6 +1117,7 @@ function getCountryCenter(countryTopoData) {
   // Close the country div on escape
   window.addEventListener('keydown', function(evt) {
     if ((evt.key === 'Escape' || evt.keyCode === 27) && countryDivIsOpen) {
+      console.log("Escape pressed");
       removeArtistDiv();
       // zoom out map, fulhack
       clicked(centered);
@@ -1173,12 +1201,18 @@ function getCountryCenter(countryTopoData) {
     animateCountries(newArtistsByCountry);
   }
 
+  map.getCountryCenter = getCountryCenter;
+
   map.makeSummaryDiv = makeSummaryDiv;
 
   map.showArtists = showArtists;
 
   map.searchArtist = searchArtist;
 
+  map.centered = centered;
+
+  map.dismissCenteredCountry = dismissCenteredCountry;
+
   map.toggleFilter = function() {
     filter = filter === "artists" ? "scrobbles" : "artists";
     updateLegend();

src/assets/js/script.js

@@ -4,6 +4,7 @@ api/lastfm.js
 utils.js
 search.js
 aria-announcer.js
+keyboard-mode.js
 */
 
 var script = script || {};
@@ -307,6 +308,7 @@ var countryCountObj = {};
     var begin = function () {
         //Send analytics event
         ga('send', 'event', 'splash screen', 'Go!', 'test');
+        document.getElementById("map-label").innerHTML = `${user}'s world map`;
         // fade out username input box
         var welcomeOverlay = d3.select("#welcome-container");
         welcomeOverlay.transition().duration(2000)
@@ -341,6 +343,9 @@ var countryCountObj = {};
             }
         }, 8000);
 
+        // Show hidden screen reader help text
+        document.getElementById("a11y-map-info").classList.remove("hidden");
+
         // Fade in legend, progress-bar etc
         d3.selectAll(".on-map-view").style({
             "visibility": "visible",
@@ -436,6 +441,9 @@ var countryCountObj = {};
         // Screen reader status update
         clearInterval(announcementIntervalId);
         announcer.announce("All artists are loaded!");
+        const map = document.querySelector("#map-container svg")
+        const existingAriaLabelledBy = map.getAttribute("aria-labelledby");
+        map.setAttribute("aria-labelledby", `${existingAriaLabelledBy} progress-text`);
 
         // We're done, fade out loader
         var loader = d3.select(".loader");
@@ -473,17 +481,17 @@ var countryCountObj = {};
         // set up keyboard shortcuts
         window.addEventListener("keydown", function (evt) {
 
-            if ((evt.ctrlKey || evt.metaKey) && evt.keyCode === 70) {
-
+            if ((evt.ctrlKey || evt.metaKey) && evt.keyCode === 70 && !evt.shiftKey && !keyboardMode.getStatus()) { 
+                console.log(keyboardMode.getStatus());               
                 // Prevent the browser's default "ctrl + f" or "cmd + f" action (usually "Find")
                 evt.preventDefault();
 
                 // Initialize the search box
                 search.initSearch();
 
             }
-            // Supress hotkeys if search is open 
-            if (search.getSearchStatus()) {
+            // Supress hotkeys if search or keyboard mode is open 
+            if (search.getSearchStatus() || keyboardMode.getStatus()) {
                 return;
             };
             switch (evt.keyCode) {

src/assets/js/search.js

@@ -54,7 +54,7 @@ let filteredShortcuts = [];
         return announcement;
       }
 
-    search.initSearch = function () {
+    search.initSearch = function () {  
 
     SEARCH_IS_OPEN = true;
 
@@ -472,7 +472,6 @@ let filteredShortcuts = [];
         }, 750);
     });
 
-    // Close the search when the user presses escape
     window.addEventListener("keydown", function (evt) {
         const inputElement = document.querySelector('.search');
 
@@ -563,14 +562,23 @@ let filteredShortcuts = [];
                     currentActiveElement.dispatchEvent(new Event('click'));
                 }
             }
+            else {
+                console.log('no active descendant');
+                // Select the first visible option
+                const firstVisibleOption = document.querySelector('.result-wrapper');
+                // If the first visible option exists
+                if (firstVisibleOption) {
+                    // Trigger a click event on the first visible option
+                    firstVisibleOption.dispatchEvent(new Event('click'));
+                }
+            }
         }
 
         // If escape, close the search
         if (evt.keyCode === 27 && SEARCH_IS_OPEN) {
             search.stopSearch();
         }
 
-
     });
 
     // Set up click outside listener for search

src/assets/scss/pages/_map.scss

@@ -5,6 +5,10 @@
 #map-container {
     height: 100%;
     overflow: hidden;
+    svg:focus-visible {
+        outline: 4px solid var(--focus);
+        outline-offset: -4px;
+    } 
 }
 
 /* ==========================================================================
@@ -320,4 +324,49 @@ div.colorChange {
     position: absolute;
     top: 20px;
     left: 20px;
+}
+
+// Keyboard mode
+
+.a11y-country-name {
+    fill: var(--textPrimary);
+}
+.a11y-number-bg {
+    stroke: 1px solid var(--textPrimary);
+}
+
+.a11y-number {
+    font-size: 0.1rem;
+    font-family: $heading-font-stack;
+    fill: var(--backgroundPrimary);
+    width: 0.2rem;
+}
+
+#keyboard-mode-message {
+    position: absolute;
+    width: 400px;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--backgroundSecondary);
+    color: var(--textPriary);
+    border-radius: 20px;
+    padding: 8px;
+    text-align: center;
+    border: 6px solid var(--themeColorDark);
+
+    p {
+        margin-top: 0.25rem;
+        margin-bottom: 0.25rem;
+    }
+
+    h2 {
+        margin-top: 0;
+        margin-bottom: 0.25rem;
+        font-size: 1.2rem;
+        text-transform: none;
+        font-family: $heading-font-stack;
+    }
+
+
 }

src/assets/scss/pages/_splash.scss

@@ -31,7 +31,7 @@ body.dark {
 
 #splashTextContainer {
     overflow-y: auto;
-    max-height: 400px;
+    // max-height: 400px;
     padding: 0px 13px 0px 13px;
 }
 
@@ -115,11 +115,11 @@ body.dark {
     text-underline-offset: 0.1em;
 } 
 
-#faqtext h2, #a11ytext h2 {
+#faqtext h2, #a11ytext h2, #a11ytext h3, #faqtext h3 {
     font-family: $heading-font-stack;
-    margin-top: 1rem;
+    margin-top: 1.5rem;
     margin-bottom: 0.8em;
-    font-size: 1rem;
+    font-size: 0.9rem;
     font-weight: 400;
 }
 #a11ytext h1, #faqtext h1 {

src/assets/scss/themes/_default.scss

@@ -114,6 +114,24 @@ a, a:visited, a:active {
     color: var(--textTertiary)
  }
 
+ /*
+* Keyboard key styling
+*/
+kbd {
+    font-size: 0.9rem;
+    padding: 2px 4px;
+    font-size: 0.85em;
+    color: #555;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
+    white-space: nowrap;
+    kbd+& {
+        margin-left: 4px;
+    }
+}
+
 
 /*
  * Tooltip