This is a migrated thread and some comments may be shown as answers.

RadEditor Popup

2 Answers 104 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 29 Sep 2016, 08:28 PM

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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 30 Sep 2016, 10:39 AM

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Keith
Top achievements
Rank 1
answered on 30 Sep 2016, 12:47 PM
Gravy! This worked man thanks.
Tags
Editor
Asked by
Keith
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Keith
Top achievements
Rank 1
Share this question
or