MultiSelect selected items are not announced by screen readers

[veselints]

Bug report

MultiSelect selected items are not announced by screen readers

Regression introduced with R3 2020 SP1

Reproduction of the problem

• Run the following Demo: https://demos.telerik.com/kendo-ui/multiselect/index
• Tab to focus the first MultiSelect
• Selected items will not be announced

Expected/desired behavior

Selected items should be announced by screen readers

Environment

• Kendo UI version: 2020.3.1118
• Browser: [all]

[veselints]

Here are the findings so far. All testing is made with ChromeVox in Chrome:

• The members in the tag list are never announced when having aria-labeledby pointing to the widget label element and aria-describedby pointing to the tag list;
• In order to announce the selected items we need to move the reference to the tag list in the aria-labeledby attribute list;
• Even doing so, if we keep the role="listbox" on the tag list its items would not be announced

Having the above said, I would suggest following one of the below 3 approaches:

1. Use role="group" for the tag list and role="listitem" for its items;
2. Use role="list" for the tag list and role="listitem" for its items;
3. Avoid using any roles as the <ul> and <li> elements have anyways semantic meaning of list and listitem;

[Iankodj]

In my opinion, we should keep the label (aria-labelledby) separate from the taglist. The widget should have an announce-able label regardless of the items selected. I suggest keeping the aria-labelledby and aria-describedby pointing to the tag list.

As for the other 3 options, 1 and 2 lead to the same output as 3 - I do not see any value in utilizing 1 or 2. I think we can go with 3.

I spiked a simple HTML example that seems to work: https://dojo.telerik.com/oReJaQaJ/8

[veselints]

Apart from the above, in order to improve the widget accessibility, we should also consider aria-multiselectable="true" and role="listbox" on the focusable input.

[veselints]

The regression is caused by the following change:
https://github.com/telerik/kendo/commit/5cf0fe5ed310396a9451b7ae29ce1f2b3d634678

It fixes the following two bugs:
#5460
#5459

If we revert the above fix we could easily avoid the first bug by simply removing the listbox and option roles from the tag list (as suggested above).

The second bug, however, is a more complicated scenario:

• The previous state was that the input has role="listbox", but that role does not allow aria-autocomplete property;
• Currently we use role="textbox" but this way we could not use aria-multiselectable="true" which is appropriate for the widget;

My suggestion, if that allows the readers to properly announce the tag list, is to keep the current role="textbox" even if we could not use aria-multiselectable="true".

[veselints]

Related to:
#5589