Add keytraps to keep focus within modal windows (re: #8004)

css/80_app.css

@@ -234,6 +234,15 @@ textarea.mixed::placeholder {
     font-style: italic;
 }
 
+/* keytraps need to be invisible yet not be display:none or visibility:hidden */
+.keytrap {
+    width: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+
 /* tables */
 table {
     background-color: #fff;

modules/ui/modal.js

@@ -40,6 +40,11 @@ export function uiModal(selection, blocking) {
     .append('div')
     .attr('class', 'modal fillL');
 
+  modal
+    .append('input')
+    .attr('class', 'keytrap keytrap-first')
+    .on('focus.keytrap', moveFocusToLast);
+
   if (!blocking) {
     shaded.on('click.remove-modal', () => {
       if (d3_event.target === this) {
@@ -65,6 +70,11 @@ export function uiModal(selection, blocking) {
     .append('div')
     .attr('class', 'content');
 
+  modal
+    .append('input')
+    .attr('class', 'keytrap keytrap-last')
+    .on('focus.keytrap', moveFocusToFirst);
+
   if (animate) {
     shaded.transition().style('opacity', 1);
   } else {
@@ -72,4 +82,30 @@ export function uiModal(selection, blocking) {
   }
 
   return shaded;
+
+
+  function moveFocusToFirst() {
+    let node = modal
+      // there are additional rules about what's focusable, but this suits our purposes
+      .select('a, button, input:not(.keytrap), select, textarea')
+      .node();
+
+    if (node) {
+      node.focus();
+    } else {
+      d3_select(this).node().blur();
+    }
+  }
+
+  function moveFocusToLast() {
+    let nodes = modal
+      .selectAll('a, button, input:not(.keytrap), select, textarea')
+      .nodes();
+
+    if (nodes.length) {
+      nodes[nodes.length - 1].focus();
+    } else {
+      d3_select(this).node().blur();
+    }
+  }
 }