Make ContextMenu accessible

Author: CompuIves

packages/app/src/app/components/ContextMenu/elements.js

@@ -19,12 +19,19 @@ export const Container = styled(animated.div)`
   font-weight: 600;
 `;
 
-export const Item = styled.div`
+export const Item = styled.button`
   transition: 0.2s ease all;
   display: flex;
   align-items: center;
   padding: 0.6rem 1rem;
 
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-weight: inherit;
+
   border-left: 2px solid transparent;
   cursor: pointer;
 
@@ -45,6 +52,13 @@ export const Item = styled.div`
     border-left-color: ${props =>
       props.color ? props.color : theme.secondary()};
   }
+
+  &:focus {
+    color: ${props => (props.color ? props.color : theme.secondary())};
+    background-color: ${() => theme.background2.lighten(0.3)()};
+    border-left-color: ${props =>
+      props.color ? props.color : theme.secondary()};
+  }
 `;
 
 export const ItemContainer = styled.div`

packages/app/src/app/components/ContextMenu/index.js

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Spring } from 'react-spring/renderprops';
 import Portal from '@codesandbox/common/lib/components/Portal';
 
+import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
+
 import { Container, Item, ItemContainer } from './elements';
 
 class ContextMenu extends React.PureComponent {
@@ -120,18 +122,28 @@ class ContextMenu extends React.PureComponent {
         return <ItemContainer key={i}>{item.map(mapFunction)}</ItemContainer>;
       }
 
+      const handlePress = e => {
+        if (item.action()) {
+          e.preventDefault();
+          this.close();
+        }
+      };
+
       return (
         <Item
+          tabIndex={0}
           key={item.title}
           color={item.color}
           onMouseDown={e => {
             e.preventDefault();
             e.stopPropagation();
           }}
           onMouseUp={e => {
-            if (item.action()) {
-              e.preventDefault();
-              this.close();
+            handlePress(e);
+          }}
+          onKeyUp={e => {
+            if (e.keyCode === ENTER) {
+              handlePress(e);
             }
           }}
         >
@@ -151,8 +163,13 @@ class ContextMenu extends React.PureComponent {
           <Portal>
             <div
               ref={el => {
+                if (el && this.el !== el) {
+                  // First time mounting
+                  el.focus();
+                }
                 this.el = el;
               }}
+              tabIndex="-1"
             >
               <Spring
                 from={{ opacity: 0.6, height: 0, width: 'auto' }}