Change in html rendering of Close , Min and Max in Kendo Window()

[Udit]

Hello, 

We are using older version of Telerik Ui for Asp.net core (2020.2.617), where we are using kenod.window() component. Within this when we inspect close , min and max button they are rendered as <a> tag with role=button and href=#.

When i see the latest version in documentation they are rendered as <button> instead of <a>.

Is that a change recently made? Also , we are asked to change it to button due to accessibility implementation. We understand that we can upgrade our project to latest version , but is there any other way to do so with minimal of code change?

[Ivan Danchev]

Hello Udit,

The <a> tag was replaced with <button> in version 2023.1.314.

Since the Window does not have a template for the actions, if you want to change the tags in a version older than 2023.1.314, you will have to replace the respective elements with jQuery. Here's a dojo example that shows how this can be done in the Window's Activate event handler: https://dojo.telerik.com/uQXxLSZy/3

The handler:

function onActivate(e) {
  $("a[aria-label='window-Minimize'").replaceWith( "<button role='button' class='k-button k-button-icon k-window-action' aria-label='window-Minimize'><span class='k-icon k-i-window-minimize'></span></button>" );      
  $("a[aria-label='window-Maximize'").replaceWith( "<button role='button' class='k-button k-button-icon k-window-action' aria-label='window-Maximize'><span class='k-icon k-i-window-maximize'></span></button>" );      
  $("a[aria-label='Close'").replaceWith( "<button role='button' class='k-button k-button-icon k-window-action' aria-label='Close'><span class='k-icon k-i-close'></span></button>" );      
}

Regards,
Ivan Danchev
Progress Telerik