Accessibility: Make buttons on left nav bar accessible to screen readers

[smoya]

Reason/Context

Current nav bar buttons don't provide any alternative text. This makes it hard to know what button does what. The issue goes further because it means screen readers won't do their job, meaning Studio can't be used on all its potential by people with visual impairments.

Description

I would suggest we, at least, add both <title> and <desc> elements to our inline svg's (the buttons are) so they act as alternative text.

More info here https://css-tricks.com/accessible-svgs/

[boyney123]

Nice one @smoya

Also I think it would be nice to add tooltips for the icons, most vertical nav / code-based systems I have used in the past have these. Think it's a small change that can help people understand what the icons do.

Codesandbox example 👇

[boyney123]

Ah looks like @mcturco has already opened up and issue for it :) #193

[mcturco]

@boyney123 yes!! Your suggestion here was exactly what I was thinking for #193 :)))

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[mcturco]

Finally began working on a solution for this (the stale label reminded me of this idea! 😄)

Prototype

Here is a video walkthrough of how we can implement this into Studio https://www.loom.com/share/0ec2e978b93146b7a99da2d3aa6496c9

And here is the figma prototype link if you would like to view it on your own: https://www.figma.com/proto/FfxMJnvJLpHpAHueKthzxe/Add-tooltips-to-side-navigation?node-id=2%3A386&scaling=min-zoom&page-id=2%3A30

Components

1. Current nav buttons

We will be adding a background on hover to each nav button. The specs of this are as follows:

• margin: 8px
• padding: 8px
• border-radius: 4px
• background-color: bg-gray-600

2. New Tooltip component

This new tool tip component should fade in on hover of each navigation item. The design specs for this new component are as follows:

• border-radius: 4px
• background-color: bg-gray-600
• padding: 4px 8px
• text color: white
• font-family: Inter
• font-size: 12px
• font-weight: 400
• margin-left: 8px from sidebar edge

---

Let me know what everyone thinks about this and if we should start implementing it in a PR!

cc: @smoya @magicmatatjahu

[smoya]

I like this new design, I feel it fixes the issue totally 💯 .

Just a small comment, is the hover animation for the tooltips that figma shows part of the final design? I feel it so slow that confuses me some times, having two tooltips being showed at the same time.

[mcturco]

I like this new design, I feel it fixes the issue totally 💯 .

Just a small comment, is the hover animation for the tooltips that figma shows part of the final design? I feel it so slow that confuses me some times, having two tooltips being showed at the same time.

Thanks, @smoya! I definitely think we can speed up the animation duration. I believe its currently set at 300ms, so we could do 100ms instead.