feat: update useSelect to the ARIA 1.2 pattern

cypress/e2e/combobox.cy.js

@@ -22,7 +22,7 @@ describe('combobox', () => {
   it('can arrow up to select last item', () => {
     cy.findByTestId('combobox-input')
       .type('{uparrow}{enter}') // open menu, last option is focused
-      .should('have.value', 'Purple')
+      .should('have.value', 'Skyblue')
   })
 
   it('can arrow down to select first item', () => {
@@ -46,7 +46,7 @@ describe('combobox', () => {
   it('can use end arrow to select last item', () => {
     cy.findByTestId('combobox-input')
       .type('{downarrow}{end}{enter}') // open to first, go to last by end.
-      .should('have.value', 'Purple')
+      .should('have.value', 'Skyblue')
   })
 
   it('resets the item on blur', () => {

cypress/e2e/useMultipleCombobox.cy.js

@@ -0,0 +1,16 @@
+describe('useMultipleCombobox', () => {
+  before(() => {
+    cy.visit('/useMultipleCombobox')
+  })
+
+  it('can select multiple items', () => {
+    cy.findByRole('button', {name: 'toggle menu'}).click()
+    cy.findByRole('option', {name: 'Green'}).click()
+    cy.findByRole('option', {name: 'Gray'}).click()
+    cy.findByRole('button', {name: 'toggle menu'}).click()
+    cy.findByText('Black').should('be.visible')
+    cy.findByText('Red').should('be.visible')
+    cy.findByText('Green').should('be.visible')
+    cy.findByText('Gray').should('be.visible')
+  })
+})

cypress/e2e/useMultipleSelect.cy.js

@@ -0,0 +1,16 @@
+describe('useMultipleSelect', () => {
+  before(() => {
+    cy.visit('/useMultipleSelect')
+  })
+
+  it('can select multiple options', () => {
+    cy.findByRole('combobox').click()
+    cy.findByRole('option', {name: 'Green'}).click()
+    cy.findByRole('option', {name: 'Gray'}).click()
+    cy.findByRole('combobox').click()
+    cy.findByText('Black').should('be.visible')
+    cy.findByText('Red').should('be.visible')
+    cy.findByText('Green').should('be.visible')
+    cy.findByText('Gray').should('be.visible')
+  })
+})

cypress/e2e/useSelect.cy.js

@@ -4,15 +4,15 @@ describe('useSelect', () => {
   })
 
   it('can open and close a menu', () => {
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length.above', 0)
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length', 0)
-    cy.findByTestId('select-toggle-button')
+    cy.findByRole('combobox')
       .click()
     cy.findAllByRole('option')
       .should('have.length.above', 0)

docusaurus/pages/combobox.js

@@ -1,10 +1,9 @@
 import * as React from 'react'
 
 import Downshift from '../../src'
+import {colors} from '../utils'
 
 export default function ComboBox() {
-  const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
-
   return (
     <Downshift>
       {({
@@ -73,10 +72,10 @@ export default function ComboBox() {
           >
             {isOpen &&
               (inputValue
-                ? items.filter(i =>
+                ? colors.filter(i =>
                     i.toLowerCase().includes(inputValue.toLowerCase()),
                   )
-                : items
+                : colors
               ).map((item, index) => (
                 <li
                   style={{

docusaurus/pages/useCombobox.js

@@ -1,11 +1,10 @@
 import React, {useState} from 'react'
 
 import {useCombobox} from '../../src'
-
-const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
+import {colors} from '../utils'
 
 export default function DropdownCombobox() {
-  const [inputItems, setInputItems] = useState(items)
+  const [inputItems, setInputItems] = useState(colors)
   const {
     isOpen,
     getToggleButtonProps,
@@ -21,7 +20,7 @@ export default function DropdownCombobox() {
     items: inputItems,
     onInputValueChange: ({inputValue}) => {
       setInputItems(
-        items.filter(item =>
+        colors.filter(item =>
           item.toLowerCase().startsWith(inputValue.toLowerCase()),
         ),
       )

docusaurus/pages/useMultipleCombobox.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import {useCombobox, useMultipleSelection} from '../../src'
+import {colors} from '../utils'
 
-const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
 const initialSelectedItems = [colors[0], colors[1]]
 
 function getFilteredItems(selectedItems, inputValue) {
@@ -166,7 +166,7 @@ export default function DropdownMultipleCombobox() {
           </button>
           <button
             style={{padding: '4px 8px'}}
-            aria-label="toggle menu"
+            aria-label="clear selection"
             data-testid="clear-button"
             onClick={clearSelection}
           >

docusaurus/pages/useMultipleSelect.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import {useSelect, useMultipleSelection} from '../../src'
+import {colors} from '../utils'
 
-const colors = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
 const initialSelectedItems = [colors[0], colors[1]]
 
 function getFilteredItems(selectedItems) {
@@ -33,8 +33,8 @@ export default function DropdownMultipleSelect() {
     stateReducer: (state, actionAndChanges) => {
       const {changes, type} = actionAndChanges
       switch (type) {
-        case useSelect.stateChangeTypes.MenuKeyDownEnter:
-        case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
           return {
             ...changes,
@@ -46,8 +46,8 @@ export default function DropdownMultipleSelect() {
     },
     onStateChange: ({type, selectedItem: newSelectedItem}) => {
       switch (type) {
-        case useSelect.stateChangeTypes.MenuKeyDownEnter:
-        case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
           if (newSelectedItem) {
             addSelectedItem(newSelectedItem)
@@ -122,15 +122,21 @@ export default function DropdownMultipleSelect() {
               </span>
             )
           })}
-          <button
-            style={{padding: '4px'}}
+          <div
+            style={{
+              padding: '4px',
+              textAlign: 'center',
+              border: '1px solid black',
+              backgroundColor: 'lightgray',
+              cursor: 'pointer',
+            }}
             type="button"
             {...getToggleButtonProps(
               getDropdownProps({preventKeyAction: isOpen}),
             )}
           >
             Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
-          </button>
+          </div>
         </div>
       </div>
       <ul

docusaurus/pages/useSelect.js

@@ -1,8 +1,7 @@
 import React from 'react'
 
 import {useSelect} from '../../src'
-
-const items = ['Black', 'Red', 'Green', 'Blue', 'Orange', 'Purple']
+import {colors} from '../utils'
 
 export default function DropdownSelect() {
   const {
@@ -13,7 +12,7 @@ export default function DropdownSelect() {
     getMenuProps,
     highlightedIndex,
     getItemProps,
-  } = useSelect({items})
+  } = useSelect({items: colors})
 
   return (
     <div
@@ -35,14 +34,19 @@ export default function DropdownSelect() {
       >
         Choose an element:
       </label>
-      <button
-        data-testid="select-toggle-button"
-        style={{padding: '4px'}}
+      <div
+        style={{
+          padding: '4px',
+          textAlign: 'center',
+          border: '1px solid black',
+          backgroundColor: 'lightgray',
+          cursor: 'pointer',
+        }}
         {...getToggleButtonProps()}
       >
         {selectedItem ?? 'Elements'}
         {isOpen ? <>&#8593;</> : <>&#8595;</>}
-      </button>
+      </div>
       <ul
         {...getMenuProps()}
         style={{
@@ -53,7 +57,7 @@ export default function DropdownSelect() {
         }}
       >
         {isOpen &&
-          items.map((item, index) => (
+          colors.map((item, index) => (
             <li
               style={{
                 padding: '4px',

package.json

@@ -88,7 +88,7 @@
     "@testing-library/preact": "^2.0.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.15",
     "@typescript-eslint/eslint-plugin": "^4.28.5",

src/hooks/reducer.js

@@ -1,6 +1,5 @@
 import {getHighlightedIndexOnOpen, getDefaultValue} from './utils'
 
-/* eslint-disable complexity */
 export default function downshiftCommonReducer(
   state,
   action,

src/hooks/testUtils.js

@@ -1,7 +1,8 @@
 import React from 'react'
-import {act} from '@testing-library/react'
+import {screen, act} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
-const items = [
+export const items = [
   'Neptunium',
   'Plutonium',
   'Americium',
@@ -30,22 +31,30 @@ const items = [
   'Oganesson',
 ]
 
-const defaultIds = {
+export const dataTestIds = {
+  toggleButton: 'toggle-button-id',
+  menu: 'menu-id',
+  item: index => `item-id-${index}`,
+  input: 'input-id',
+  selectedItemPrefix: 'selected-item-id',
+  selectedItem: index => `selected-item-id-${index}`,
+}
+
+export const defaultIds = {
   labelId: 'downshift-test-id-label',
   menuId: 'downshift-test-id-menu',
   getItemId: index => `downshift-test-id-item-${index}`,
   toggleButtonId: 'downshift-test-id-toggle-button',
   inputId: 'downshift-test-id-input',
 }
 
-const waitForDebouncedA11yStatusUpdate = () =>
+export const waitForDebouncedA11yStatusUpdate = () =>
   act(() => jest.advanceTimersByTime(200))
 
-const MemoizedItem = React.memo(function Item({
+export const MemoizedItem = React.memo(function Item({
   index,
   item,
   getItemProps,
-  dataTestIds,
   stringItem,
   ...rest
 }) {
@@ -60,4 +69,55 @@ const MemoizedItem = React.memo(function Item({
   )
 })
 
-export {items, defaultIds, waitForDebouncedA11yStatusUpdate, MemoizedItem}
+export const user = userEvent.setup({delay: null})
+
+export function getLabel() {
+  return screen.getByText(/choose an element/i)
+}
+export function getMenu() {
+  return screen.getByRole('listbox')
+}
+export function getToggleButton() {
+  return screen.getByTestId(dataTestIds.toggleButton)
+}
+export function getItemAtIndex(index) {
+  return getItems()[index]
+}
+export function getItems() {
+  return screen.queryAllByRole('option')
+}
+export function getInput() {
+  return screen.getByRole('textbox')
+}
+export async function clickOnItemAtIndex(index) {
+  await user.click(getItemAtIndex(index))
+}
+export async function clickOnToggleButton() {
+  await user.click(getToggleButton())
+}
+export async function mouseMoveItemAtIndex(index) {
+  await user.hover(getItemAtIndex(index))
+}
+export async function mouseLeaveItemAtIndex(index) {
+  await user.unhover(getItemAtIndex(index))
+}
+export async function keyDownOnToggleButton(keys) {
+  if (document.activeElement !== getToggleButton()) {
+    getToggleButton().focus()
+  }
+
+  await user.keyboard(keys)
+}
+export async function keyDownOnInput(keys) {
+  if (document.activeElement !== getInput()) {
+    getInput().focus()
+  }
+
+  await user.keyboard(keys)
+}
+export function getA11yStatusContainer() {
+  return screen.queryByRole('status')
+}
+export async function tab(shiftKey = false) {
+  await user.tab({shift: shiftKey})
+}

src/hooks/useCombobox/__tests__/getComboboxProps.test.js

@@ -1,8 +1,7 @@
 import {act, renderHook} from '@testing-library/react-hooks'
 import {noop} from '../../../utils'
-import {renderUseCombobox} from '../testUtils'
-import {defaultIds, items} from '../../testUtils'
-import useCombobox from '..' // eslint-disable-next-line import/default
+import {renderUseCombobox, defaultIds, items} from '../testUtils'
+import useCombobox from '..'
 import utils from '../../utils'
 
 describe('getComboboxProps', () => {