Understanding role="complementary" attribute and <aside> tag

Question

In MDN the documentation for ARIA: complementary role says:

The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.

and:

These sections are frequently presented as sidebars or call-out boxes.

and:

If possible, use the HTML <aside> element instead.

My questions

• Is <div role="complementary"> equal to <aside>?
• Sidebars, call-out ("call us now") boxes and what else, primarily (JavaScript modals?, Chat now popups?);

Answer 1

Is <div role="complementary"> equal to <aside>?

In the docs is written the exact answer to this:

Note: Using the element will automatically communicate a section has a role of complementary. Developers should always prefer using the correct semantic HTML element over using ARIA.

So the answer is, yes, they are equal, but you should use the correct html tag instaed of ARIA.

About what else they can be used?

First thing in my mind is calendar aside section, or forecast for weather sites/apps, if its coocking site it can be recomendation aside section with recipes or something else, or any recomendation for the purposes of the app. As the name says <aside>, just an addition to the main content/information that is given to the user.