Completed
Last Updated: 27 Feb 2023 17:46 by ADMIN
Release 4.1.0 (15/03/2023)
Matt
Created on: 17 Jul 2021 10:27
Category: Window
Type: Feature Request
11
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.
4 comments
ADMIN
Dimo
Posted on: 01 Feb 2023 11:23

Hi Alexander and everyone,

Yes, we aim to include this behavior in the next release 4.1. in early March.

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 4.0 in January 2023!
Alexander
Posted on: 01 Feb 2023 09:10
Any progress on this? We also noticed this a few days ago. Do you have an estimate on when you'll be able to properly implement modal windows?
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.