カラーピッカーのスウォッチにラベルサポートを追加

<wa-color-picker> の swatches プロパティが { color, label } オブジェクトの配列を受け付けるようになり、スクリーンリーダーがカラースウォッチをより意味のある名前で読み上げられるようになりました。

背景

#2067 で指摘されていた通り、従来のカラースウォッチはスクリーンリーダーに対してカラーコードの生の値（#d0021b など）をそのまま読み上げていました。カラーコードは視覚的に識別できるユーザーには問題ありませんが、スクリーンリーダー利用者にとっては色の名前や意味を伝えられないアクセシビリティ上の課題がありました。

この変更はそのギャップを埋めるもので、開発者がスウォッチごとに人間が読みやすいラベルを任意で付与できるようにします。

技術的な変更

WaColorPickerSwatch インターフェースが新たに定義され、swatches プロパティの型シグネチャが拡張されました。内部では全フォーマットを統一して処理するための正規化ロジックが追加されています。

新規インターフェース定義（color-picker.ts）:

export interface WaColorPickerSwatch {
  color: string;
  label: string;
}

swatches プロパティの型拡張:

// 変更前
@property() swatches: string | string[] = '';

// 変更後
@property() swatches: string | string[] | WaColorPickerSwatch[] = '';

レンダリング時には、受け取った全フォーマットを WaColorPickerSwatch[] に正規化する処理が追加されています。文字列配列の場合は { color: s, label: s } に、セミコロン区切りの文字列の場合も同様に変換されます。{ color, label } オブジェクトの場合はそのまま利用されます。

// 変更前
const swatches = Array.isArray(this.swatches)
  ? this.swatches // allow arrays for legacy purposes
  : this.swatches.split(';').filter(color => color.trim() !== '');

// 変更後
const normalizedSwatches: WaColorPickerSwatch[] = Array.isArray(this.swatches)
  ? this.swatches.map(s => (typeof s === 'string' ? { color: s, label: s } : s))
  : this.swatches
      .split(';')
      .filter(color => color.trim() !== '')
      .map(color => ({ color: color.trim(), label: color.trim() }));

ラベル付きスウォッチを使用する際のAPIは以下のとおりです：

<wa-color-picker id="labeled-swatches" label="Select a color"></wa-color-picker>

<script>
  const colorPicker = document.getElementById('labeled-swatches');
  colorPicker.swatches = [
    { color: '#d0021b', label: 'Red' },
    { color: '#f5a623', label: 'Orange' },
    { color: '#7ed321', label: 'Green' },
    { color: '#4a90e2', label: 'Blue' }
  ];
</script>

既存の文字列・文字列配列フォーマットは引き続きそのまま動作するため、後方互換性は完全に維持されています。

設計判断

ラベルはオプション扱いとされており、既存のフォーマットを使い続ける場合はカラーコードがそのままフォールバックラベルとして使用されます。これは、ラベルなし（従来通り）とラベルあり（アクセシブル）の両方のユースケースを単一の正規化パスで処理できる設計です。

全フォーマットを内部で WaColorPickerSwatch[] に統一する正規化アプローチにより、レンダリングロジックの分岐を最小化しています。変数名も swatches から normalizedSwatches に変更されており、「この時点以降は常に統一フォーマット」という意図がコード上で明示されています。

WaColorPickerSwatch インターフェースは export されているため、TypeScriptを利用する開発者は型安全にスウォッチ配列を構築できます。

まとめ

本PRは、既存のAPIを壊すことなく WaColorPickerSwatch インターフェースの導入と入力正規化ロジックの追加だけでアクセシビリティを向上させた変更です。カラーピッカーを使用するプロダクトがスクリーンリーダー対応を必要とする場合、ラベルを付与するだけで対応できるようになります。