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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#10,856 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@mangeshraut712 ya está trabajando en esto.

Desde el 27/10/2026.

  • #10860 de @mangeshraut712 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend, testing

Línea de trabajo

Empieza con Checkbox.tsx y useCheckboxGroupItem y sigue cómo se resuelve validationBehavior y se pasa del grupo a cada casilla; compara ese flujo con el cambio de #9877 y el comportamiento funcional de 1.17. Reproduce el informe con el formulario proporcionado y comprueba si form.checkValidity() sigue siendo false cuando el grupo usa validationBehavior="aria". El trabajo está terminado cuando la configuración del grupo llega a sus casillas y el formulario se envía sin establecer la propiedad en cada casilla.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 19 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.