Completed
Last Updated: 04 Sep 2019 08:27 by ADMIN
Jeff
Created on: 18 Jun 2019 13:16
Category: ComboBox
Type: Bug Report
2
Combo box keyboard navigation not function and JAWS selection of combo box not possible
See: https://demos.telerik.com/aspnet-ajax/combobox/examples/accessibility/defaultcs.aspx

1. Click somewhere in the page to establish focus.

2. Use the tab key to focus the combo box.  (This works in Chrome, but in IE the control is skipped.)

3. Note that the combo box does not drop-down the list of options like it does when you click the mouse. Clicking the enter key does not drop down the list. Alt-Down-Arrow does not drop down the list.

4. Press Tab and note that focus skips the arrow icon on the combo box and moves down to the "validate with Wave" link.

5. Press Shift-Tab and note that the Arrow icon is now focuses and the enter key will drop down the options list.

6. While JAWS 2019 is running, press the "C" key and note that JAWS reports that there are no combo boxes on the page.

 

Expectations:

* Jaws is able to properly identify the combo box based on ARIA tags

* Tabbing into the combo box presents the same behaviors as using the mouse button
2 comments
ADMIN
Peter Milchev
Posted on: 04 Sep 2019 08:26

Hello,

We are marking this item as Completed as the workaround provided corrects the behavior of the screen reader with Internet Explorer.

The fix won't be included in the source code because JAWS/Internet Explorer might receive an update that would allow screen readers to respond properly to a correctly structured HTML according to the WAI ARIA guidelines.

Regards,
Peter Milchev
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.
ADMIN
Peter Milchev
Posted on: 18 Jun 2019 13:24
Hello Jeff,

I am sharing the workaround that we concluded as working in the support thread, which is using the following OnClientLoad handler for the ComboBox: 

//Apply only for IE and only for non-readonly combo-boxes, in both lightweight and classic mode.
 
function OnClientLoad(sender, args) {
    if (Telerik.Web.Browser.ie) {
        var readonlyClass = "rcbReadOnly";
        var input = sender.get_inputDomElement();
        var $parent = $telerik.$(input.parentElement);
 
        //Only apply for "type-ahead" boxes or it messes JAWS' navigation highlight
        if (!$parent.hasClass(readonlyClass) //lightweight mode
            && !$parent.closest("tr").hasClass(readonlyClass)) { //classic mode
            $parent.attr("role", "combobox");
            $parent.attr("aria-autocomplete", "none");
 
            var labeltext = $telerik.$("label[for=" + sender.get_id() + "_Input]").text();
            $parent.attr("aria-label", labeltext);
 
            $parent.on("focus", function () {
                input.focus();
            });
        }
    }
}


Regards,
Peter Milchev
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.