[ML] Ensure applying/removing groups menu is keyboard accessible (#24212

) (#24253) * add group list arrow nav * up/down moved into own functions * always prevent default on arrow key press
elastic · Oct 19, 2018 · 0851f20 · 0851f20
1 parent 73cc697
commit 0851f20
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/...ublic/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js b/...ublic/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js
@@ -12,6 +12,7 @@ import React, {
 
 import {
   EuiIcon,
+  keyCodes,
 } from '@elastic/eui';
 
 import './styles/main.less';
@@ -47,22 +48,65 @@ export class GroupList extends Component {
     this.state = {
       groups: [],
     };
+    // keep track of each of the group item refs
+    this.selectItems = [];
   }
 
   selectGroup = (group) => {
     this.props.selectGroup(group);
   }
 
+  moveUp = (event, index) => {
+    event.preventDefault();
+    if (index < 0) {
+      return;
+    } else if (index > 0) {
+      this.selectItems[index - 1].focus();
+    }
+  }
+
+  moveDown = (event, index) => {
+    event.preventDefault();
+    if (index < this.selectItems.length - 1) {
+      this.selectItems[index + 1].focus();
+    }
+  }
+
+  handleKeyDown = (event, group, index) => {
+    switch (event.keyCode) {
+      case keyCodes.ENTER:
+        this.selectGroup(group);
+        break;
+      case keyCodes.SPACE:
+        this.selectGroup(group);
+        break;
+      case keyCodes.DOWN:
+        this.moveDown(event, index);
+        break;
+      case keyCodes.UP:
+        this.moveUp(event, index);
+        break;
+    }
+  }
+
+  setRef = (ref, index) => {
+    this.selectItems[index] = ref;
+  }
+
   render() {
     const { selectedGroups, groups } = this.props;
+
     return (
       <div className="group-list">
         {
-          groups.map(g => (
+          groups.map((g, index) => (
             <div
+              tabIndex={'0'}
+              onKeyDown={(event) => this.handleKeyDown(event, g, index)}
               key={g.id}
               className="group-item"
               onClick={() => this.selectGroup(g)}
+              ref={(ref) => this.setRef(ref, index)}
             >
               <Check group={g} selectedGroups={selectedGroups} />
               <JobGroup name={g.id} />

diff --git a/...ic/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less b/...ic/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less
@@ -8,6 +8,11 @@
     border-bottom: 1px solid #eee;
     cursor: pointer;
 
+    &:focus {
+      background-color: #eef6f9;
+      box-shadow: none;
+    }
+
     .check {
       width: 20px;
       display: inline-block;