Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 01 Mar 2019 10:40 by ADMIN
Sreejith
Created on: 28 Feb 2019 01:32
Category: Kendo UI for jQuery
Type: Feature Request
1
Accessibility compliance

Hi,

We are using the progress functionality across the applications, also its inbuilt in Grids/Tree View or most of the Kendo controls when data is loading. Now we are hit with an Accessibility issue as stated below in JAWS 2019.

"Issue: There is a loading screen that appears throughout the application. Sighted users are able to see the loading indicator, however, screen reader users should also be aware of the loading screen."


this is what we use explicitly in some places other than the inbuilt loading indicator.

// show loading indicator
        kendo.ui.progress($("#divCriteria"), true);

 

So is there any settings available that we can make this screen readable when the progress bar appears? meaning if we setup globally once place it takes care across everywhere? Including Grids / Treeview etc.

I read setting this role=” aria-busy=” will do the job, but this functionality already have the kendo scripts?

<div role="alert" aria-busy="alert"> Data is loading... </div>

 

Appreciate a quick response or solution for this...

 

Thanks

Sree

5 comments
ADMIN
Alex Hajigeorgieva
Posted on: 01 Mar 2019 10:35
Hi, Sre,

It is possible to override the kendo.ui.progress method if you place the override before any kendo widgets are initialized. Here is the override according to your preference as well as a Dojo which demonstrates that the new settings are utilized:

https://dojo.telerik.com/EtEFUxad/2

$.extend(kendo.ui, {
   progress: function(container, toggle, options) {
       var mask = container.find(".k-loading-mask"),
           support = kendo.support,
           browser = support.browser,
           isRtl, leftRight, webkitCorrection, containerScrollLeft, cssClass;
 
           options = $.extend({}, {
               width: "100%",
               height: "100%",
               top: container.scrollTop(),
               opacity: false
           }, options);
 
           cssClass = options.opacity ? 'k-loading-mask k-opaque' : 'k-loading-mask';
 
       if (toggle) {
           if (!mask.length) {
               isRtl = support.isRtl(container);
               leftRight = isRtl ? "right" : "left";
               containerScrollLeft = container.scrollLeft();
               webkitCorrection = browser.webkit ? (!isRtl ? 0 : container[0].scrollWidth - container.width() - 2 * containerScrollLeft) : 0;
 
               mask = $(kendo.format("<div class='{0}'><span class='k-loading-text' role='alert' aria-busy='alert'>{1}</span><div class='k-loading-image'/><div class='k-loading-color'/></div>", cssClass, "Please wait data is loading"))
                   .width(options.width).height(options.height)
                   .css("top", options.top)
                   .css(leftRight, Math.abs(containerScrollLeft) + webkitCorrection)
                   .prependTo(container);
           }
       } else if (mask) {
           mask.remove();
       }       
   }
 });

Alternatively, you may employ a MutationObserver. However, if not used optimally, it may or may not impose a performance hit, so I would suggest you do some research on the matter. I found this helpful in SO:

https://stackoverflow.com/a/39332340

Here is a proposed usage:

https://dojo.telerik.com/EtEFUxad

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Sreejith
Posted on: 28 Feb 2019 21:46

Is there a way if I could override the kendo.ui.progress method and make those attribute insertion there? So the change will stay in one place?

Sreejith
Posted on: 28 Feb 2019 21:22

If the span had the following attribute it works as expected. unfortunately, its in the minimized Kendo JS and not a good idea we are editing the same. Because when the next Kendo upgrade comes in we loose those changes.

<span class="k-loading-text" role="alert" aria-busy="alert">Please wait data is loading</span>

 

So wherever I am calling kendo.ui.progress, I insert the below three attributes. ( sad part is we have so many places it is being called )

kendo.ui.progress($(".form-group"), true);
 $("span.k-loading-text").attr("role", "alert");
 $("span.k-loading-text").attr("aria-busy", "alert");
 $("span.k-loading-text").text("Please wait data is loading");

 

As far as Grid/Tree-view concerned , I am yet to do that and test. Will update if it works as expected.

The bottom line is, if the Kendo script had those aria role attributes we didn't had to do this workaround.

Thanks

Sree

 

Sreejith
Posted on: 28 Feb 2019 14:56

Hello Alex, Yes please, you may make it as public.

 

ADMIN
Alex Hajigeorgieva
Posted on: 28 Feb 2019 11:04
Hi, Sre,

Thank you for getting in touch with us to inquire about the accessibility of the loading icon.

Currently, the easiest solution would be to use the requestStart event of the data source to set the aria-busy attributes to true and the requestEnd or dataBound event of the widgets to set it to false.

https://dojo.telerik.com/@bubblemaster/uBoxIBEK

However, I do think this is a great idea and I have logged it as a feature request.

https://github.com/telerik/kendo-ui-core/issues/4874

To get community support for the idea and give it a better chance to be implemented sooner, would you mind if I make this post a public one so people can vote for it? The greater the demand, the higher the chance for the idea to become a built-in functionality.

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category