Kendo-angular: "Drag" text in Slider handles

Created on 31 May 2019  路  8Comments  路  Source: telerik/kendo-angular

Describe the bug
I'm using kendo-angular-inputs 5.1.0 and I wanted to customize the layout of the handles.
I noticed that Slider's handles have _Drag_ word hardcoded in the template.
In order to hide it there is a text-indent and an overflow-hidden.
What is that for? It penalizes SEO (indented-out-of-the-window text isn't welcome for Google) and accessibility (screen readers would read that word).
Moreover, since that word is hardcoded in English, one wouldn't get it if not speaking English.

To Reproduce
Just instantiate a slider. The word is hidden into the .k-draghandle
For instance, https://www.telerik.com/kendo-angular-ui/components/inputs/slider/ticks/

Expected behavior
No content in the handle. Possibly, title or accessibility attributes.

Browser

  • OS: any
  • Browser: any
  • Version: any
Enhancement Team2 inputs

Most helpful comment

The fix is available in latest dev version of the package.

All 8 comments

The fix is available in latest dev version of the package.

Thank you :)
Did you also remove the corresponding text-indent & C in the CSS (I'm using a custom style)?

Hi @massic80, could you send a runnable example with the custom styles applied, that reproduce the problem with the text-indent property.

Hi @elena-gancheva, I wasn't reporting a bug, sorry for the misunderstanding.
I just asked about a minor enhancement which could be made; in the previously reported example there is a

.k-draghandle {
    text-align: center;
    text-decoration: none;
    text-indent: -3333px;
(...etcetera)
}

which I think is just useless with the current dev version of the slider, since it doesn't include any text. In particular, I suppose that the text-indent is just for hiding the text.
I can't check your new CSS in my project, since I'm using a custom style.
Maybe that .k-draghandle is also used for other Kendo widgets, but always keep in mind text-indent and SEO :)

Hi @massic80, indeed the text-indent and overflow: hidden styles on the .k-draghandle element are for hiding the "Drag" text and are used in other Kendo widgets.

Since, this issue is fixed and shipped in v6.0.0 of the kendo-angular-inputs package, I am closing this and opening a new issue for the styles in our kendo-themes repository. You can subscribe for updates here: https://github.com/telerik/kendo-themes/issues/796

The fix is available in latest dev version of the package.

Which version is this fixed in? I am pulling in:
"@progress/kendo-angular-inputs": "~4.2.1",
And I see the issue with 'drag' text inside the slider handle. Which version do I need to update to?

Hi @tommut , as @elena-gancheva pointed out it's been fixed on 6.0

@massic80 thank you! I had miread that and thought it was talking about a separate fixed issue.

Was this page helpful?
0 / 5 - 0 ratings