Tabbable component

.eslintrc

@@ -7,6 +7,7 @@
     "__DEV__": false,
     "__PROD__": false,
     "__static": false,
+    "window": false,
   },
   "rules": {
     "camelcase": 0,

src/components/base/Box/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import {
   alignItems,
@@ -79,4 +79,21 @@ export const GrowScroll = (props: *) => (
   </Box>
 )
 
+export class Tabbable extends PureComponent<any> {
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleKeydown)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeydown)
+  }
+  handleKeydown = (e: SyntheticKeyboardEvent<any>) => {
+    if (e.which === 13 && this.props.onClick) {
+      this.props.onClick(e)
+    }
+  }
+  render() {
+    return <Box tabIndex={0} {...this.props} />
+  }
+}
+
 export default Box