Tagコンポーネントの削除ボタンアイコン色を修正

Web Awesomeの<wa-tag>コンポーネントで、appearance="accent"使用時に削除ボタンのアイコン色がテキスト色と一致せず視認性が低下していた問題が修正されました。アイコンがcurrentColorを継承することで、どのvariantとの組み合わせでも適切なコントラストが確保されるようになります。

背景

#1814で報告された問題では、appearance="accent"とvariant="brand"を組み合わせた場合に削除ボタンのアイコンが極めて見づらくなっていました。この問題は、アイコンの色指定方法に起因していました。削除ボタン自体にはcolor: inheritが設定されていましたが、その内部のbaseパートには色が明示的に指定されていなかったため、期待通りの色継承が行われていませんでした。

appearance="accent"は背景色とテキスト色のコントラストを最適化する設定ですが、削除ボタンのアイコンがこの色体系に追従できていなかったことで、アクセシビリティ上の問題が生じていました。

技術的な変更

packages/webawesome/src/components/tag/tag.styles.tsで、削除ボタンのスタイル定義が3箇所変更されました。

変更前:

[part='remove-button'] {
  color: inherit;
  line-height: 1;
}

[part='remove-button']::part(base) {
  padding: 0;
  height: 1em;
  width: 1em;
}

@media (hover: hover) {
  :host(:hover) > [part='remove-button']::part(base) {
    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
  }
}

:host(:active) > [part='remove-button']::part(base) {
  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}

変更後:

[part='remove-button'] {
  line-height: 1;
}

[part='remove-button']::part(base) {
  padding: 0;
  height: 1em;
  width: 1em;
  color: currentColor;
}

@media (hover: hover) {
  :host(:hover) > [part='remove-button']::part(base) {
    background-color: transparent;
    color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
  }
}

:host(:active) > [part='remove-button']::part(base) {
  background-color: transparent;
  color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}

主な変更点は以下の3つです:

• [part='remove-button']からcolor: inheritを削除
• [part='remove-button']::part(base)にcolor: currentColorを追加
• hover状態とactive状態にbackground-color: transparentを追加

color: currentColorをbaseパートに直接設定することで、親要素（tag本体）のテキスト色が確実に継承されます。また、hover/active状態にbackground-color: transparentを明示することで、意図しない背景色の表示を防いでいます。

設計判断

color: inheritからcolor: currentColorへの変更が採用されました。

inheritはプロパティを直接の親要素から継承しますが、currentColorはCSSの色計算時点でのcolorプロパティの値を参照します。Shadow DOMを使用したコンポーネント構造では、::part(base)のような深い階層でのスタイル適用において、currentColorの方が確実に意図した色を参照できます。

また、hover/active状態にbackground-color: transparentを追加した判断は、ボタンコンポーネントのデフォルトスタイルが背景色を持つ可能性を考慮したものです。削除ボタンはアイコンのみで構成されるべきであり、背景色を持たないことを明示的に宣言しています。

この修正により、appearance="accent"とすべてのvariantの組み合わせで一貫した視覚的なコントラストが保証されるようになりました。

まとめ

本PRは、Shadow DOMコンポーネントにおける色継承の仕組みを正確に理解し、currentColorによる確実な色参照を実現した修正です。color: inheritからcolor: currentColorへの変更と、背景色の明示的な透明化により、アクセシビリティ要件を満たすコントラスト比が、どのスタイルバリエーションでも維持されるようになりました。