menu aria-roles

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"
-}
+}

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>;
       }

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) {