The Lightweight RenderMode of the RadWindow does not have a <label> element next to the <input> inside the status bar.
When running this through automated accessibility checks, this can be reported as an issue.
It is very likely a false positive because:
- when the WAI-ARIA support of the control is enabled (EnableAriaSupport="true"), the role="presentation" attributes is present and it should instruct screen readers to skip this part of the page.
- the input has the readonly and unselectable attributes which should indicate to screen readers that the user cannot interact with it.
Nevertheless, there are several possible workarounds:
- use the Classic RenderMode of the control. It renders a <label> element, but uses many tables.
- remove the input (see Example 1 below)
- add a label (see Example 2 below)
Like this idea to vote for adding a <label> for the statusbar <input> in the Lighweight RenderMode as well. Otherwise, a <label> will not be added.
Example 1: remove the statusbar input
<telerik:RadWindow runat="server" ID="RadWindow1" VisibleStatusbar="false" RenderMode="Lightweight" EnableAriaSupport="true" VisibleOnPageLoad="true" NavigateUrl="http://www.telerik.com/" OnClientShow="removeStatusInput"></telerik:RadWindow>
<script>
function removeStatusInput(sender, args) {
$telerik.$(".rwStatusBar input", sender.get_popupElement()).remove();
}
</script>
Example 2: add a statusbar label
<telerik:RadWindow runat="server" ID="RadWindow1" VisibleStatusbar="false" RenderMode="Lightweight" EnableAriaSupport="true" VisibleOnPageLoad="true" NavigateUrl="http://www.telerik.com/" OnClientShow="addStatusLabel"></telerik:RadWindow>
<script>
function addStatusLabel(sender, args) {
var label = $telerik.$(".rwStatusBar label", sender.get_popupElement());
if (label.length == 0) {
label = document.createElement("label");
label.setAttribute("for", $telerik.$(".rwStatusBar input", sender.get_popupElement()).attr("id"));
label.style.display = "none";
label.innerHTML = "status label";
$telerik.$(".rwStatusBar", sender.get_popupElement()).append(label);
}
}
</script>