チェックボックスの不確定状態で `aria-checked` を `mixed` に修正

<wa-checkbox> の不確定（indeterminate）状態において、aria-checked 属性が仕様に反して false のまま設定されていたアクセシビリティバグが修正されました。1行の条件式の追加により、WAI-ARIA仕様に準拠した mixed 値が正しく出力されるようになります。

背景

アクセシビリティ検査において、不確定状態のチェックボックスに対して「ARIA attributes must be used as specified for the element's role」というエラーが報告されていました。WAI-ARIA仕様では、チェックボックスロールの aria-checked に許容される値は true・false・mixed の3種類であり、不確定状態には mixed を使用することが定められています。

問題の発生箇所は checkbox.ts のテンプレート内で、aria-checked の値が this.checked のbooleanのみに基づいて算出されていた点です。indeterminate プロパティが true であっても this.checked が false であれば aria-checked="false" が出力され、要素の実際の状態とARIA属性が乖離していました。#2305 でこの問題が報告されています。

この状態は、スクリーンリーダーや支援技術が不確定状態を正しく認識できないことを意味しており、アクセシビリティ上の実害を伴うバグでした。

技術的な変更

checkbox.ts のテンプレート内、aria-checked バインディングの算出ロジックに indeterminate の判定が追加されました。

変更前:

aria-checked=${this.checked ? 'true' : 'false'}

変更後:

aria-checked=${this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false'}

三項演算子を入れ子にすることで、indeterminate が true の場合を最優先で評価し mixed を返し、それ以外は従来通り this.checked の値に応じて true または false を返します。indeterminate が false のケースでは従来と同一の出力となるため、既存の動作への影響はありません。

設計判断

indeterminate を checked より先に評価する順序が採用されました。チェックボックスが不確定状態にある場合、checked の値に関わらず状態は mixed であるべきという意味論的な優先度を、コードの評価順序そのもので表現しています。

また、aria-checked 属性を削除するのではなく mixed を明示的に設定する方針が取られています。明示的に値を設定することで支援技術が不確定状態を確実に認識できるよう配慮された判断です。

まとめ

1行の変更で indeterminate 状態のARIA属性がWAI-ARIA仕様に準拠し、スクリーンリーダーなどの支援技術がチェックボックスの不確定状態を正しく伝達できるようになりました。状態の優先度をコードの評価順序で明示するシンプルな修正が、アクセシビリティ準拠と後方互換性の両立を実現しています。