From b16d39452efad60509b4ef32103cba9a62b1bfa8 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Thu, 17 Sep 2020 14:16:20 -0400
Subject: [PATCH] Fix navigation of the background layer list via the keyboard
 (re: #8004)

---
 modules/ui/sections/background_list.js | 30 ++++++++++++--------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/modules/ui/sections/background_list.js b/modules/ui/sections/background_list.js
index 63f9cfaff..770483e48 100644
--- a/modules/ui/sections/background_list.js
+++ b/modules/ui/sections/background_list.js
@@ -164,10 +164,18 @@ export function uiSectionBackgroundList(context) {
     function drawListItems(layerList, type, change, filter) {
         var sources = context.background()
             .sources(context.map().extent(), context.map().zoom(), true)
-            .filter(filter);
+            .filter(filter)
+            .sort(function(a, b) {
+                return a.best() && !b.best() ? -1
+                    : b.best() && !a.best() ? 1
+                    : d3_descending(a.area(), b.area()) || d3_ascending(a.name(), b.name()) || 0;
+            });
 
         var layerLinks = layerList.selectAll('li')
-            .data(sources, function(d) { return d.name(); });
+            // We have to be a bit inefficient about reordering the list since
+            // arrow key navigation of radio values likes to work in the order
+            // they were added, not the display document order.
+            .data(sources, function(d, i) { return d.id + '---' + i; });
 
         layerLinks.exit()
             .remove();
@@ -183,7 +191,10 @@ export function uiSectionBackgroundList(context) {
         label
             .append('input')
             .attr('type', type)
-            .attr('name', 'layers')
+            .attr('name', 'background-layer')
+            .attr('value', function(d) {
+                return d.id;
+            })
             .on('change', change);
 
         label
@@ -210,19 +221,8 @@ export function uiSectionBackgroundList(context) {
             .append('span')
             .html('&#9733;');
 
-
-        layerList.selectAll('li')
-            .sort(sortSources);
-
         layerList
             .call(updateLayerSelections);
-
-
-        function sortSources(a, b) {
-            return a.best() && !b.best() ? -1
-                : b.best() && !a.best() ? 1
-                : d3_descending(a.area(), b.area()) || d3_ascending(a.name(), b.name()) || 0;
-        }
     }
 
     function updateLayerSelections(selection) {
@@ -244,12 +244,10 @@ export function uiSectionBackgroundList(context) {
             return editCustom();
         }
 
-        d3_event.preventDefault();
         var previousBackground = context.background().baseLayerSource();
         prefs('background-last-used-toggle', previousBackground.id);
         prefs('background-last-used', d.id);
         context.background().baseLayerSource(d);
-        document.activeElement.blur();
     }