docs: clarify aside complementary role mapping

[ishaanlabs-gg]

Description

Clarifies that <aside> maps to complementary only conditionally when nested in sectioning content.

Motivation

This matches the HTML-AAM mapping for <aside> and addresses reader confusion in the <aside> and complementary role pages.

Additional details

• HTML-AAM maps <aside> scoped to body or main to complementary.
• HTML-AAM maps <aside> scoped to sectioning content to complementary only when it has an accessible name; otherwise it maps to generic.

Validation:

• git diff --check
• source guard for the new conditional role wording

Related issues and pull requests

Fixes #40664

[github-actions]

Preview URLs (2 pages)

• /en-US/docs/Web/Accessibility/ARIA/Reference/Roles/complementary_role
• /en-US/docs/Web/HTML/Reference/Elements/aside

[estelle]

We can make it shorter. does this work?

Suggested change

	> Using the {{HTMLElement('aside')}} element will usually communicate a section has a role of `complementary`. When an `<aside>` is nested in sectioning content, it maps to `complementary` only if it has an accessible name. Developers should always prefer using the correct semantic HTML element over using ARIA.
	> Using the {{HTMLElement('aside')}} element will communicate a section has a role of `complementary` when the `<aside>` has an accessible name and is nested in sectioning content. Developers should always prefer using the correct semantic HTML element over using ARIA.

[estelle]

thanks. a few suggestions for wording and linking

[estelle]

Suggested change

	Using the {{HTMLElement('aside')}} element will usually communicate that the element has a role of `complementary`. If an `<aside>` is nested in sectioning content, it maps to `complementary` only if it has an accessible name. If possible, prefer using the semantic `<aside>` element instead of the `complementary` role.
	Using the {{HTMLElement('aside')}} element will communicate a section has a role of `complementary` when the `<aside>` has an accessible name and is nested in sectioning content. If possible, prefer using the semantic `<aside>` element instead of the `complementary` role.

[estelle]

Suggested change

	>, or <code>generic</code> when nested in sectioning content without an accessible name
	>, or <code
	><a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/generic_role"
	>generic</a
	></code
	> when nested in sectioning content without an accessible name

[estelle]

Suggested change

- The implicit ARIA role of `<aside>` is `complementary` when it is scoped to the {{HTMLElement("body")}} or {{HTMLElement("main")}} element. If it is nested in sectioning content, such as an {{HTMLElement("article")}}, {{HTMLElement("section")}}, or another `<aside>`, it maps to the `complementary` role only if it has an accessible name. Otherwise, it maps to the `generic` role.

- The implicit ARIA role of `<aside>` is `complementary` when it is scoped to the {{HTMLElement("body")}} or {{HTMLElement("main")}} element. If it is nested in sectioning content, such as an {{HTMLElement("article")}}, {{HTMLElement("section")}}, or another `<aside>`, it maps to the `complementary` role only if it has an accessible name. Otherwise, it maps to the [`generic`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/generic_role) role.