Screen reader not reading selected list when dropdown is closed [Bug]:

[SamiiNodenPoli]

Bug description

The screen reader does not read the selected list when focus is removed from the dropdown and remains on the field

Expected behavior

When an item in the dropdown list is selected and then this is collapsed using esc key, the focus moves back to the field and screen reader should read the selected list of items along with the field name when focus is received.

Steps to reproduce

Step 1: When the 'state' combo box receives tab focus, screen reader reads it as “State combo box collapsed has auto complete editable blank”. It reads the name, role, value, and state of the element i.e.,

Name- State Role- Combobox Value- Blank State- collapsed

Step 2: When the combo box is expanded, using down arrow key, screen reader announces the list item along with its position out of total items. Ex: “Alabama 1 of 56, Alaska 2 of 56”

Step 3: On selecting Alaska, screen reader announces the value selected. “State combo box collapsed has auto complete editable Alaska”

Similarly, the expectation from the combo box is for it to read the values selected as shown in Step 3.

Currently, it is reading as “Function combo box collapsed editable opens list Function blank” even though the field, which contains values, is selected.

Suggestion: It should read something like- “Function combo box collapsed editable opens list Selection name selected Selection name selected”

Additional context

All devices

[JoackimPennerup]

What plugins are you using? They differ a lot in how well they handle a11y.

[JDCain]

I see this using the demo example. After an item is selected it always returns the box as blank. I assume this has something to do with how you can keep typing in the box after selecting something, but I don't know enough about how this all works yet to know.

    new TomSelect("#select-beast", {
        create: true,
        sortField: {
            field: "text",
            direction: "asc"
        }
    });

</style>
<select id="select-beast" placeholder="Select a person..." autocomplete="off">
    <option value="">Select a person...</option>
    <option value="4">Thomas Edison</option>
    <option value="1">Nikola</option>
    <option value="3">Nikola Tesla</option>
    <option value="5">Arnold Schwarzenegger</option>
</select>

list
Arnold Schwarzenegger  1 of 4
t
Thomas Edison  1 of 2
h
o
Select a person...  combo box  expanded  editable  opens list  spelling error  tho
list
Thomas Edison  1 of 1
combo box  collapsed  editable  opens list  blank

[JDCain]

If I set controlInput: null then it does read the selection. Is there a way to remove the controlInput once maxItems or something else is hit and then add it back once the item is removed?