ラジオグループとカラーピッカーで視覚的に隠されたラベルが機能しない問題を修正

wa-visually-hidden-label ユーティリティクラスが <wa-radio-group> や <wa-color-picker> で機能しない問題が修正されました。これにより、アクセシビリティを保ちながらラベルを視覚的に隠す実装が、すべてのフォームコンポーネントで一貫して動作するようになります。

背景

Web Awesomeは wa-visually-hidden-label クラスを提供しており、スクリーンリーダーには認識されるがビジュアル上は表示されないラベルを実現できます。しかし #1933 で報告されたように、このクラスが一部のコンポーネントで機能していませんでした。

問題の原因は、コンポーネントごとに異なるShadow DOMパーツ名が使われていることでした。<wa-input> などの単純なフォームコンポーネントは label パーツを使用しますが、<wa-radio-group> や <wa-color-picker> のような複合コンポーネントは form-control-label パーツを使用していました。既存の実装は label パーツのみを対象としていたため、これらのコンポーネントでラベルを隠すことができませんでした。

技術的な変更

form-control-label パーツに対する視覚的非表示スタイルが追加されました。

変更前:

.wa-visually-hidden:not(:focus-within),
.wa-visually-hidden-force,
.wa-visually-hidden-hint::part(hint),
.wa-visually-hidden-label::part(label) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  /* ... */
}

変更後:

.wa-visually-hidden:not(:focus-within),
.wa-visually-hidden-force,
.wa-visually-hidden-hint::part(hint),
.wa-visually-hidden-label::part(label),
.wa-visually-hidden-label::part(form-control-label) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  /* ... */
}

同じ変更が visually-hidden.styles.ts にも適用され、TypeScriptベースのスタイル定義との一貫性が保たれています。これにより、以下のようなマークアップで、ラジオグループのラベルが視覚的に隠されながらスクリーンリーダーには認識される状態が実現します。

<wa-radio-group class="wa-visually-hidden-label" label="選択肢">
  <wa-radio value="option1">オプション1</wa-radio>
  <wa-radio value="option2">オプション2</wa-radio>
</wa-radio-group>

設計判断

既存のユーティリティクラスに新しいパーツセレクタを追加する方式 が採用されました。

新しいユーティリティクラスを作成する代わりに、wa-visually-hidden-label の対象範囲を拡張することで、開発者が複数のクラスを使い分ける必要性を排除しています。この判断により、すべてのフォームコンポーネントで同じクラス名を使用できる一貫性が保たれました。

CSSセレクタの追加のみで実装できるため、JavaScriptの変更やコンポーネント内部のリファクタリングは不要でした。Shadow DOMパーツを通じてスタイルを適用する設計が、このような拡張を容易にしています。

本修正は、Web Awesomeのアクセシビリティユーティリティが、コンポーネントの内部実装の違いを意識せず統一的に機能することを保証しています。label と form-control-label という2つのパーツ名を同時にサポートすることで、既存コードとの互換性を維持しながら、すべてのフォームコンポーネントで視覚的に隠されたラベルが正しく動作するようになりました。