landmark-complementary-is-top-level has been obsoleted by recent ARIA and HTML-AAM changes

[dbjorge]

Product

axe-core

Product Version

4.11.0

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

A few years ago (after landmark-complementary-is-top-level's inception), the ARIA WG updated the ARIA description of the complementary role from this:

A landmark that is designed to be complementary to the main content, but would remain meaningful if it were to be separated from the main content. Complementary content is ideally placed at a similar level in the DOM hierarchy to the main content.

...to this (emphasis mine):

A landmark that is designed to be complementary to the main content that it is a sibling to, or a direct descendant of. The contents of a complementary landmark would be expected to remain meaningful if it were to be separated from the main content it is relevant to.

This change makes it clear that making a complementary landmark a descendant of other content (in other landmarks) is an explicit design intent of the complementary landmark. However, landmark-complementary-is-top-level complains that following this intended pattern violates a best-practice.

In addition to this, last year in #4469, we taught landmark-unique and implicit-html-roles about this html-aam revision for when <aside> has an implicit complementary vs generic role, but we missed updating landmark-complementary-is-top-level's matches logic accordingly; it still matches all aside elements, even those which aren't implicitly complementary. We considered whether we should just update this rule with a more accurate matches function, but decided to not bother in favor of instead deprecating the rule.

in case we change our mind about that, a test case for the matches-update version

In the following example, the aside element has role generic (because it is a descendant of a sectioning element and has no accessible name). However, the landmark-complementary-is-top-level rule is incorrectly still applying to it:

<h1 id="article-title">Some article</h1>
<section aria-labelledby="article-title">
  <p>Some text</p>
  <aside><p>An aside with no accessible name</p></aside>
</section>