Skip to content

Latest commit

 

History

History
83 lines (64 loc) · 1.57 KB

File metadata and controls

83 lines (64 loc) · 1.57 KB

ember/template-no-nested-landmark

💼 This rule is enabled in the following configs: strict-gjs, strict-gts.

Disallows nested landmark elements.

Landmark elements should not be nested within other landmarks. This creates confusion for screen reader users navigating by landmarks.

Rule Details

This rule disallows nesting landmark elements or roles within other landmark elements or roles.

Landmark elements include:

  • <header> (banner)
  • <nav> (navigation)
  • <main> (main)
  • <aside> (complementary)
  • <footer> (contentinfo)
  • <section> (region)
  • <form> (form)
  • Elements with landmark roles

Examples

Examples of incorrect code for this rule:

<template>
  <nav>
    <main>Content</main>
  </nav>
</template>
<template>
  <main>
    <nav>Navigation</nav>
  </main>
</template>
<template>
  <div role="main">
    <div role="navigation">Nav</div>
  </div>
</template>

Examples of correct code for this rule:

<template>
  <nav>Navigation</nav>
  <main>Content</main>
</template>
<template>
  <div>
    <nav>Nav 1</nav>
    <nav>Nav 2</nav>
  </div>
</template>
<template>
  <main>
    <div>Regular content</div>
  </main>
</template>

References