diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js index 51b1c573d9fd8f..b40bf7f8ad0dea 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/group_list.js +++ b/x-pack/plugins/ml/public/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 (
{ - groups.map(g => ( + groups.map((g, index) => (
this.handleKeyDown(event, g, index)} key={g.id} className="group-item" onClick={() => this.selectGroup(g)} + ref={(ref) => this.setRef(ref, index)} > diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less index 7990fbd2735918..caab88afdd1691 100644 --- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/styles/main.less +++ b/x-pack/plugins/ml/public/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;