Add ARIA labels to Sidebar component - Vanilla.js

[blackgirlbytes]

Add ARIA labels to Sidebar component - Vanilla

🚀 Goal

Improve the accessibility of the Sidebar component in our Vanilla DWA starter by adding appropriate ARIA labels to key elements.

🤔 Background

Adding ARIA (Accessible Rich Internet Applications) labels will make our Sidebar component more usable for people relying on assistive technologies.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

🔑 Tasks and Acceptance Criteria

• Review the current structure of the Sidebar component
• Add ARIA labels to the following elements:
  • The main Sidebar container
  • Each navigation link in the Sidebar
  • Any buttons or interactive elements (e.g., toggle for expanding/collapsing)
  • The Web5 connection status or button (if present in the Sidebar)
• Ensure all interactive elements are keyboard accessible
• Test the Sidebar with a screen reader to verify labels are read correctly
• Update any relevant documentation or comments in the code

🌟 Resources

• Vanilla.js Accessibility Guide
• WAI-ARIA Authoring Practices
• MDN ARIA Documentation

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉

[VANSH3104]

@blackgirlbytes @taniashiba can i also work on this too ?

[taniashiba]

I believe the other tasks need to be completed before ARIA labels, but @blackgirlbytes may be able to say.

Have you completed your current tasks so far?

[naaa760]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!