Add aria-label attribute to main navigation in the sidebar component

[rainerdema]

Summary

Fix failed specs in products_spec.rb by adding aria-label to sidebar navigation.
The aria-label attribute is set to "main-nav" to provide an accessible label for the main navigation section of the page.
https://dequeuniversity.com/rules/axe/4.7/landmark-unique?application=axeAPI

Checklist

Check out our PR guidelines for more details.

The following are mandatory for all PRs:

• I have written a thorough PR description.
• I have kept my commits small and atomic.
• I have used clear, explanatory commit messages.

The following are not always needed:

• 📖 I have updated the README to account for my changes.
• 📑 I have documented new code with YARD.
• 🛣️ I have opened a PR to update the guides.
• ✅ I have added automated tests to cover my changes.
• 📸 I have attached screenshots to demo visual changes.

[waiting-for-dev]

Thanks for checking it, @rainerdema!

The nav element already conveys the "navigation" semantics. I found the error comes when two unlabelled nav elements exist. I'm not an expert in a11y, but I understand it's more important to label those with a specific scope. For instance, I added the label for the account links.

I guess you're finding this issue when working on the pagination, so maybe we could add an aria-label equal to "Pagination" there. What do you think?

[rainerdema]

Thanks for checking it, @rainerdema!

The nav element already conveys the "navigation" semantics. I found the error comes when two unlabelled nav elements exist. I'm not an expert in a11y, but I understand it's more important to label those with a specific scope. For instance, I added the label for the account links.

I guess you're finding this issue when working on the pagination, so maybe we could add an aria-label equal to "Pagination" there. What do you think?

That absolutely makes sense! Thanks, @waiting-for-dev, I'll close the PR.