Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 14 Oct 2022 15:53 by ADMIN

Release 3.7.0 (09 Nov 2022)

stephen

Created on: 11 Aug 2021 05:46

Category: Upload

Type: Bug Report

The files dialog for selection in Upload is not opening on clicking enter or space on the keyboard while the NVDA screen reader is enabled

accessibility issue - upload is not notifying files are chosen

Impacts screen reader users

[WCAG 1.3.1 level A] [WCAG 4.1.3 level AA]

tested using NVDA on chrome browser

input (type="file") status always reads as 'no file chosen' when one or more files have been chosen (correct when no files are chosen).

on choosing a file to upload (so no file chosen yet), screen reader advises; web page title, chrome, page contents, file input status (same behaviour as default html 5 file input). On choosing a file a default browser html 5 file input will advise a file has been chosen. The list shown below the Telerik component is not known to a screen reader user

3 comments

ADMIN

Hristian Stefanov

Posted on: 24 Aug 2021 15:52

Hi Stephen,

Thank you once again for reporting an issue and taking the time to describe everything in detail.

We have changed the bug report status to "Unplanned". As you know, this means that this is a verified/confirmed bug, but with no scheduled date for implementation yet. Since you are the creator of this bug report, you are automatically subscribed to receive email notifications on status updates.

You might be, also aware that we prioritize bug reports depending on community interest. With your vote already added there, the item popularity is increased.

I have also updated your Telerik Points for this bug report as well.

The created item includes the first point of the issues because the second is included in your previous bug report. The third point happens because the focus catches the last action of the user (choosing a file).

There is a difference in the UI between the Telerik Upload and the standard html 5 Upload. By design, for example, our component has a list of the chosen items. This is why there is no big base for comparison between both components.

I hope this clarify things, but if you have any other questions, I would be glad to help.

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.

stephen

Posted on: 17 Aug 2021 23:01

Hi i have expanded my testing to firefox.

Thanks for looking into the issue. Altering default behaviours of elements are going to have side effects.

I agree, the greater issue is on chrome browser.

Firefox experience looks mostly consistent between blazor and html 5 file upload. tested with NVDA.
I have not test in edge.

issue:
1. impact keyboard user (w/ screen reader on): i can't open files dialog via 'select files' button with keyboard (tried space and enter key). after i have chosen one file, the 'select files' button is available to the space key, to open the files dialog
2. impact screen reader user: HTML 5 file upload informs user of contents in file selected, whilst for blazor states u have left a list, before directing focus to next focusable thing.
3. visual user: after choosing a file, visually the 'select files' button looks to have focus, when focus is actually on submit button.

with firefox @ https://demos.telerik.com/blazor-ui/upload/overview

transcript (hitting select files button with left mouse)
"
Browse… button
...
Blazor File Upload Demos - Overview | Telerik UI for Blazor — Mozilla Firefox
File Upload dialog File name:
File name: combo box collapsed
edit Alt+n selected New Text Document.txt
Blazor File Upload Demos - Overview | Telerik UI for Blazor — Mozilla Firefox
Blazor File Upload Demos - Overview | Telerik UI for Blazor document
out of list button Submit Application
"

focus is set to the submit application. personally this was not expected, that's a firefox thing i think.

FYI, pressing shift+tab the user gets the information already known to visual user.
(this info should be announced without the need to find it, so they get the same experience as visual user)

comparison to firefox html 5 file upload @ https://www.w3schools.com/howto/tryit.asp?filename=tryhow_html_file_upload_button

transcript
"
Browse… button
...
File name: combo box collapsed
edit Alt+n blank
...
Open button pressed Alt+o
Tryit Editor v3.6 — Mozilla Firefox
Tryit Editor v3.6 document
button Browse… New Text Document.txt button Submit Query
"

"Ctr+Alt+N" is simply turning on/off screen reader, browser in use is irrelevant was my experience.
Simply put the experience is misleading for chrome browser user, announcing no file was chosen.

ADMIN

Hristian Stefanov

Posted on: 17 Aug 2021 15:34

Hello Stephen,

Thank you for the detailed description.

Before I share the experience of the scenario reproduction, I would like to ask you if this behavior appears only in google chrome or in all browsers. This would be really helpful for us because the next statement is based on a situation when the behavior appears only in google chrome.

I tested the scenario along with the Quality Assurance team, and we hit the described scenario. It seems that the NVDA screen reader reads only on mouseover in google chrome. In different browsers like Firefox or Edge, the NVDA screen reader reads the last action on the screen. This default behavior of the NVDA screen reader in google chrome seems the described behavior.

By the way, another thing we noticed different from the other browsers in chrome is that you need to press "Ctr+Alt+N" to start the screen reader.

Please let me know if this makes sense or if you need any further information. Thank you.

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/.