nested-interactive-controls-absent
インタラクティブなコントロールを入れ子にしてはいけません
インタラクティブなコントロール(リンク、ボタン、フォームコントロール、またはARIAのウィジェットロール)が、別のインタラクティブなコントロールを含んでいないことを確認します。
適用範囲:インタラクティブなコントロールの集合に一致する要素に適用されます(ネイティブのa[href]、button、input(hiddenを除く)、select、textarea、または明示的なARIAウィジェットロール:button、link、checkbox、radio、switch、tab、textbox、combobox、listbox、menuitem、menuitemcheckbox、menuitemradio、option、slider、spinbutton、searchbox、treeitem。ロールはrole属性のうち既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合して決めるため、role="foo button"やrole="BUTTON"は該当し、role="none button"は該当しません)。コンテナー自身がフォーカス可能かどうかにかかわらず適用されます。フォーカス可能性は、ある子孫要素が入れ子になったインタラクティブなコントロールに当たるかどうかの判断にだけ使います。ElementInternalsによってこれらのウィジェットロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。
期待される結果:要素が、別の操作可能なインタラクティブなコントロールを子孫として含んでいません(例:<select>を囲む<button>や、チェックボックスを含むリンク)。入れ子になったインタラクティブなコントロールは、支援技術で確実に読み上げられたり操作できたりするとは限りません。外側と内側のどちらのコントロールを起動するのかが曖昧になり、一部の支援技術は2つのうち一方しか公開しません。
検出結果が報告する内容:
nestedElements:このコントロールの内側に入れ子になっているコントロールで、コントロールごとに1つのタグ名です。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<button>Click me</button>
入れ子になったインタラクティブなコントロールはありません。
<button><input type="checkbox"> Accept</button>
<button>の中に、別のフォーカス可能なコントロールである<input type="checkbox">が入れ子になっています。