[Autocomplete] Have the screen reader announce when autocomplete is o…

…pen and closed (#30601)
mui · Mar 4, 2022 · 298627c · 298627c
1 parent fce921a
commit 298627c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 84 deletions.
diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
@@ -1011,8 +1011,6 @@ export default function useAutocomplete(props) {
   return {
     getRootProps: (other = {}) => ({
       'aria-owns': listboxAvailable ? `${id}-listbox` : null,
-      role: 'combobox',
-      'aria-expanded': listboxAvailable,
       ...other,
       onKeyDown: handleKeyDown(other),
       onMouseDown: handleMouseDown,
@@ -1034,12 +1032,14 @@ export default function useAutocomplete(props) {
       'aria-activedescendant': popupOpen ? '' : null,
       'aria-autocomplete': autoComplete ? 'both' : 'list',
       'aria-controls': listboxAvailable ? `${id}-listbox` : undefined,
+      'aria-expanded': listboxAvailable,
       // Disable browser's suggestion that might overlap with the popup.
       // Handle autocomplete but not autofill.
       autoComplete: 'off',
       ref: inputRef,
       autoCapitalize: 'none',
       spellCheck: 'false',
+      role: 'combobox',
     }),
     getClearProps: () => ({
       tabIndex: -1,

diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
@@ -295,7 +295,7 @@ describe('useAutocomplete', () => {
         return <input {...getInputProps()} />;
       };
       render(<Test options={['foo', 'bar']} />);
-      const input = screen.getByRole('textbox');
+      const input = screen.getByRole('combobox');
 
       act(() => {
         fireEvent.change(input, { target: { value: 'free' } });