bruno
bruno copied to clipboard
fix: accessibility issue in side bar
Description
Fix accessibility issue in side nav bar footer icons
- Make all svgs hidden to assistive technology and provide proper aria-label
- Use proper tags to list menus: These are groups/lists of items and provide menus for users to navigate. Hence should be descendent of
<ul> and <li>
tags withrole="menubar" and role="menuitem"
- fix title accessibility issue, by wrapping bruno icon and text inside a single button rather than 2 different buttons. Here bruno logo acts as decorative. Bruno logo and text together act as the brand name here, they are not separate. Hence clubbed.
Accessibility tree structure
then | now |
---|---|
Contribution Checklist:
- [x] The pull request only addresses one issue or adds one feature.
- [x] The pull request does not introduce any breaking changes
- [x] I have added screenshots or gifs to help explain the change if applicable.
- [x] I have read the contribution guidelines.
- [x] Create an issue and link to the pull request.