Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selected Tab.Trigger should have tabindex of 0 #946

Closed
jakobpesch opened this issue Nov 19, 2024 · 2 comments
Closed

Selected Tab.Trigger should have tabindex of 0 #946

jakobpesch opened this issue Nov 19, 2024 · 2 comments
Assignees
Labels
bug Something isn't working next

Comments

@jakobpesch
Copy link

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
Copy link
Owner

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 huntabyte self-assigned this Nov 19, 2024
@huntabyte huntabyte added enhancement An improvement to an existing feature/component bug Something isn't working and removed enhancement An improvement to an existing feature/component labels Nov 19, 2024
@huntabyte
Copy link
Owner

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!

@huntabyte huntabyte changed the title Initial tabs values ignored when tabs nested in popover Selected Tab.Trigger should have tabindex of 0 Nov 19, 2024
@huntabyte huntabyte added the next label Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working next
Projects
None yet
Development

No branches or pull requests

2 participants