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

オープン 初心者向け
  • 何か問題がありますか？
#10,856 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@mangeshraut712 がすでに取り組んでいます。

2026年10月27日 から。

  • #10860 @mangeshraut712 による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
accessibility, frontend, testing

調査の方向性

Checkbox.tsx と useCheckboxGroupItem から始め、validationBehavior がどのように解決され、グループから各チェックボックスに渡されるかを追ってください。その処理の流れを #9877 の変更および正常に動作する 1.17 の挙動と比較してください。提供されたフォームで報告内容を再現し、グループが validationBehavior="aria" を使用するときに form.checkValidity() が false のままか確認してください。グループの設定が各チェックボックスに伝わり、各チェックボックスに個別にプロパティを設定しなくてもフォームが送信されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
16k
フォーク
1.6k
平均マージ
2日 19時間
マージ済み PR（30日）
41

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

adobe/react-spectrum のほかの issue

adobe/react-spectrum の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。