Pending Review
Last Updated: 17 Oct 2016 15:09 by ADMIN
ADMIN
Marin Bratanov
Created on: 17 Oct 2016 15:03
Category: Window
Type: Feature Request
0
Add label for RadWindow statubar input in Lightweight RenderMode
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>
0 comments