`など他のタグでもレンダリングしたい場合、次のように`as`を使えます。
+
+```jsx
+
+ ホームへ
+
+```
+
+このように`as`などのpropで多相レンダリングを提供するコンポーネントを運用する際は、そのprop名を`polymorphicPropName`オプションで明示してください。そうすることで、アクセシビリティのESLint規則がデザインシステムのコンポーネントに正しく適用されます。
+
+:::tabs key:bundler-object-entry
+== flat config
+
+```js{11}
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+
+export default [
+ jsxA11y.flatConfigs.recommended,
+ {
+ rules: {
+ 'jsx-a11y/control-has-associated-label': 'error',
+ },
+ settings: {
+ 'jsx-a11y': {
+ polymorphicPropName: 'as',
+ components: {
+ MyButton: 'button',
+ MyTxt: 'span'
+ },
+ },
+ }
+ }
+];
+```
+
+== legacy config
+
+```js{11}
+{
+ "plugins": ["jsx-a11y"],
+ "extends": [
+ "plugin:jsx-a11y/recommended"
+ ],
+ "rules": {
+ "jsx-a11y/control-has-associated-label": "error"
+ },
+ "settings": {
+ "jsx-a11y": {
+ "polymorphicPropName": "as",
+ "components": {
+ "MyButton": "button",
+ "MyTxt": "span"
+ },
+ },
+ }
+}
+```
+
+:::
+
+## 3. control-has-associated-labelのカスタマイズ
+
+デザインシステムのコンポーネントが`children`の代わりに別のprop（例：`contents`）でテキストを受け取る場合、既定設定だけでは `jsx-a11y/control-has-associated-label`が通らないことがあります。
+
+たとえば次のように`contents`というpropでテキストを渡し、実際には`
+ 
+```
+
+#### ✅ 正しい例：装飾画像には空のalt属性
+
+```html
+
+