Unplanned
Last Updated: 07 Feb 2022 13:49 by ADMIN
Matt
Created on: 17 Jul 2021 10:27
Category: Window
Type: Feature Request
7
Modal Window should trap the Tab keys so you cannot focus content "behind" the window
The modal shouldn't prevent tabbing into the browser controls. But the problem is, when using the modal, you can tab to controls and HTML elements behind the modal on the page. You shouldn't be able to interact with these in this way, and in fact mouse clicks are blocked.

This is an accessibility requirement - the behavior should work as expected for mouse users and keyboard users.
2 comments
ADMIN
Dimo
Posted on: 07 Feb 2022 13:49

Hello all,

While we implement this feature, consider the following workaround. It uses JavaScript to prevent focus behind the modal Window. It can rely on a specific parent container or work with all elements outside a Window.

@inject IJSRuntime js

<div id="container">
    <TelerikButton OnClick="@ShowWindow">Show Window</TelerikButton>

    <p>some focusable elements here:</p>
    <div contenteditable="true" tabindex="1">custom focusable element</div>
    <p><input /></p>
    <p><a href="#">link</a></p>
</div>

<TelerikWindow Visible="@WindowVisible"
               VisibleChanged="@WindowVisibleChanged"
               Centered="true"
               Modal="true">
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle>
        Window title
    </WindowTitle>
    <WindowContent>
        <p>Focus outside the Window is now disabled.</p>
        <p>If you want to experiment while the Window is open:</p>
        <TelerikButton OnClick="@PreventFocus">Prevent Focus</TelerikButton>
        <TelerikButton OnClick="@RestoreFocus">Restore Focus</TelerikButton>
    </WindowContent>
</TelerikWindow>

@* Move this script to a proper location in a production app *@
<script suppress-error="BL9992">function preventFocus(containerSelector) {
    processTabindex(containerSelector, "tabindex", "back_tabindex");
}
function restoreFocus(containerSelector) {
    processTabindex(containerSelector, "back_tabindex", "tabindex");
}
function processTabindex(containerSelector, attr, backAttr) {
    // workaround for a specific container
    //var container = document.querySelector(containerSelector);
    //var elements = container.querySelectorAll("input, textarea, a, button, [tabindex]");

    // OR
    // workaround for all elements outside a Window
    var elements = document.querySelectorAll(":not(.k-window) input, :not(.k-window) textarea, :not(.k-window) a, :not(.k-window) button, :not(.k-window) [tabindex]");
    
    elements.forEach(el => {

        if (attr == "back_tabindex") {
            // restoring saved tabindex, we remove tabindex -1
            el.removeAttribute("tabindex");
        }

        var tabindex = el.getAttribute(attr);

        if (tabindex != null) {
            el.setAttribute(backAttr, tabindex);
        }

        if (attr == "tabindex") {
            // preventing focus, we set tabindex -1 to everything
            el.setAttribute(attr, "-1");
        } else {
            // restoring saved tabindex, we remove the temporary attribute
            el.removeAttribute(attr);
        }
    });
}</script>

@code {
    bool WindowVisible { get; set; }

    async Task ShowWindow()
    {
        WindowVisible = true;
        await PreventFocus();
    }

    async Task WindowVisibleChanged(bool newVisible)
    {
        WindowVisible = newVisible;

        if (WindowVisible)
        {
            await PreventFocus();
        }
        else
        {
            await RestoreFocus();
        }
    }

    async Task PreventFocus()
    {
        await js.InvokeVoidAsync("preventFocus", "#container");
    }

    async Task RestoreFocus()
    {
        await js.InvokeVoidAsync("restoreFocus", "#container");
    }
}

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Alex
Posted on: 31 Jan 2022 17:54
Having the same problem here.

Items behind the window are accesible by keyboard.