data-aether-focus-trap

This attribute traps the keyboard focus inside the opened window. When the Tab key is pressed while the modal is open, it prevents the focus from escaping to the background page.

01 Usage

Its use is mandatory, especially for Modal windows. It is added to the target element (Target).

index.html

<!-- Trigger -->
<button
    class="px-4 py-2 cursor-pointer bg-primary border border-primary rounded-lg text-primary hover:text-primary-interactive hover:border-primary-interactive transition-colors flex items-center gap-2"
    data-aether-trigger="ui-control"
    data-aether-target="demo-modal"
    data-aether-sync-url>
    Open
</button>

<!-- Wrapper -->
<div
    id="demo-modal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
    data-aether-scroll-lock
    data-aether-focus-trap>

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-primary/80 backdrop-blur-sm"
        data-aether-trigger="ui-control"
        data-aether-target="demo-modal"
        data-aether-action="close"></div>

    <!-- Content -->
    <div class="relative bg-secondary border border-primary w-full max-w-md p-6 rounded-2xl shadow-2xl scale-100 transition-all">
        <h3 class="text-xl text-center font-bold text-primary mb-2">Hello World</h3>
        <p class="text-secondary text-center mb-6">This modal keeps focus within</p>

        <div class="space-y-4">
            <div>
                <input type="email"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="example@aether.com">
            </div>

            <div>
                <input type="password"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="password">
            </div>

            <div class="flex items-center justify-between text-sm">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" class="rounded border-primary bg-primary text-accent focus:ring-accent">
                    <span class="text-tertiary">Remember me</span>
                </label>
                <a href="#" class="text-accent hover:underline">Forgot Password</a>
            </div>

            <button class="w-full cursor-pointer py-2.5 bg-tertiary hover:bg-tertiary-interactive text-secondary hover:text-secondary-interactive rounded-lg font-bold transition-colors mt-2"
                data-aether-trigger="ui-control"
                data-aether-target="demo-modal"
                data-aether-action="close">
                Login
            </button>
        </div>
    </div>

</div>

02 Why Is It Important? (A11y)

WCAG Compliance

For users who use screen readers or navigate only by keyboard, being able to focus outside an opened window is confusing.

If the user continues to navigate in the background, they may not notice that the modal is still open. data-aether-focus-trap solves this problem and provides an accessible experience.