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
Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -
| Practice | Function (example) |
| Ensure sub-lists are marked up properly | This UL should only contain li elements (without an ARIA-assigned role), script elements (without an ARIA-assigned role) or template elements (without an ARIA-assigned role); or
|
Example: When Telerik Tabstrip has EnableAriaSupport=true, internally tabstrip is combination of ul-li with css to display the Tabs properly -
The html looks like as follows -
<ul class="rtsUL"> <li class="rtsLI rtsFirst" role="tab" aria-disabled="false" aria-level="0" aria-controls="LayoutPageView"> <a accesskey="L" title="Layout" class="rtsLink rtsBefore" id="LayoutTab" href="#"><span class="rtsOut"> <span class="rtsIn"> <span class="rtsTxt"> <h2 class="RadTabStrip RadTabStrip_Default"><u>L</u>ayout</h2> </span> </span> </span> </a> </li> <li class="rtsLI" role="tab" aria-disabled="false" aria-level="0" aria-controls="SearchPageView" aria-selected="true" id="SearchTabStrip_active_tab"> <a accesskey="S" title="Search" class="rtsLink rtsSelected" id="SearchTab" href="#"> <span class="rtsOut"> <span class="rtsIn"> <span class="rtsTxt"> <h2 class="RadTabStrip RadTabStrip_Default"><u>S</u>earch</h2> </span> </span> </span> </a> </li> <li class="rtsLI rtsLast" role="tab" aria-disabled="false" aria-level="0" aria-controls="ResultsPageView"> <a accesskey="R" title="Statewide Search Results 0 records" class="rtsLink rtsAfter" id="ResultsTab" href="#"> <span class="rtsOut"> <span class="rtsIn"> <span class="rtsTxt"> <h2 class="RadTabStrip RadTabStrip_Default">Statewide Search<u>R</u>esults (0)</h2> </span> </span> </span> </a> </li></ul>Observe the aria attributes which are on li elements. Is that really necessary considering the compliance? (as mentioned in practice and example).
Please let me know when are you going to fix this for compliance.
--
Sunil
There is a bug with combining scripts and resources:
Combined CDN Request for Telerik Controls
You can reproduce the issue in the attached web site sample.
Using numerictextbox :
- FireFox (rel.67.0.1) accept non numeric characters.
- IE (rel. 11.461) , correctly, accept only numeric but entering the page in debug mode in Visual Studio, I get the error in attach.
- Edge is ok
Thanks
Mario
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.
The checkboxes decorated with RadFormDecorator appeared double in Classic rendering after upgrading to Firefox 63.
Steps to reproduce:
1. Upgrade to Firefox 63
2. Run the following setup
<telerik:RadFormDecorator runat="server" DecoratedControls="CheckBoxes" RenderMode="Classic" />
<div>asp:Checkbox</div>
<asp:CheckBox ID="chkApproved" runat="server" Text="asp:Checkbox" />
<div>Html Input</div>
<input id="chkApproved1" type="checkbox" name="chkApproved" />
======================================
Solutions found so far:
1) Use RadFormDecorator in Lightweight RenderMode:
<telerik:RadFormDecorator runat="server" RenderMode="Lightweight"/>
2) Set the RadFormDecorator's DecoratedControls="All":
<telerik:RadFormDecorator runat="server" RenderMode="Classic" DecoratedControls="All" />
3) Set the ControlsToSkip="CheckBoxes"
<telerik:RadFormDecorator runat="server" RenderMode="Classic" ControlsToSkip="CheckBoxes" />
4) Or add the following CSS overwrite to the page:
<style>
.rfdCheckboxUnchecked, .rfdCheckboxChecked {
padding: 0 !important;
background-image: none !important;
}
</style>
If you are using the controls from 2019 R1 SP1 or later, you can use the following workaround in order to make the input elements visible until we include the fix internally:
<style>
.t-ff input[type=checkbox].rfdRealInput,
.t-ff input[type=radio].rfdRealInput {
position: static;
}
</style>
Video: https://www.screencast.com/t/rzmzuZ0UFa
Steps to reproduce:
1. Open in IE 11: https://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx
2. Insert a video through the Media Manager
3. Click over a tool having a drop-down menu (e.g. the Format tool)
Result: The heavy-weight object of the video is shown above the shown drop-down menu.
Hello,
I enabled the ShowButton property to the radtextbox, but while writing and the words reach the button I can't see the final of the text.
<telerik:RadTextBox ID="RadTextBox1" runat="server" ShowButton="true"></telerik:RadTextBox>
If I disable the ShowButton and write something in the radtextbox, I can see the final words.
How I can fix this?
Thanks,
Edson
1. tab to calendar button
2. hit enter to open calendar dialog
3. press tab
Notice that instead of causing the focus to move within the calendar pop-up, focus first shifts through all remaining elements of the underlying page. This make this control difficult for users relying solely on keyboard navigation.
Ideally this control should function more like the standard calendar controls, obtaining focus when opened and returning focus to the date field when closed.
We've faced an issue with menu on several RAD controls when running on MacOS 10.14.x (Mojave) with FireFox 66.0.x (Quantum).
Using touchpad or mouse, when right clicking for context menu, it just flashed and doesn't stay open: it opens and then suddenly closes.
We are using Telerik Asp.Net Ajax version 2017.2.503.40 but it can be also replicated on your demo version:
https://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx
https://demos.telerik.com/aspnet-ajax/scheduler/examples/overview/defaultcs.aspx
Not sure if you can provide a fast workaround for this but I just wanted to let you know.
I've checked for some open cases before creating this thread and hope I didn't duplicate something. Please move/close it if necessary.
Regards,
Andrei V.
Hi Telerik team,
Few of our clients reported the following issue with respect to WCAG 2.0 SC 4.1.2 standard. (508 Standard and compliance) -
| Practice | Function (example) |
| Ensure ARIA roles, states, and properties are valid | LI has an aria-level attribute of 0, which is not an integer value greater than, or equal to, 1 |
Example: visit https://demos.telerik.com/aspnet-ajax/tabstrip/examples/wai-aria-support/defaultcs.aspx
Observe the ul-li elements created for tabstrip. On each li element, there is aria-level attribute whose value is set to 0.
As per WCAG this value should start from 1. The value 0 is invalid. Refer: https://www.w3.org/TR/WCAG20-TECHS/ARIA12.html
Please let me know when are you going to fix this for compliance.
--
Sunil
To replicate the problem:
- Create RadGrid and bind it a datasource
- Set ClientSettings - Selecting - AllowRowSelect to true
- Set ClientSettings - EnablePostBackOnRowClick to true
- Add a GridEditCommandColumn or a ButtonColumn with Edit/Save/Cancel CommandNames
- Enable AJAX for the Grid
- Run the application in FireFox
Clicking on the Edit button fires the RowClick event of the Grid instead of Edit/Save/Cancel.
I have a RadCheckboxList In an ASP Panel. When Enabling/Disabling the panel the CheckBoxList does not Enable/Disable. I tested this with a simple mock up with additional controls that work as expected:
<asp:Panel ID="TestPanel" runat="server" Enabled="true">
<telerik:RadCheckBoxList ID="WeeklyDays" runat="server" Columns="4" AutoPostBack="false">
<Items>
<telerik:ButtonListItem Text="Monday" Value="2" />
<telerik:ButtonListItem Text="Tuesday" Value="4" />
<telerik:ButtonListItem Text="Wednesday" Value="8" />
<telerik:ButtonListItem Text="Thursday" Value="16" />
<telerik:ButtonListItem Text="Friday" Value="32" />
<telerik:ButtonListItem Text="Saturday" Value="64" />
<telerik:ButtonListItem Text="Sunday" Value="1" Selected="true" />
</Items>
</telerik:RadCheckBoxList>
<telerik:RadTextBox ID="TestText" runat="server"></telerik:RadTextBox>
<telerik:RadDatePicker ID="TestDate" runat="server"></telerik:RadDatePicker>
</asp:Panel>
<br />
<telerik:RadCheckBox ID="ToggleEnabled" runat="server" Text="Toggle Panel" AutoPostBack="true" Checked="true" OnCheckedChanged="ToggleEnabled_CheckedChanged"></telerik:RadCheckBox>
protected voidToggleEnabled_CheckedChanged(objectsender, EventArgs e)
{
TestPanel.Enabled = Convert.ToBoolean(ToggleEnabled.Checked);
}
Reproduction steps:
Go to the Telerik demo at https://demos.telerik.com/aspnet-ajax/textbox/overview/defaultcs.aspx
In the Comment box, type "one two". Do not let the textbox lose focus.
Highlight "two" and start to drag it to move it before "one". The other text ("one") will disappear, and is gone forever, as far as I can tell.
It can be also reproduced with this configuration:
<telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="RadTextBox3" Width="200px" EmptyMessage="Enter comment" TextMode="MultiLine" Height="100px" Resize="None"></telerik:RadTextBox>
The code in the ASPx file is
<DataCellStyle CssClass="cfDataCell" Width="9%"/>The expected output in the client browser is
<tr style="height: 35px;">
<td class="rpgDataCell cfDataCell" style="width:9%;">823</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">2,488</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">7,518</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">10,851</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">13,017</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">13,069</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">13,253</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">12,799</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">9,861</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">4,543</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">2,038</td>
<td class="rpgDataCell cfDataCell" style="width:9%;">592</td>
</tr>However the generated Html is as below:
<tr style="height: 35px;">
<td class="rpgDataCell" style="width:9%;">823</td>
<td class="rpgDataCell" style="width:9%;">2,488</td>
<td class="rpgDataCell" style="width:9%;">7,518</td>
<td class="rpgDataCell" style="width:9%;">10,851</td>
<td class="rpgDataCell" style="width:9%;">13,017</td>
<td class="rpgDataCell" style="width:9%;">13,069</td>
<td class="rpgDataCell" style="width:9%;">13,253</td>
<td class="rpgDataCell" style="width:9%;">12,799</td>
<td class="rpgDataCell" style="width:9%;">9,861</td>
<td class="rpgDataCell" style="width:9%;">4,543</td>
<td class="rpgDataCell" style="width:9%;">2,038</td>
<td class="rpgDataCell" style="width:9%;">592</td>
</tr>