`<wa-rating>` をフォームコントロール化し、ネイティブフォーム送信に対応
<wa-rating> が Form Associated Custom Element（FACE） に対応し、<form> タグと組み合わせてネイティブなフォーム送信・バリデーションが利用できるようになりました。合わせて、ARIA属性の付与先がシャドウDOM内部の要素からホスト要素に移動し、アクセシビリティも改善されています。
背景
discussion #2192 で議論されていたように、<wa-rating> はこれまで WebAwesomeElement を継承する一般的なカスタム要素であり、<form> に配置しても値が送信されませんでした。他のフォームコントロール（<wa-input> など）が既に WebAwesomeFormAssociatedElement を継承してフォーム統合を実現していたのに対し、<wa-rating> だけがその恩恵を受けられていない状況でした。
また、issue #2205 では、role="slider" や aria-* 属性がシャドウDOM内の .rating 要素に付与されていたことが問題として指摘されていました。Shadow DOMの境界を越えてホスト要素のARIAを外部から認識しにくい構造になっており、仕様に沿ったアクセシビリティ実装への改善が求められていました。
技術的な変更
rating.ts の継承元が WebAwesomeElement から WebAwesomeFormAssociatedElement に変更され、フォーム統合に必要な基盤が提供されるようになりました。これにより、<wa-rating> はForm Associated Custom Elements APIを通じてブラウザのフォームに値を登録し、送信・バリデーションに参加できます。
変更前:
import WebAwesomeElement from '../../internal/webawesome-element.js';
@customElement('wa-rating')
export default class WaRating extends WebAwesomeElement {
変更後:
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import { RequiredValidator } from '../../internal/validators/required-validator.js';
@customElement('wa-rating')
export default class WaRating extends WebAwesomeFormAssociatedElement {
static get validators() {
return [...super.validators, RequiredValidator()];
}
assumeInteractionOn = ['change'];
RequiredValidator を validators に追加することで required 属性が機能するようになり、未選択の状態でフォームを送信しようとするとブラウザのバリデーションエラーが発生します。assumeInteractionOn = ['change'] は、ユーザーが値を変更したタイミングをインタラクション済みとみなす設定で、バリデーションのトリガーを適切に制御します。
ARIA属性の付与先もシャドウDOM内の .rating 要素からホスト要素に移動しました。connectedCallback() 内で this.setAttribute('role', 'slider') のように直接ホスト要素に設定するよう変更されています。スタイル側でも、フォーカスリングのCSSセレクタが .rating:focus-visible から :host(:focus-visible) に変更され、ホスト要素へのフォーカス移動と一貫性が保たれています。
/* 変更前 */
.rating:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* 変更後 */
:host(:focus-visible) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
テストコードも同様に更新され、ARIAアサーションの対象が el.shadowRoot.querySelector('[part~="base"]') からホスト要素 el 直接に変更されています。
設計判断
WebAwesomeFormAssociatedElement を継承する既存の設計パターンに準拠する方式 が採用されました。フォーム統合ロジックを wa-rating 内に直接実装するのではなく、他のフォームコントロールと同じ基底クラスを継承することで、バリデーション・フォーム送信・wa-invalid イベントなどの共通機能が一括して得られます。
ARIA属性のホスト要素への移動も、この変更に自然に伴うものです。Form Associated Custom Elementsとしてブラウザに認識される要素はホスト要素そのものであり、role や aria-* もホストに付与するのが仕様に沿った実装です。シャドウDOM内部の要素に付与していた従来の実装は、フォーム統合とアクセシビリティの両面で構造上の問題を抱えていたといえます。
まとめ
本PRは、継承元クラスの変更という最小限の改修で <wa-rating> をフォームエコシステムに完全統合した変更です。バリデーション・ARIA・フォーカス管理がすべてホスト要素ベースに整理されたことで、コンポーネントの内部構造と外部仕様の一貫性が高まりました。