デザインシステムと組み合わせる

多くの組織ではデザインシステムを導入し、<MyButton>や<MyTxt>のような独自コンポーネントを使用しています。しかしeslint-plugin-jsx-a11yは基本的に標準の HTMLタグに対してのみ動作するため、デザインシステムのコンポーネントにもアクセシビリティ規則を適用するには追加設定が必要です。

1. 컴포넌트 매핑하기

たとえば<MyButton>コンポーネントが実際には<button>を、<MyTxt>が<span>を出力するなら、次のようにESLint設定のsettingsにマッピングを追加してください。

こうしておくと、<MyButton>・<MyTxt>にもbutton・spanに対するアクセシビリティ規則が同様に適用されます。

2. Polymorphic prop（多様なタグレンダリング）対応

複数のHTMLタグやコンポーネントに柔軟にレンダリングできるコンポーネントでは、asのようなプロパティ（prop）を使うことがよくあります。これを多相（polymorphic）コンポーネントと呼びます。

たとえば、ボタンコンポーネントを<button>だけでなく<a>や<div>など他のタグでもレンダリングしたい場合、次のようにasを使えます。

<MyButton as="a" href="/home">
  ホームへ
</MyButton>

このようにasなどのpropで多相レンダリングを提供するコンポーネントを運用する際は、そのprop名をpolymorphicPropNameオプションで明示してください。そうすることで、アクセシビリティのESLint規則がデザインシステムのコンポーネントに正しく適用されます。

3. control-has-associated-labelのカスタマイズ

デザインシステムのコンポーネントがchildrenの代わりに別のprop（例：contents）でテキストを受け取る場合、既定設定だけでは jsx-a11y/control-has-associated-labelが通らないことがあります。

たとえば次のようにcontentsというpropでテキストを渡し、実際には<button>要素としてレンダリングされるケースを考えます。

<MyCard contents="カード内容" />

この場合、ESLintは適切なラベルがないと判断してエラーにすることがあります。これを解決するには、labelAttributesオプションに該当のprop名を追加してください。

この設定により、<MyCard contents="カード内容" />のcontentsがラベルとして認識され、アクセシビリティエラーなく利用できます。

---

このほかにも、デザインシステムにはさまざまなコンポーネントや prop パターンが存在します。詳細はeslint-plugin-jsx-a11y 공식 문서のsettingsとrulesのオプションを参照し、要件に合わせてカスタマイズしてください。