From 0075203df585881b240e5b25a7803575a6eee616 Mon Sep 17 00:00:00 2001
From: Sarah Federman <sfederman@c02xt1dvjgh7.office.atlassian.com>
Date: Tue, 5 Feb 2019 11:37:35 +1100
Subject: [PATCH 1/2] added aria-role to menu

---
 src/components/Menu.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Menu.js b/src/components/Menu.js
index d542b92083..74d6c99e93 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -19,9 +19,9 @@ import {
 } from '../utils';
 import type {
   InnerRef,
-  MenuPlacement,
-  MenuPosition,
-  CommonProps,
+    MenuPlacement,
+    MenuPosition,
+    CommonProps,
 } from '../types';
 import type { Theme } from '../types';
 
@@ -230,7 +230,7 @@ export type MenuProps = MenuAndPlacerCommon & {
 };
 export type MenuPlacerProps = MenuAndPlacerCommon & {
   /** The children to be rendered. */
-  children: ({}) => Node,
+  children: ({ }) => Node,
 };
 
 function alignToControl(placement) {
@@ -370,6 +370,7 @@ export const MenuList = (props: MenuListComponentProps) => {
         },
         className
       )}
+      role="listbox"
       ref={innerRef}
     >
       {children}

From 405a1f78e4c87add39fb6d5cbd9e22712ccbeb65 Mon Sep 17 00:00:00 2001
From: Sarah Federman <sfederman@c02xt1dvjgh7.office.atlassian.com>
Date: Tue, 5 Feb 2019 15:33:42 +1100
Subject: [PATCH 2/2] removed extra aria roles in favor of using live region

---
 cypress/fixtures/selectors.json |  8 ++----
 src/Select.js                   | 51 ++++++++++++++++-----------------
 src/components/Menu.js          |  1 -
 3 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json
index f17d90bbcf..ccfc93fee4 100644
--- a/cypress/fixtures/selectors.json
+++ b/cypress/fixtures/selectors.json
@@ -4,27 +4,23 @@
   "singleClearable": "#cypress-single-clearable",
   "singleClearableSelect": "#clearable-select-single",
   "singleGroupedSelect": "#grouped-options-single",
-
   "checkboxDisable": ".disable-checkbox",
   "checkboxEscapeClearsValue": ".escape-clears-value-checkbox",
-
   "groupHeading": ".react-select__group-heading",
   "indicatorClear": ".react-select__clear-indicator",
   "indicatorDropdown": ".react-select__dropdown-indicator",
   "menu": ".react-select__menu",
-  "menuOption": "[role='option']",
+  "menuOption": ".react-select__option",
   "noOptionsValue": ".react-select__menu-notice--no-options",
   "placeholder": ".react-select__placeholder",
   "singleValue": ".react-select__single-value",
-
   "menuSingle": "#basic-select-single .react-select__menu",
   "singleSelectSingleInput": "#react-select-basic-select-single-input",
   "toggleMenuSingle": "#basic-select-single .react-select__dropdown-indicator",
-
   "firstMultiValueRemove": "#multi-select .react-select__multi-value__remove:first",
   "menuMulti": "#multi-select .react-select__menu",
   "multiSelectDefaultValues": "#multi-select .react-select__multi-value",
   "multiSelectInput": "#react-select-multi-select-input",
   "placeHolderMulti": "#multi-select .react-select__placeholder",
   "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator"
-}
+}
\ No newline at end of file
diff --git a/src/Select.js b/src/Select.js
index c489a360d7..7020ee697d 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -52,17 +52,17 @@ import { defaultTheme, type ThemeConfig } from './theme';
 
 import type {
   ActionMeta,
-  ActionTypes,
-  FocusDirection,
-  FocusEventHandler,
-  GroupType,
-  InputActionMeta,
-  KeyboardEventHandler,
-  MenuPlacement,
-  MenuPosition,
-  OptionsType,
-  OptionType,
-  ValueType,
+    ActionTypes,
+    FocusDirection,
+    FocusEventHandler,
+    GroupType,
+    InputActionMeta,
+    KeyboardEventHandler,
+    MenuPlacement,
+    MenuPosition,
+    OptionsType,
+    OptionType,
+    ValueType,
 } from './types';
 
 type MouseOrTouchEvent =
@@ -129,8 +129,8 @@ export type Props = {
   escapeClearsValue: boolean,
   /* Custom method to filter whether an option should be displayed in the menu */
   filterOption:
-    | (({ label: string, value: string, data: OptionType }, string) => boolean)
-    | null,
+  | (({ label: string, value: string, data: OptionType }, string) => boolean)
+  | null,
   /*
     Formats group labels in the menu as React components
 
@@ -1269,7 +1269,6 @@ export default class Select extends Component<Props, State> {
           onClick: onSelect,
           onMouseMove: onHover,
           onMouseOver: onHover,
-          role: 'option',
           tabIndex: -1,
         },
         data: option,
@@ -1333,19 +1332,19 @@ export default class Select extends Component<Props, State> {
     // An aria live message representing the currently focused value in the select.
     const focusedValueMsg = focusedValue
       ? valueFocusAriaMessage({
-          focusedValue,
-          getOptionLabel: this.getOptionLabel,
-          selectValue,
-        })
+        focusedValue,
+        getOptionLabel: this.getOptionLabel,
+        selectValue,
+      })
       : '';
     // An aria live message representing the currently focused option in the select.
     const focusedOptionMsg =
       focusedOption && menuIsOpen
         ? optionFocusAriaMessage({
-            focusedOption,
-            getOptionLabel: this.getOptionLabel,
-            options,
-          })
+          focusedOption,
+          getOptionLabel: this.getOptionLabel,
+          options,
+        })
         : '';
     // An aria live message representing the set of focusable results and current searchterm/inputvalue.
     const resultsMsg = resultsAriaMessage({
@@ -1719,8 +1718,8 @@ export default class Select extends Component<Props, State> {
         {menuElement}
       </MenuPortal>
     ) : (
-      menuElement
-    );
+        menuElement
+      );
   }
   renderFormField() {
     const { delimiter, isDisabled, isMulti, name } = this.props;
@@ -1746,8 +1745,8 @@ export default class Select extends Component<Props, State> {
               />
             ))
           ) : (
-            <input name={name} type="hidden" />
-          );
+              <input name={name} type="hidden" />
+            );
 
         return <div>{input}</div>;
       }
diff --git a/src/components/Menu.js b/src/components/Menu.js
index 74d6c99e93..268a27d051 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -370,7 +370,6 @@ export const MenuList = (props: MenuListComponentProps) => {
         },
         className
       )}
-      role="listbox"
       ref={innerRef}
     >
       {children}