Calendar Month & Year select Aria-hidden bug

[Jels02]

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):

• open console tab
• reload page
• switch to elements tab (before interacting with calendar)
• open the month or year selecter

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]

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.

[huntabyte]

Fortunately, Chrome is intelligent enough to block the aria-hidden in this case.

Notes to myself for later:

This is due to Calendar.Heading being used to render a visual heading, and we handle the actually accessible heading via an aria-live announcer.

Adding buttons and such in the heading causes issues since the parent of focusable content is marked as aria-hidden, which is a nono.

I think we can more effectively mark specific parts of the heading as hidden, given they are not interactive, rather than the entire container.

[huntabyte]

This is actually an issue on my end with the element ordering in shadcn-svelte. We shouldn't be using the Calendar.Heading there, and instead the selects should go into the Calendar.Header, wrapped in a div for styling purposes if required.