focus trap inside RadWindow

[David]

Is there a way to trap focus inside RadWindow?

This is ADA compliance related

[Attila Antal]

Hi David,

Yes, elements inside the RadWindow can get focused if they are focusable elements and it happens by default.

Can you please describe what seems to be the problem?

I've tried the following setup and the focus gets on the textbox inside RadWindow without any issues.

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true">
    <ContentTemplate>
        <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
    </ContentTemplate>
</telerik:RadWindow>

[David]

Hi Atilla,

   Idea of a focus trap is to stay inside the popup on repeated press of 'Tab' key. So if focus on the last focusable element inside the popup, next it supposed to move to the first one.

[Attila Antal]

Thanks for the clarification. I've shared my answer with a viable solution. I hope that will give you an idea and allow you to implement it in your project.

[Attila Antal]

Hi David,

If you must trap the focus inside the RadWindow, you can try the following approach:

• Add a CSS class name to the first focusable element
• Add another CSS class name to the last focusable element
• Attach the keydown event listener to the last focusable element
• When the TAB key is pressed while the last focusable element is focused, the keydown event is triggered. Within the event, add a condition that will check if the pressed key was TAB and no SHIFT key was used.
• If the condition matches, cancel the event and stop the propagation.
• After the event is canceled and the propagation is stopped, focus on the first focusable element.

 

Example

<telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
<br />
<br />
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true" Modal="true">
    <ContentTemplate>
        <telerik:RadLabel ID="RadLabel1" runat="server" Text="First Name:" AssociatedControlID="RadTextBox2"></telerik:RadLabel>
        <telerik:RadTextBox ID="RadTextBox2" runat="server" CssClass="first-element"></telerik:RadTextBox>
        <telerik:RadLabel ID="RadLabel2" runat="server" Text="Last Name:" AssociatedControlID="RadTextBox3"></telerik:RadLabel>
        <telerik:RadTextBox ID="RadTextBox3" runat="server"></telerik:RadTextBox>
        <br />
        <br />
        <telerik:RadButton runat="server" ID="RadButton1" Text="Submit" AutoPostBack="true" />
        <telerik:RadButton runat="server" ID="RadButton2" Text="Cancel" AutoPostBack="true" CssClass="last-element" />
    </ContentTemplate>
</telerik:RadWindow>
<br />
<br />
<telerik:RadTextBox ID="RadTextBox4" runat="server"></telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox5" runat="server"></telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox6" runat="server"></telerik:RadTextBox>

<script>
    // when the key is pressed while the last focusable element is focused
    $(document).on('keydown', '.RadWindow .last-element', function (e) {
        // only run the logic if the SHIFT key is not pressed
        if (!e.shiftKey && e.keyCode === 9) {
            e.preventDefault(); // cancel the event (stop the tab moving away)
            e.stopPropagation(); // stop the propagation of the event to parent elements

            // find the first focusable element by class name and focus it
            $(e.target).closest('.RadWindow').find('.first-element').focus();
        }
    })
</script>

 

UPDATE

Do the same in the opposite direction. If tabbing backward by using the combination of SHIFT and TAB keys. When the focus is on the first focusable element, tabbing backward will put the focus on the last focusable element. This way focus is trapped in both directions.

Here is the code for the backward tabbing.

// when the key is pressed while the first focusable element is focused
$(document).on('keydown', '.RadWindow .first-element', function (e) {
    // only run the logic if both the SHIFT and TAB keys are pressed
    if (e.shiftKey && e.keyCode === 9) {
        e.preventDefault(); // stop the tab moving away
        e.stopPropagation(); // stop the propagation of the event to parent elements

        // find the last focusable element by class name and focus it
        $(e.target).closest('.RadWindow').find('.last-element').focus();
    }
})

 

Note that this is an idea showing how the focus can be trapped within the Window element. As this is not supported natively, any further adjustments will depend on the developer working with it.

[David]

Wow, very nice!

Much appreciated

[Attila Antal]

I am glad the solution was helpful. When I read your reply, I remembered that my solution only traps the TAB in one direction (forward). The focus will move out of the window if tabbing backward. I've updated my answer with the additional code. 

Happy Holidays!

[David]

This is great!

Your answer also helped me to resolve similar issue with fancybox. Here is example for somebosy struggling with the same problem:

 <script>
        window.onload = function () {
            var toolBar = $find("<%= RadToolBar1.ClientID %>");
            var firstButton = toolBar.findItemByText('Time Value');

            firstButton.focus();

            document.getElementById('lbtnCancel')
                .addEventListener('keydown', function (e) {
                    if (!e.shiftKey && e.keyCode === 9) {

                        e.preventDefault(); // cancel the event (stop the tab moving away)
                        e.stopPropagation(); // stop the propagation of the event to parent elements

                        firstButton.focus();
                    }
                });
        };
    </script>

Thanks again and Happy Holidays!