I have quite a complicated bit autocomplete search developed using React. I don’t want to redevelop full thing. I need to make it work with a screen reader, to achieve this I use a button to set focus on input field that is being used to do the search – this all works. It also works fine without a screen reader, but when I am focused on this input using the screenreader (voiceover, in either FF or Chrome) I get the message that I am on a combo box and I can enter text by typing.

When I type no text gets entered in the field and the screen reader goes forward to next readable content on the screen. But without the screen reader typing in the field works fine. If I turn on the screen reader and navigate to the field using the mouse and then enter text I get the same result as if I had used the screen reader to navigate to it.

Thus I assume it is probably something with the markup of the input.

This is the input

        <input class="chakra-input aa-Input css-t0hzm1" 
    aria-selected="true" aria-autocomplete="both" 
    aria-labelledby="search-autocomplete-label" 
    autocomplete="off" autocorrect="off" 
    autocapitalize="none" enterkeyhint="go" 
    spellcheck="false" autofocus="" 
    placeholder="Search shoes, leather goods or accessories" maxlength="100" type="search" 
    data-testid="searchBar_input" 
    id="search-autocomplete-input" 
    value="" 
    aria-controls="search-autocomplete-recentSearchesPlugin-list 
search-autocomplete-querySuggestionsPlugin-list">

I have tried to put key handlers on the input – key handlers work fine without screen reader (report key pressed event), with screen reader no report key pressed, go on to next readable text.

Hoping to find if anyone has experience with similar problem and what to do as it seems pretty edge case here.