bruno icon indicating copy to clipboard operation
bruno copied to clipboard

fix: accessibility issue in side bar

Open shrilakshmishastry opened this issue 10 months ago • 0 comments

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 with role="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
Screenshot 2024-03-31 at 7 57 39 PM Screenshot 2024-03-31 at 7 57 09 PM

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.

link to issue

shrilakshmishastry avatar Mar 31 '24 14:03 shrilakshmishastry