In Development
Last Updated: 14 Aug 2019 11:51 by ADMIN
Sunil Sutar
Created on: 10 Jun 2019 15:13
Category: ComboBox
Type: Bug Report
1
Radcombobox with EnableAriaSupport=true reading as readonly with JAWS
Problem:  Latest Telerik version of Combobox or RadCombobox reads "readonly" though it's not, when EnableAriaSupport is enabled.

Details: 

url to test with JAWS - https://demos.telerik.com/aspnet-ajax/combobox/examples/wai-aria-support/defaultcs.aspx

When I use JAWS to read the combobox present on this demo it reads as follows - 
              ComboBox readonly - Alice Mutton. To change the selection press the arrow keys.

Over here, why JAWS is reading "readonly". It's not readonly. It's making our screenreader blind users confusing.

I drilled down more into the problem and found that, the input element below has the aria-readonly=true set though the combobox is not readonly.
Here is the html generated for above combobox from telerik demo site -

<input name="ctl00$ContentPlaceholder1$RadComboBox2" class="rcbInput radPreventDecorate" id="ctl00_ContentPlaceholder1_RadComboBox2_Input" role="combobox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-readonly="true" aria-owns="ctl00_ContentPlaceholder1_RadComboBox2_listbox" aria-autocomplete="none" type="text" readonly="readonly" value="Alice Mutton" autocomplete="off">

I understand that this input control should be readonly so that aria users should not type and go haywire. But looks like to maintain the readonly=readonly property, telerik is generating aria-readonly=true for this _Input control and resulting this issue.

When you change this attribute aria-readonly="true" to aria-readonly="false", JAWS read it correctly as follows - 
              ComboBox - Alice Mutton. To change the selection press the arrow keys.

Let me know how to achieve that so that users will not be confused.
2 comments
ADMIN
Rumen
Posted on: 14 Aug 2019 11:51
Hi Sunil,

We just released the Latest Internal Build 2019.2.814 of the suite with a fix for this issue.

You can check the release notes at https://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp-net-ajax-2019-2-814-(nightly-build-2019-08-14) as well as download the Telerik_UI_for_ASP.NET_AJAX_2019_2_814_Dev_hotfix.zip installation from https://www.telerik.com/account/product-download?product=RCAJAX.


Best Regards,
Rumen
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
Rumen
Posted on: 10 Jun 2019 15:15
Hi Sunil,

The problem is verified and the bug report item approved.

The temp solution you can use is the following:

<script>
    function OnClientLoad(combobox, args) {
        var input = sender.get_inputDomElement();
        if (input) input.setAttribute("aria-readonly", "false");
    }
</script>
<telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" OnClientLoad="OnClientLoad" runat="server" Height="200px" Width="300px" EnableAriaSupport="true"
    DataSourceID="SqlDataSource1" DataTextField="ProductName"
    DataValueField="ProductID" />

We will try to solve it for R3 2019.

You can subscribe to get notified for status changes of the feedback item.

Regards,
Rumen
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.