[Autocomplete] Have the screen reader announce when autocomplete is open and closed

[EdmundMai]

• [ x ] I have followed (at least) the PR section of the contributing guide.

Fixes: #30369

Problem:

1. Start your the NVDA or JAWS screen reader
2. Tab to the Autocomplete component and open the dropdown by pressing down arrow
3. The screen reader should announce that the combobox is open ❌
4. Close the dropdown by pressing escape
5. The screen reader should announce that the combobox is closed ❌

Solution:

• Move role="combobox" to input
• Move aria-expanded to input

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 43e69f3

[slayybelle]

Thanks for doing this! Hoping it will make it into the next release?

[siriwatknp]

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

1. pull latest master from upstream to your branch
2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
   2.1 revert the change on those markdown files you did
   2.2 pull latest master from upstream (you should not see conflict)
   2.3 make the changes again at docs/data/material/*
3. run yarn docs:api
   • you might see the changes in docs/pages/material/api/* if your PR touches some of the components
   • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

[eps1lon]

Thanks for the work! Could you check #25365 and give a quick summary whether this PR fully moves from ARIA 1.1 to 1.2?

[EdmundMai]

@eps1lon No problem! I can only speak for the two things I changed (adding the combobox role + aria-expanded), but it looks like they both meet the requirements for ARIA 1.2

Namely:

A combobox input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.

and

A combobox is said to be expanded when both the combobox element showing its current value and its associated popup element are visible. Authors MUST set [aria-expanded](https://www.w3.org/TR/wai-aria-1.2/#aria-expanded) to true on an element with role combobox when it is expanded and false when it is collapsed.

Source: https://www.w3.org/TR/wai-aria-1.2/#combobox

[eps1lon]

I think that we should move to the 1.2. pattern fully. Partially moving puts us in a weird spot where we can't rely on tested patterns from the community.

[EdmundMai]

@eps1lon You mean everything on this page? https://www.w3.org/TR/wai-aria-1.2/

I agree that Autocomplete should be fully compliant, however this PR's goal was to fix the combobox so the screen reader will read the expanded / collapsed state out loud. The current version in production does not do this, so it probably isn't even 1.1 compliant let alone 1.2.

[michaldudak]

It seems to me that this implementation follows the spec (https://www.w3.org/TR/wai-aria-1.2/#combobox):

• The role="combobox" is set on the input element
• The arrow to expand the combobox is a button, is focusable, and removed from the document Tab sequence
• aria-expanded is placed on the input and represents the state of the combobox
• The popup has role="listbox"
• aria-controls attribute is correctly set on the input

Thanks for your work on this, @EdmundMai!