Last Updated: 13 Nov 2020 14:36 by ADMIN
Created on: 06 Nov 2020 15:02
Type: Bug Report
Readonly input widgets has different appearance on hover with Sass and Less themes

I need my application to be fully WCAG compliant.

I have multiple form fields that are not to be modified by the user, but must be readable by them.

Take the combobox for example: https://dojo.telerik.com/@GaloisGirl/exAZIROW

  • The disabled variant is not focusable, nor does it have sufficient contrast between text and background. This is correct by WCAG rules, but not suitable to my use case.
  • The readonly variant is almost perfect, but the arrow has visual cues that suggest it's interactive (color, hover background, cursor) when it's not.

The same problems occurs for DatePicker (see https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/readonly ) and other widgets.

Please keep in mind the subtle differences in meaning between readonly and disabled and do not just apply disabled styles to readonly widgets.

1 comment
Posted on: 13 Nov 2020 14:36

Hello Anna,

Thank you for your report. 

The issue seems to appear only when Sass themes are used. Based on your report I logged the following issue in the official GitHub repo and you could track our progress on it. I changed the title of the current issue to correspond to the one in Github.

- https://github.com/telerik/kendo-themes/issues/2073

Regarding the cursor If you need to change the way the cursor is rendered for the read-only inputs you could for example use the following style:

       cursor: context-menu !important;  

Here is the modified Dojo example.

As a small token of gratitude, your Telerik points are now updated.


Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.