a11y/disallowed-element · 禁止された要素

プロジェクトが「使わない」と宣言した要素の出現をすべて報告します。宣言するまでは何もしません。

重大度: warning · カテゴリ: a11y

宣言駆動のルールで、ルール自身の意見はありません。何も宣言しなければ何もせず、プロジェクトが使いたくないタグを宣言すれば、その出現がすべて検出になります。

チェック内容

コンポーネントのソース中で、タグ名が宣言リストに含まれるすべての要素。

export default {
  rules: {
    'a11y/disallowed-element': { options: { elements: ['iframe', 'marquee'] } }
  }
};

elements は素のタグ名のリストで、大文字小文字は区別しません。先頭は英字、続けて英数字とハイフンなので、カスタム要素名（my-widget）も書けます。それ以外（input[type=file]、.legacy、div > p）は config 読み込み時に拒否されます。受理してしまうと黙って何にもマッチしない値になり、後で意味を与えると受理済みの config の意味が変わってしまうためです。宣言を「どこに」効かせるかは、他のルールと同じく overrides の役割です。files や route を持つエントリは、マッチしたファイルに対してリストに追加します（string-list オプションは追加であって置換ではありません）。

export default {
  rules: {
    'a11y/disallowed-element': { options: { elements: ['iframe'] } }
  },
  overrides: [
    { files: 'src/routes/(marketing)/**', rules: { 'a11y/disallowed-element': { options: { elements: ['video'] } } } }
  ]
};

検出は要素の開始タグの行に紐づくので、タグが何行にまたがっていても、直上の  1 つで抑制できます。要素があり禁止要素のないコンポーネントは pass になります。

見えないもの: <svelte:element this="iframe">。this がリテラルでも、収集器にとってタグは動的です。

export default {
  rules: {
    'a11y/disallowed-element': 'off'
  }
};

a11y/disallowed-element · 禁止された要素

チェック内容

なぜ重要か

修正方法

モードによる違い

無効化