JAWS causing Material UI autocomplete combobox odd behaviour

[haze9greg]

Summary

Brief description of the issue. Please list any specific steps.

Example:

1. Open JAWS
2. Go to https://uxdc.gitlab.io/daaas/#/vetting-app/request-researcher
3. Tab to "Request folder path" combobox
4. Use arrow keys to scroll through options (notice focus goes to next input label)
5. Select an option with mouse
6. Tab from combobox to the "Clear (X)" button (notice JAWS reads page details in instead of "Clear button")

Expected result

1. Use arrow keys should allow user to scroll through combobox options.
2. Tabbing to "Clear" button should read the button, instead of page details.

Actual result

1. Using the arrow keys when combobox is selected shifts focus to next input label.
2. Tabbing to Clear button reads page details.

Examples

Without JAWS

With JAWS

[stevefaulkner]

@haze0028 I am getting a timeout on https://uxdc.pages.cloud.statcan.ca/daaas/daaas-prototypes/#/vetting-app/request-researcher

[haze9greg]

@haze0028 I am getting a timeout on https://uxdc.pages.cloud.statcan.ca/daaas/daaas-prototypes/#/vetting-app/request-researcher

@stevefaulkner I've updated the link. It should work now.

[JAWS-test]

I don't think this is a JAWS error, but the combo box is implemented incorrectly. So the label and the clear button are inside the combo box. This leads to no output at all when reading with the virtual cursor. I recommend a implementation according to https://w3c.github.io/aria-practices/#combobox

[stevefaulkner]

I don't think this is a JAWS error, but the combo box is implemented incorrectly

While NVDA seems to handle this ok, I agree that the issue is with the incorrect use of role=combobox which should be on the text box

<textarea aria-invalid="false" autocomplete="off" id="request-folder-path" required="" class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-v59wfm" aria-autocomplete="list" autocapitalize="none" spellcheck="false" style="height: 20px; overflow: hidden;">Project folder / Shared folder / Request folder three</textarea>