Make the keyboard shortcuts modal keyboard-navigable (re: #8004)

Prevent default hash behavior when clicking help pane internal links

css/80_app.css

@@ -4890,30 +4890,30 @@ img.tile-debug {
 }
 
 .modal-shortcuts .tabs-bar {
-    text-align: center;
     padding-bottom: 5px;
-    font-size: 16px;
-    font-weight: bold;
+    text-align: center;
 }
 
-.modal-shortcuts .tab {
+.modal-shortcuts a.tab {
     display: inline-block;
     padding: 5px 10px;
     margin: 0 5px;
     cursor: pointer;
     color: #666;
+    font-size: 16px;
+    font-weight: bold;
 }
-.modal-shortcuts .tab.active {
+.modal-shortcuts a.tab.active {
     color: #7092ff;
     border-bottom: 2px solid;
 }
-.modal-shortcuts .tab:focus,
-.modal-shortcuts .tab:active {
+.modal-shortcuts a.tab:focus,
+.modal-shortcuts a.tab:active {
     color: #597be7;
     background-color: #efefef;
 }
 @media (hover: hover) {
-    .modal-shortcuts .tab:hover {
+    .modal-shortcuts a.tab:hover {
         color: #597be7;
         background-color: #efefef;
     }

modules/ui/panes/help.js

@@ -1,4 +1,6 @@
 
+import { event as d3_event } from 'd3-selection';
+
 import marked from 'marked';
 import { svgIcon } from '../../svg/icon';
 import { uiIntro } from '../intro/intro';
@@ -263,6 +265,7 @@ export function uiPaneHelp(context) {
     helpPane.renderContent = function(content) {
 
         function clickHelp(d, i) {
+            if (d3_event) d3_event.preventDefault();
             var rtl = (localizer.textDirection() === 'rtl');
             content.property('scrollTop', 0);
             helpPane.selection().select('.pane-heading h2').html(d.title);
@@ -289,6 +292,7 @@ export function uiPaneHelp(context) {
                         .attr('href', '#')
                         .attr('class', 'next')
                         .on('click', function() {
+                            d3_event.preventDefault();
                             clickHelp(docs[i + 1], i + 1);
                         });
 
@@ -307,6 +311,7 @@ export function uiPaneHelp(context) {
                         .attr('href', '#')
                         .attr('class', 'previous')
                         .on('click', function() {
+                            d3_event.preventDefault();
                             clickHelp(docs[i - 1], i - 1);
                         });
 
@@ -320,6 +325,7 @@ export function uiPaneHelp(context) {
 
 
         function clickWalkthrough() {
+            d3_event.preventDefault();
             if (context.inIntro()) return;
             context.container().call(uiIntro(context));
             context.ui().togglePanes();
@@ -327,6 +333,7 @@ export function uiPaneHelp(context) {
 
 
         function clickShortcuts() {
+            d3_event.preventDefault();
             context.container().call(uiShortcuts(context), true);
         }
 

modules/ui/shortcuts.js

@@ -1,4 +1,4 @@
-import { select as d3_select } from 'd3-selection';
+import { event as d3_event, select as d3_select } from 'd3-selection';
 
 import { fileFetcher } from '../core/file_fetcher';
 import { t } from '../core/localizer';
@@ -74,9 +74,11 @@ export function uiShortcuts(context) {
 
         var tabsEnter = tabs
             .enter()
-            .append('div')
+            .append('a')
             .attr('class', 'tab')
+            .attr('href', '#')
             .on('click', function (d, i) {
+                d3_event.preventDefault();
                 _activeTab = i;
                 render(selection, dataShortcuts);
             });