NVDA Screen reader does not read on focus the selected items in the MultiSelect input

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 02 Mar 2022 15:43 by ADMIN

stephen

Created on: 22 Sep 2021 04:44

Category: MultiSelect

Type: Bug Report

NVDA Screen reader does not read on focus the selected items in the MultiSelect input

The following, took a bit of effort to identify where the behaviour was failing for a screen reader.

for all scenarios below the multi-select component currently has items (more than one) in it as selected.

GOOD

if keyboard focus is on text edit, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab keys) all selected items are read out correctly

BAD

if keyboard focus is on selected item, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab key) the focused (selected) item is not read out correctly.

(sorry example read out not provided)

GOOD

selected items are read out correctly when;

closing items panel w/ escape key,
closing items panel when selecting an item

BAD

delete item;

remove all selected items w/ escape key does not inform a screen reader user of the outcome; that no item is now selected (should state something).

removing last item with backspace does not inform screen reader of the outcome; that no item is now selected (should state something). I swear this worked once with firefox.

the following behaviour also occurs after removing all items via a keyboard, the keyboard focus becomes lost;

(BAD) most times u can't press a right / down key into the text section of the multi-select (experienced w/ firefox too)
(GOOD) most times can press alt+down to bring the panel (experienced w/ firefox too)
(GOOD) u can still tab out to next clickable object

6 comments

ADMIN

Hristian Stefanov

Posted on: 02 Mar 2022 15:43

Hi Mike,

Thank you for the good cooperation on reproducing the issue here.

The described behavior is a confirmed bug now. It will be fixed shortly in one of the upcoming (1-2) releases.

Please keep an eye on the public item for status updates.

Additionally, as a small gesture of gratitude for the reported bug, I added Telerik points to your account.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Mike

Posted on: 24 Feb 2022 13:39

Hi Hristian,

I am using the latest version of NVDA (2021.3.3) and the latest firefox (97.0.1 64-bit). Here are the steps to illustrate what I'm talking about, and I'm using your keyboard navigation demo of the control for the test:

Tab into the multiselect control.
Alt-down to open the dropdown.
Select Albania and click enter - Albania gets read out
Alt-down again
Select Bulgaria - both Albania and Bulgaria get read out
Alt-down again
Select Kosovo - Albania, Bulgaria and Kosovo get read out
Hit left arrow to select the Kosovo tag - Section gets read out
Hit left arrow to select Bulgaria tag - Section gets read out
Hit left arrow to select Albania - Section gets read out
Hit right arrow back to Bulgaria - Section gets read out
Hit right arrow back to Kosovo - Section gets read out
Hit backspace - Kosovo is deleted - Section gets read out (however in the speech viewer output it looks like it tries to read all of the remaining selections in the control, but I don't think it ever gets read because focus immediately shifts to the Bulgaria tag)
Hit backspace - Bulgaria is deleted - Section gets read out (again it looks like it tries to read out the control selections but it gets overridden by the focused item)
Hit backspace - Albania is deleted - it reads out: Countries edit Enter Balkan countries, e.g., Bulgaria blank

Here is the output from the speech viewer for that test:

Blazor MultiSelect Demos - KeyBoard Navigation | Telerik UI for Blazor — Mozilla Firefox
Blazor MultiSelect Demos - KeyBoard Navigation | Telerik UI for Blazor document
main landmark
combo box collapsed
Countries edit Enter Balkan countries, e.g., Bulgaria blank
Albania
Bosnia & Herzegovina
Bulgaria
Croatia
Kosovo
North Macedonia
Montenegro
Serbia
Slovenia
Enter Balkan countries, e.g., Bulgaria list
Albania not selected 1 of 9
Countries edit Albania  blank
Albania
Bosnia & Herzegovina
Bulgaria
Croatia
Kosovo
North Macedonia
Montenegro
Serbia
Slovenia
Enter Balkan countries, e.g., Bulgaria list
Albania 1 of 9
Bosnia & Herzegovina not selected 2 of 9
Bulgaria not selected 3 of 9
Countries edit Albania  Bulgaria  blank
Albania
Bosnia & Herzegovina
Bulgaria
Croatia
Kosovo
North Macedonia
Montenegro
Serbia
Slovenia
Enter Balkan countries, e.g., Bulgaria list
Bulgaria 3 of 9
Croatia not selected 4 of 9
Kosovo not selected 5 of 9
Countries edit Albania  Bulgaria  Kosovo  blank
section
section
section
section
section
Countries edit Albania  Bulgaria  blank
section
Countries edit Albania  blank
section
Countries edit Enter Balkan countries, e.g., Bulgaria blank

I then performed a second test regarding hitting the escape key to delete all selected items, and while it performs the delete, nothing is read to say that the field has been cleared, and not even the label and placeholder text are read like they are with the backspace key. Steps:

Tab to the control
Alt-Down and select Kosovo - it reads: Countries edit Kosovo  blank
Alt-Down and select Croatia - it reads: Countries edit Kosovo  Croatia  blank
Hit Escape - nothing is read and all tags are deleted.

Here is the Speech Viewer output for that:

Enter Balkan countries, e.g., Bulgaria list
Croatia not selected 4 of 9
Kosovo not selected 5 of 9
Countries edit Kosovo  blank
Albania
Bosnia & Herzegovina
Bulgaria
Croatia
Kosovo
North Macedonia
Montenegro
Serbia
Slovenia
Enter Balkan countries, e.g., Bulgaria list
Kosovo 5 of 9
Croatia not selected 4 of 9
Countries edit Kosovo  Croatia  blank

Now I've also performed the same tests with Jaws. I don't have the latest version of this because the application is expensive, but most Jaws users from my user base are not usually on the latest version anyway. My version is 2019.1912.1. My results for this reader taking the same steps are as follows:

Test one: All of the same problems with the tags not being read, but instead of it reading section, it says blank.

Test two: After hitting escape and deleting everything it actually reads the label and placeholder for the control.

I would expect that navigating the tags, or deleting them should notify the user of the currently selected tag and/or notify the user of the delete. Right now with it reading blank or section, a blind user is going to get lost when navigating the control.

Thanks.

ADMIN

Hristian Stefanov

Posted on: 24 Feb 2022 12:35

Hi Mike,

Let's cover the latest described issue first below.

I tested our MultiSelect demo with the NVDA screen reader. It seems the arrow keys are working correctly on my machine. That being said, please make sure you have the latest version of NVDA and the latest Firefox version (the main browser that NVDA supports). If the problem is still there, could you please provide some more details on what example you test or which browser? Also, any other steps to reproduce the issue will help us a lot.

Now the previous issues.

Our statement about the previous issues remains the same based on the information we have for now. As a result of the previous tests, the MultiSelect keyboard navigation seems to work as expected with the latest version of NVDA. Still, you can always share here more information about possible accessibility issues.

Thank you.

Regards,
Hristian Stefanov
Progress Telerik

Mike

Posted on: 17 Feb 2022 19:54

Is there any movement with these issues?

Further, when I try to navigate with the arrow keys over the selected items, the screen readers are not reading what is selected. NVDA just keeps reading "Section" for each selected item, and Jaws reads "blank".

ADMIN

Hristian Stefanov

Posted on: 29 Sep 2021 15:48

Hi Stephen,

When you press the escape key, a sound appears, and you need to press it a second time to remove all the items. This seems like the thing that informs the user that the next escape press will delete all. I tested this also on other components like ComboBox, and it is the same.

For the backspace key, when you press backspace it always reads all the left items. This is how the user knows when an item is deleted.

Can you please confirm if you are experiencing the same behavior or if the expectations are different?

Thank you.

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN

Hristian Stefanov

Posted on: 28 Sep 2021 14:45

Hi Stephen,

Thank you for the detailed explanation.

We are currently making further tests with the Quality Assurance team on the described scenario. I will reach you here as soon as possible with more details.

Regards,
Hristian Stefanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.