CheckboxGroup: `validationBehavior="aria"` is ignored by its checkboxes since 1.18

Aperta Adatta ai principianti
  • Qualcosa non va?
#10,856 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@mangeshraut712 ci sta già lavorando.

Dal 27/10/2026.

  • #10860 di @mangeshraut712 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
accessibility, frontend, testing

Direzione di ricerca

Inizia da Checkbox.tsx e useCheckboxGroupItem e segui come viene risolto validationBehavior e passato dal gruppo a ciascuna casella di controllo; confronta questo flusso con la modifica in #9877 e il comportamento funzionante della versione 1.17. Riproduci la segnalazione con il modulo fornito e verifica se form.checkValidity() rimane false quando il gruppo usa validationBehavior="aria". Il lavoro è completato quando l'impostazione del gruppo raggiunge le sue caselle di controllo e il modulo viene inviato senza impostare la proprietà su ciascuna casella.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Provide a general summary of the issue here

Setting validationBehavior="aria" on a CheckboxGroup doesn't reach the checkboxes inside it. A required group with nothing checked still blocks a native form submit, as if it were native. It works in 1.17.0 and broke in 1.18.0, with #9877 (f23d22f).

🤔 Expected Behavior?

With validationBehavior="aria" on the group, the group is marked invalid through ARIA and the form still submits.

😯 Current Behavior

The checkbox input gets required, and form.checkValidity() returns false, so the browser blocks the submit. Setting validationBehavior="aria" on each Checkbox as well makes it behave.

💁 Possible Solution

This came in with #9877. useCheckboxAria in Checkbox.tsx now resolves validationBehavior to props ?? form ?? 'native' and passes it to useCheckboxGroupItem too. useCheckboxGroupItem only falls back to the group's setting when the checkbox's is undefined, and with the 'native' default it never is. Before that change, the default was only passed to useCheckbox for standalone checkboxes. Leaving the 'native' default out for checkboxes inside a group should fix it.

🔦 Context

validationBehavior="aria" is how a form library like react-hook-form keeps the browser out of validation. With a CheckboxGroup that setting is lost, so the browser blocks the submit before the library's handler runs. The workaround is to also set validationBehavior="aria" on every Checkbox in the group.

🖥️ Steps to Reproduce
import { Checkbox, CheckboxGroup } from "react-aria-components";

export function App() {
  return (
    <form onSubmit={(e) => { e.preventDefault(); alert("submitted"); }}>
      <CheckboxGroup aria-label="Contact" isRequired validationBehavior="aria">
        <Checkbox value="email">Email</Checkbox>
      </CheckboxGroup>
      <button type="submit">Submit</button>
    </form>
  );
}

Click Submit with nothing checked. Expected: "submitted". Actual: Chrome shows "Please check this box if you want to proceed." and the form doesn't submit.

Same code on 1.17.0 submits. On 1.18.0 and later it doesn't (checked 1.18.0, 1.21.1 and 1.22.1).

Version

react-aria-components 1.22.1 (broken since 1.18.0; 1.17.0 works)

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 15.6

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
2g 19h
PR unite (30g)
41

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.