-
- Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
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.2Severity
serious, but I can work around it
Additional Information
No response