ComboBox refactoring

[devongovett]

• Changes the mobile combobox to be a single button that opens a dialog (tray) with a search field and a listbox inside rather than two comboboxes. This announces and behaves better with VoiceOver on iOS. Double tapping on the input field shouldn't close the tray since it also focuses the input, so the announcement with combobox is confusing. Changing the role to searchbox instead fixes this. In addition, using a button that launches a dialog behaves better since iOS doesn't try to bring up the keyboard when focusing the outer input, which isn't really an input at all.
• Hide the software keyboard on scroll in the tray for a bigger area to scroll in.
• Changes the way controlled props work. Now inputValue and selectedKey don't control each other, which was kinda confusing. Instead they are controlled independently.
• Moved filtering logic into a useFilter hook that provides locale sensitive startsWith, endsWith, and contains functions to be used as custom filters. The items prop now controls results and won't be filtered by default. The default filter is used when defaultItems or static children are used. onFilter has been removed.
• Removed onCustomValue because it was confusing when it would be fired. onInputChange should be enough here.
• Moved more of the logic from ARIA into stately so it can be shared.
• Changed the behavior of bluring the combobox to not select the focused item. Instead, this is only done when using the keyboard to blur (Tab key). It was weird to hover over an item and then click outside and it selected that option.
• Added a live region announcer to announce when focus moves to a new item or into a new section. In addition, it also announces the number of options available when filtering, and when an option is selected. This makes the combobox usable with VoiceOver which doesn't announce active descendant changes at all. This is (mostly) only used on Apple devices to avoid double announcing in NVDA/JAWS.
• Add aria-hidden to all elements except both the input and the popover when open. Before the input wasn't accessible while the popover was open because it was hidden. This made it impossible for especially touch screen readers to use. This required crawling the DOM rather than relying on React context since both elements are not in the same subtree. Fixes ComboBox input is aria-hidden while popover is open #1093. Closes Popover should allow isModal={false} for ComboBox #1025.

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation