QR Code Component with React and Chakra UI

This was a fun project. I learned about aria-hidden and visually hidden elements. I hid the QR code image from screen readers, since it's not focusable, and provided an alternative text link for screen readers that is visually hidden when viewed on screen.

Do you have excellent resources you could share about using semantic HTML elements as they relate to ARIA roles?

I have read MDN aria roles and quite a lot of the ARIA authoring practices guide. I'm looking for any resources/production examples that can help me learn when to apply the patterns/rules, like when to use section vs article vs document vs group that seem similar.

In Chakra, I can use the "as" prop to specify semantic HTML elements, but outside of headings and form components, I'm unsure how to best use these create a usable hierarchy. I test with Windows Narrator and it seems to primarily call out headings and links.

Windows narrator reads like this, and I thought it was interesting it didn't call out main/article elements. I may try a different screen reader and compare how they differ.

LINK Visit Frontend Mentor Website
HEADING 1 improve your front-end skills by building projects
LINK To visit Frontend Mentor and take your coding skills to the next level, click here.
Challenge by LINK Frontend Mentor
Coded by LINK Amanda Guthrie

Thanks in advance for sharing resources and your kindly delivered feedback.