RadEditor Popup

3 posts, 1 answers
  1. Keith
    Keith avatar
    5 posts
    Member since:
    Sep 2016

    Posted 29 Sep Link to this post

    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. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 30 Sep Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Keith
    Keith avatar
    5 posts
    Member since:
    Sep 2016

    Posted 30 Sep in reply to Marin Bratanov Link to this post

    Gravy! This worked man thanks.
Back to Top