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.