Skip to content

SvelteKit should not set tabIndex=-1 #3501

@rgossiaux

Description

@rgossiaux

Describe the bug

SvelteKit adds tabIndex=-1 to the document body in order to be able to manage focus upon navigation: #307

This is not a "safe" change, in that it may impact the behavior of components on the page. In particular, this change means that some actions that would normally not trigger a focus event (like mousedown on some text) will now fire a focus event on the document body. These extra focus events may confuse code that does its own focus management (for example, a focus trap). They were the source of two different user-reported bugs in my component library: rgossiaux/svelte-headlessui#36 and rgossiaux/svelte-headlessui#39

Looking at the motivation for introducing this originally, I don't see why it can't be replaced with something better. Can SvelteKit clean up after itself after navigation by removing the tabIndex? Alternatively, can it do something that doesn't require setting this at all? For example, Headless UI has a function to focus on the first focusable element within a container: https://github.com/tailwindlabs/headlessui/blob/cae976a18b7955670cd28fb1067a49917bda2c09/packages/%40headlessui-react/src/utils/focus-management.ts#L105 This works by using a CSS selector to identify potentially-focusable elements, then attempting to focus them one by one until a success.

Reproduction

Not sure this needs a special test repro since this happens on every SvelteKit app, but I can create one if you disagree.

The bugs that this caused can be reproduced at this commit: https://github.com/rgossiaux/svelte-headlessui/tree/ac1f86ac156a94c86e81647c55d8bb56c035edc6

Logs

No response

System Info

System: OS: macOS 12.1 CPU: (10) arm64 Apple M1 Max Memory: 4.11 GB / 64.00 GB Shell: 3.3.1 - /opt/homebrew/bin/fish Binaries: Node: 16.8.0 - /var/folders/rn/2kdgb0jj25q2v656j3qc_ywr0000gn/T/fnm_multishells/23841_1640400023703/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 7.21.0 - /var/folders/rn/2kdgb0jj25q2v656j3qc_ywr0000gn/T/fnm_multishells/23841_1640400023703/bin/npm Browsers: Chrome: 97.0.4692.99 Safari: 15.2

Severity

serious, but I can work around it

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions