Last Updated: 20 Dec 2018 17:16 by ADMIN
Sunil Sutar
Created on: 20 Dec 2018 17:06
Category: ComboBox
Type: Bug Report
Radcombobox with EnableAriaSupport=true reading as readonly with JAWS
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.
1 comment
Posted on: 20 Dec 2018 17:16
The requested improvement will require introducing a breaking change in the rendering of the component and regarding this we can't currently provide an ETA when it will be implemented since this requires collecting feedback by more customers in the feedback portal.

It really makes sense this readonly to behave like this in the demo. In fact, even though it's visual like a dropdown, you can still write with the keyboard and that's why the readonly is set and is needed. Accordingly, for aria-readonly, the same applies, because people will be deluded that they can write on the Input.

The solution to accessibility is to implement the essential properties. I mean, in order to change aria-readonly, we need to implement an aria-autocomplete to read:

1. When we have a selection but do not have filtering and custom text:
aria-autocomplete: list ---> Combobox list item
2. When we have selection and filtering: ---> Combobox inline completion list item
aria-autocomplete: both
3. disabled: aria-autocomplete: none

These options are explained in more detail at https://accessibilityresources.org/aria-autocomplete.

For the time being, the quick fix that we will introduce in R1 2019 is to toggle "aria-readonly" as the "readonly" attribute.

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.