The predefined RadWindowManager dialog templates do not fully expose the required accessibility attributes.
Two issues are present in the default predefined dialog markup:
Hi Jay,
Thank you for reporting this and for providing the detailed markup and accessibility findings.
We were able to confirm the accessibility problems in the predefined RadWindowManager dialogs. The problem affects the accessibility attributes in the default dialog templates:
RadAlert message container does not expose the required live-region semanticsRadPrompt input does not expose a sufficient accessible label in the default template markupAs a temporary workaround, you can override the predefined RadWindowManager dialog templates and add the missing attributes manually. Since the markup you shared uses the Classic dialog structure, please use the Classic RenderMode template section from the following help article as a base:
How to Change the Dialog Templates
Please apply the following adjustments in your custom templates:
role="alert" to the alert message containeraria-label="Enter Value" to the prompt inputYou can use the following sample as a starting point:
<telerik:RadWindowManager ID="RadWindowManager2" runat="server" RenderMode="Classic">
<AlertTemplate>
<div class="rwDialogPopup radalert">
<div class="rwDialogText" role="alert">
{1}
</div>
<div>
<a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);">
<span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span>
</a>
</div>
</div>
</AlertTemplate>
<PromptTemplate>
<div class="rwDialogPopup radprompt">
<div class="rwDialogText">
{1}
</div>
<div>
<script type="text/javascript">
function RadWindowprompt_detectenter(id, ev, input) {
if (!ev) ev = window.event;
if (ev.keyCode == 13) {
var but = input.parentNode.parentNode.getElementsByTagName("A")[0];
if (but) {
if (but.click) but.click();
else if (but.onclick) {
but.focus(); var click = but.onclick; but.onclick = null; if (click) click.call(but);
}
}
return false;
}
else return true;
}
</script>
<input title="Enter Value"
aria-label="Enter Value"
onkeydown="return RadWindowprompt_detectenter('{0}', event, this);"
type="text"
class="rwDialogInput"
value="{2}" />
</div>
<div>
<a onclick="$find('{0}').close(this.parentNode.parentNode.getElementsByTagName('input')[0].value);"
class="rwPopupButton" href="javascript:void(0);">
<span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span>
</a>
<a onclick="$find('{0}').close(null);" class="rwPopupButton" href="javascript:void(0);">
<span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Cancel]##</span></span>
</a>
</div>
</div>
</PromptTemplate>
<ConfirmTemplate>
<div class="rwDialogPopup radconfirm">
<div class="rwDialogText">
{1}
</div>
<div>
<a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);">
<span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span>
</a>
<a onclick="$find('{0}').close(false);" class="rwPopupButton" href="javascript:void(0);">
<span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Cancel]##</span></span>
</a>
</div>
</div>
</ConfirmTemplate>
</telerik:RadWindowManager>Regards,
Rumen
Progress Telerik