From 5eb384b2c849654be30a8a83e46fce4a39d6efc5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 12 Oct 2019 21:08:04 -0700
Subject: [PATCH] refactor, aria props

---
 app/components/DropdownMenu/DropdownMenu.js   | 27 ++++++++++++++-----
 .../DropdownMenu/DropdownMenuItem.js          |  5 ++++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index a1cbc6a3..f088efbd 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -11,6 +11,7 @@ import { fadeAndScaleIn } from 'shared/styles/animations';
 import NudeButton from 'components/NudeButton';
 
 let previousClosePortal;
+let counter = 0;
 
 type Children =
   | React.Node
@@ -28,6 +29,8 @@ type Props = {
 
 @observer
 class DropdownMenu extends React.Component<Props> {
+  id: number = `menu${counter++}`;
+
   @observable top: ?number;
   @observable bottom: ?number;
   @observable right: ?number;
@@ -37,6 +40,7 @@ class DropdownMenu extends React.Component<Props> {
   @observable bodyRect: ClientRect;
   @observable labelRect: ClientRect;
   @observable dropdownRef: { current: null | HTMLElement } = React.createRef();
+  @observable menuRef: { current: null | HTMLElement } = React.createRef();
 
   handleOpen = (
     openPortal: (SyntheticEvent<>) => void,
@@ -88,12 +92,12 @@ class DropdownMenu extends React.Component<Props> {
     }
   }
 
-  onOpen(originalFunction?: () => void) {
-    if (typeof originalFunction === 'function') {
-      originalFunction();
+  onOpen = () => {
+    if (typeof this.props.onOpen === 'function') {
+      this.props.onOpen();
     }
     this.fitOnTheScreen();
-  }
+  };
 
   fitOnTheScreen() {
     if (!this.dropdownRef || !this.dropdownRef.current) return;
@@ -135,16 +139,21 @@ class DropdownMenu extends React.Component<Props> {
     return (
       <div className={className}>
         <PortalWithState
-          onOpen={this.onOpen.bind(this, this.props.onOpen)}
+          onOpen={this.onOpen}
           onClose={this.props.onClose}
           closeOnOutsideClick
           closeOnEsc
         >
-          {({ closePortal, openPortal, portal }) => (
+          {({ closePortal, openPortal, isOpen, portal }) => (
             <React.Fragment>
               <Label onClick={this.handleOpen(openPortal, closePortal)}>
                 {label || (
-                  <NudeButton>
+                  <NudeButton
+                    id={`${this.id}button`}
+                    aria-haspopup="true"
+                    aria-expanded={isOpen ? 'true' : 'false'}
+                    aria-controls={this.id}
+                  >
                     <MoreIcon />
                   </NudeButton>
                 )}
@@ -160,6 +169,7 @@ class DropdownMenu extends React.Component<Props> {
                   right={this.right}
                 >
                   <Menu
+                    ref={this.menuRef}
                     onClick={
                       typeof children === 'function'
                         ? undefined
@@ -169,6 +179,9 @@ class DropdownMenu extends React.Component<Props> {
                           }
                     }
                     style={this.props.style}
+                    id={this.id}
+                    aria-labelledby={`${this.id}button`}
+                    role="menu"
                   >
                     {typeof children === 'function'
                       ? children({ closePortal })
diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js
index fa694db4..1b43dcca 100644
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import styled from 'styled-components';
+import { lighten } from 'polished';
 
 type Props = {
   onClick?: (SyntheticEvent<>) => void | Promise<void>,
@@ -13,6 +14,8 @@ const DropdownMenuItem = ({ onClick, children, disabled, ...rest }: Props) => {
     <MenuItem
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      role="menuitem"
+      tabIndex="-1"
       {...rest}
     >
       {children}
@@ -32,6 +35,7 @@ const MenuItem = styled.a`
   align-items: center;
   font-size: 15px;
   cursor: default;
+  user-select: none;
 
   svg:not(:last-child) {
     margin-right: 8px;
@@ -49,6 +53,7 @@ const MenuItem = styled.a`
   &:hover {
     color: ${props.theme.white};
     background: ${props.theme.primary};
+    box-shadow: none;
     cursor: pointer;
 
     svg {