RadEditor Popup

[Keith]

In the Telerik Comment Widget, a button called "Accept All Track Changes", which accepts everything within the body, has a popup when a user clicks on it. The problem is I'm trying to make it 508 compliant so that when the popup happens, it focus's on the "OK" button so the user can tab back and forth between that and Cancel. Currently there is no way to tab onto this button since it is a popup. I tried:

    $('.Default').on('show', function () {
        $('.ok').focus();
    });

The .Default class is the the container and the "ok" class is the button. Is there a way to have the OK button be the focus on popup?

[Marin Bratanov]

Hi Keith,

The track changes dialogs are really simplistic and do not offer extended accessibility support because there is no real accessibility support for the entire Track Changse and Comments feature (there is no specification for it, and the custom tags and attributes we use will not be recognized anyway..besides, it is a visual feature at its core).

Nevertheless, you can hook to the editor CommandExecuted event and use a small timeout to wait for the dialog to show and focus the button with a line of jQuery:

<script>
    function OnClientCommandExecuted(sender, args) {
        if (args.get_commandName() == "AcceptAllTrackChanges") {
            setTimeout(function () {
                console.log($telerik.$(".rePopupContainer .rePopupButton.ok").focus());
            }, 0);
        }
    }
</script>
<telerik:RadEditor RenderMode="Lightweight" ID="theEditor" EnableTrackChanges="true" runat="server" Width="750px"
    Height="400px" OnClientCommandExecuted="OnClientCommandExecuted">
                    <Tools>
                        <telerik:EditorToolGroup>
                            <telerik:EditorTool Name="AcceptAllTrackChanges" />
                        </telerik:EditorToolGroup>
                    </Tools>
    <TrackChangesSettings Author="RadEditorUser" CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>
</telerik:RadEditor>

Of course, you can refactor this to a more elegant and safe solution. For example, you can poll for the presence of this element with the setInterval function, add a tries threshold, check for visibility and content because there are a few dialogs - a confirm and an alert type.

Regards,

Marin Bratanov
Telerik by Progress

[Keith]

Gravy! This worked man thanks.