Skip to content

Unselected required radio group produces accessibility warning on form submission #1727

@teemingc

Description

@teemingc

Describe the bug

Submitting a HTML form with a required radio group produces an accessibility warning in the browser because it tries to focus the hidden input.

Reproduction

I'll get down to this after fixing the repro template

Logs

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <input>
Ancestor with aria-hidden: <input>

System Info

System:
    OS: macOS 26.0
    CPU: (8) arm64 Apple M1 Pro
    Memory: 129.66 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - ~/Library/pnpm/node
    Yarn: 3.2.3 - ~/Library/pnpm/yarn
    npm: 10.9.3 - ~/Library/pnpm/npm
    pnpm: 10.15.0 - ~/Library/pnpm/pnpm
    bun: 1.2.15 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 139.0.7258.155
    Chrome Canary: 135.0.7048.0
    Safari: 26.0
    Safari Technology Preview: 26.0
  npmPackages:
    @sveltejs/kit: ^2.31.1 => 2.31.1 
    bits-ui: ^2.9.4 => 2.9.4 
    svelte: ^5.38.1 => 5.38.1

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageA maintainer needs to review this issue and label it appropriately

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions