Implemented key bindings in the mode menu

src/components/menu/Menu.js

@@ -212,7 +212,6 @@ export default class Menu extends Component {
     }
   }
 
-  // TODO: implement the same in ModeMenu
   handleKeyDown = (event) => {
     const combo = keyComboFromEvent (event)
     if (combo === 'Up') {

src/components/menu/ModeButton.js

@@ -12,9 +12,7 @@ export default class ModeButton extends Component {
   }
 
   /**
-   * @param {{modes: string[], mode: string, onChangeMode: function, onError: function}} props
-   * @param state
-   * @return {*}
+   * props {{modes: string[], mode: string, onChangeMode: function, onError: function}}
    */
   render () {
     const { props, state} = this

src/components/menu/ModeMenu.js

@@ -1,5 +1,9 @@
 import { createElement as h, Component } from 'react'
 import { toCapital } from '../../utils/stringUtils'
+import { keyComboFromEvent } from '../../utils/keyBindings'
+
+const MENU_CLASS_NAME = 'jsoneditor-actionmenu'
+const MODE_MENU_CLASS_NAME = MENU_CLASS_NAME + ' jsoneditor-modemenu'
 
 export default class ModeMenu extends Component {
   /**
@@ -26,7 +30,9 @@ export default class ModeMenu extends Component {
       })
 
       return h('div', {
-        className: 'jsoneditor-actionmenu jsoneditor-modemenu'
+        className: MODE_MENU_CLASS_NAME,
+        ref: 'menu',
+        onKeyDown: this.handleKeyDown
       }, items)
     }
     else {
@@ -36,10 +42,18 @@ export default class ModeMenu extends Component {
 
   componentDidMount () {
     this.updateRequestCloseListener()
+
+    if (this.props.open) {
+      this.focusToFirstEntry ()
+    }
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps) {
     this.updateRequestCloseListener()
+
+    if (this.props.open && !prevProps.open) {
+      this.focusToFirstEntry ()
+    }
   }
 
   componentWillUnmount () {
@@ -76,5 +90,34 @@ export default class ModeMenu extends Component {
     }
   }
 
+  focusToFirstEntry () {
+    if (this.refs.menu) {
+      const firstButton = this.refs.menu.querySelector('button')
+      if (firstButton) {
+        firstButton.focus()
+      }
+    }
+  }
+
+  handleKeyDown = (event) => {
+    const combo = keyComboFromEvent (event)
+
+    if (combo === 'Up') {
+      event.preventDefault()
+
+      if (event.target.previousSibling) {
+        event.target.previousSibling.focus()
+      }
+    }
+
+    if (combo === 'Down') {
+      event.preventDefault()
+
+      if (event.target.nextSibling) {
+        event.target.nextSibling.focus()
+      }
+    }
+  }
+
   handleRequestClose = null
 }