Fix highlighting of layers and geocoding

* Fix highlighting of custom layer. Fixes #915
* Line up tabindexes. Fixes #922

css/app.css

@@ -1161,6 +1161,10 @@ div.combobox {
     padding: 5px 10px;
 }
 
+.geocode-control a:focus {
+    text-decoration: underline;
+}
+
 /* Geolocator */
 
 .geolocate-control {

js/id/renderer/background_source.js

@@ -31,7 +31,8 @@ iD.BackgroundSource.Custom = function() {
     if (!template) return null;
     return iD.BackgroundSource.template({
         template: template,
-        name: 'Custom (customized)'
+        name: 'Custom'
     });
 };
+
 iD.BackgroundSource.Custom.data = { 'name': 'Custom' };

js/id/ui.js

@@ -86,17 +86,20 @@ iD.ui = function(context) {
         linkList.append('li')
             .append('a')
             .attr('target', '_blank')
+            .attr('tabindex', -1)
             .attr('href', 'http://github.com/systemed/iD')
             .text(iD.version);
 
         linkList.append('li')
             .append('a')
             .attr('target', '_blank')
+            .attr('tabindex', -1)
             .attr('href', 'http://github.com/systemed/iD/issues')
             .text(t('report_a_bug'));
 
         linkList.append('li')
             .attr('class', 'attribution')
+            .attr('tabindex', -1)
             .call(iD.ui.Attribution(context));
 
         linkList.append('li')
@@ -105,6 +108,7 @@ iD.ui = function(context) {
 
         linkList.append('li')
             .attr('class', 'user-list')
+            .attr('tabindex', -1)
             .call(iD.ui.Contributors(context));
 
         window.onbeforeunload = function() {

js/id/ui/background.js

@@ -96,10 +96,11 @@ iD.ui.Background = function(context) {
 
             content.selectAll('a.layer')
                 .classed('selected', function(d) {
-                    return d === context.background().source();
+                    return d.data.name === context.background().source().data.name;
                 });
 
-            var provided_by = context.container().select('.attribution .provided-by')
+            var provided_by = context.container()
+                .select('.attribution .provided-by')
                 .html('');
 
             if (d.data.terms_url) {

js/id/ui/contributors.js

@@ -24,6 +24,7 @@ iD.ui.Contributors = function(context) {
             .attr('class', 'user-link')
             .attr('href', function(d) { return context.connection().userUrl(d); })
             .attr('target', '_blank')
+            .attr('tabindex', -1)
             .text(String);
 
         if (u.length > limit) {
@@ -31,6 +32,7 @@ iD.ui.Contributors = function(context) {
 
             count.append('a')
                 .attr('target', '_blank')
+                .attr('tabindex', -1)
                 .attr('href', function() {
                     var ext = context.map().extent();
                     return 'http://www.openstreetmap.org/browse/changesets?bbox=' + [

js/id/ui/geocoder.js

@@ -31,6 +31,7 @@ iD.ui.Geocoder = function(context) {
                                 return d.type.charAt(0).toUpperCase() + d.type.slice(1) + ': ';
                             })
                             .append('a')
+                            .attr('tabindex', function(d, i) { return i + 1; })
                             .text(function(d) {
                                 if (d.display_name.length > 80) {
                                     return d.display_name.substr(0, 80) + '…';
@@ -38,7 +39,12 @@ iD.ui.Geocoder = function(context) {
                                     return d.display_name;
                                 }
                             })
-                            .on('click', clickResult);
+                            .on('click', clickResult)
+                            .on('keydown', function(d) {
+                                // support tabbing to and accepting this
+                                // entry
+                                if (d3.event.keyCode == 13) clickResult(d);
+                            });
                         spans.exit().remove();
                         resultsList.classed('hide', false);
                     } else {
@@ -59,7 +65,11 @@ iD.ui.Geocoder = function(context) {
         }
 
         function hide() { setVisible(false); }
-        function toggle() { tooltip.hide(button); setVisible(gcForm.classed('hide')); }
+        function toggle() {
+            if (d3.event) d3.event.preventDefault();
+            tooltip.hide(button);
+            setVisible(gcForm.classed('hide'));
+        }
 
         function setVisible(show) {
             if (show !== shown) {
@@ -97,6 +107,13 @@ iD.ui.Geocoder = function(context) {
         });
 
         context.container().on('click.geocoder-outside', hide);
+
+        var keybinding = d3.keybinding('geocoder');
+
+        keybinding.on('f', toggle);
+
+        d3.select(document)
+            .call(keybinding);
     }
 
     return geocoder;

js/id/ui/source_switch.js

@@ -20,6 +20,7 @@ iD.ui.SourceSwitch = function(context) {
             .attr('href', '#')
             .text(t('source_switch.live'))
             .classed('live', true)
+            .attr('tabindex', -1)
             .on('click', click);
     };
 };