huntabyte / bits-ui

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

Calendar Month & Year select Aria-hidden bug #902

Open Jels02 opened 1 week ago

Jels02 commented 1 week ago

Describe the bug

When opening a focusable component within the Calendar component header, an error will display in the browser console, about the ancestor (The calendar header) containing the "aria-hidden=true" prop but the child being focusable.

Reproduction

Can be reproduced on the shadcn-svelte docs site: https://shadcn-svelte.com/docs/components/calendar#month--year-selects It's not super consistent, on both the docsl site and on my project that I encountered the bug in, but I can reproduce it consisently in my browser (tested on Arc, Chrome and Edge):

If you have issuse with reproducing let me know and I will attach a video.

Logs

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 34.83 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.4.1 - /opt/homebrew/bin/node
    npm: 10.8.1 - /opt/homebrew/bin/npm
    pnpm: 9.5.0 - /opt/homebrew/bin/pnpm
    bun: 1.1.21 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 130.0.6723.116
    Edge: 130.0.2849.68
    Safari: 17.6
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.7.4
    bits-ui: 1.0.0-next.46 => 1.0.0-next.46
    formsnap: 2.0.0-next.1 => 2.0.0-next.1
    lucide-svelte: ^0.454.0 => 0.454.0
    mode-watcher: ^0.4.1 => 0.4.1
    svelte: ^5.0.0 => 5.1.9
    sveltekit-superforms: ^2.20.0 => 2.20.0

Severity

annoyance

huntabyte commented 5 days ago

It's not consistent because it's more of a timing thing that chrome is freaking out about. We remove the aria-hidden attribute basically at the same time as we focus on the element. I'll look into seeing how we can ensure they are never taking place at the same time.

This is an issue for Bits UI, so I'm going to move it there.