Skip to main content

neighbor-popovers

Warns when popover triggers and their corresponding targets are not adjacent.

Whenever possible ensure the popover element is placed immediately after its triggering element in the DOM. Doing so will help ensure that the popover is exposed in a logical programmatic reading order for users of assistive technology, such as screen readers.

Cite: HTML Living Standard 6.12.1 The popover target attributes

❌ Examples of incorrect code for this rule

<button popovertarget="foo">Trigger</button>
<p>There are perceptible nodes between the trigger and corresponding target.</p>
<div id="foo" popover>Popover</div>
<div>
  <button popovertarget="foo">Trigger</button>
  <input type="text" /><!-- Focusable element is considered perceptible elements. -->
</div>

<div>
  <div>
    <div id="foo" popover>Popover</div>
  </div>
</div>

✅ Examples of correct code for this rule

<button popovertarget="foo">Trigger</button>
<div id="foo" popover>Popover</div>
<div>
  <button popovertarget="foo">Trigger</button>
</div>

<div>
  <div>
    <div id="foo" popover>Popover</div>
  </div>
</div>
<div>
  <button popovertarget="foo">Trigger</button>
</div>

<div>
  <div>
    <img src="image.png" alt="" /><!-- Images without accname are considered non-perceptible elements. -->
    <div id="foo" popover>Popover</div>
  </div>
</div>

Interface​

{
  "neighbor-popovers": boolean
}

Default Severity​

error