huntabyte / bits-ui

The headless components for Svelte.
https://bits-ui.com
MIT License
1.34k stars 95 forks source link

Selected `Tab.Trigger` should have `tabindex` of `0` #946

Closed jakobpesch closed 6 days ago

jakobpesch commented 6 days ago

Describe the bug

Tabs behave differently when in a popover, where it ignores the initial value on <Tabs.Root value="tab-1">.

Reproduction

https://stackblitz.com/edit/github-bk6jdm-hvrwtm?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.8.0 
    bits-ui: 1.0.0-next.59 => 1.0.0-next.59 
    svelte: ^5.0.0 => 5.1.16

Severity

annoyance

huntabyte commented 6 days ago

I see what is happening here. When trapFocus is enabled on the Popover.Content, it will focus the first focusable element on open. Perhaps to alleviate this, we can prioritize items with tabindex={0} over tabindex={-1}.

I'll look into this.

huntabyte commented 6 days ago

This is actually an issue outside the popover, it's just more pronounced in the popover since it focuses automatically. The active tab should have tabindex={0} and all inactive ones should have tabindex={-1}; in your reproduction, the first tab always has tabindex={0}, which is incorrect.

I'll get this one fixed asap!