kendo-theme-default Radio And CheckBox style not working with RTL direction

[BtShp]

I'm submitting a...

• Bug report

Current behavior

I tried to use the style k-radio and k-checkbox in angular2 application,
RTL language.
But when I try to move the Radio before Label like RTL diraction-
the radio dosnt work and cant be pressed.

Expected behavior

use checkBox And radio style with RTL direction

Minimal reproduction of the problem with instructions

Try put k-radio or k-checkbox style with labels after them in RTL directions,
like:

<label class="k-radio-label" for="search"> </label>
<input class="k-radio" type="radio" name="optionsRadios" [(ngModel)]="optionSearch" id="search" value="searchByTender">

its not work!!
the radio cant be preesed.

In LTR direction it works well:

<input class="k-radio" type="radio" name="optionsRadios" [(ngModel)]="optionSearch" id="search" value="searchByTender">
<label class="k-radio-label" for="search"> </label>

Environment

Package versions:
"@progress/kendo-theme-default": "^2.45.2",

Browser:

• Chrome (desktop) version 67.0.3396.99

System:

• TypeScript version: 2.6.2
• Node version: v8.9.3
• Platform: Windows

[elena-gancheva]

Hello @BtShp,

The RTL direction support comes from Kendo themes. We have implemented classes and selectors that you will need to add in you markup if you want to change the direction. You have to add attribute dir="rtl" or class class="k-rtl" to your template, in order to have proper RTL rendering. Changing the label and input elements' places in the DOM is not the proper way to handle RTL.

As an example I have prepared a plunker

It looks like we have a CSS glitch with input type="radio" button styling in RTL mode when checked. We will investigate further and fix it.

[gyoshev]

The problem with the radio button RTL alignment has been resolved in telerik/kendo-themes#230.

The HTML of the radio buttons needs to be in the exact specified order, no matter if the application uses LTR or RTL text modes. The radio button labels are aligned correctly if the radio button is wrapped in a container with class="k-rtl" or has the dir=rtl attribute, which is by design. This appears to have no impact on accessibility or the development process; let us know if there are arguments against it and we will consider reopening the issue.