Bad value “dialog” for attribute “role” on element “aside”.

The role="dialog" attribute is not allowed on an <aside> element, because <aside> already carries the implicit role complementary and the spec does not list dialog among the roles you can override it with.

ARIA in HTML defines, element by element, which roles are valid. The <aside> element represents content tangentially related to its surroundings, like a sidebar or a pull quote, and assistive technology exposes it as a complementary region. A dialog is a different thing entirely: a window layered over the page that the user interacts with before returning to the rest of the content. Putting one role's name on an element built for the other leaves the validator no good way to reconcile them, so it rejects the value.

What you almost certainly want is a real dialog. The <dialog> element already has an implicit dialog role, handles focus and the backdrop for you, and can be opened as a modal with showModal(). Reach for it first. If you genuinely need to bolt the role onto a generic container, a <div role="dialog"> is valid where <aside> is not.

Invalid example

<aside role="dialog" aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</aside>

Valid example

<dialog aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</dialog>

If a native <dialog> does not fit your markup, a generic container accepts the role:

<div role="dialog" aria-label="Newsletter signup">
  <p>Subscribe to get our weekly updates.</p>
  <button>Subscribe</button>
</div>

Learn more:

MDN Reference

MDN: ARIA dialog role

→

MDN Reference

MDN: The dialog element

→

MDN Reference

MDN: The aside element

→