Show tooltip when hovering over tool type icon

[housseindjirdeh]

@ashwin-sureshkumar made the nice suggestion of showing some sort sort of indicator that explains what the tool type is aside from just the top of the site.

Thought: Show a small tool-tip when hovering over any of the icons within the card components.

As always - any thoughts, suggestions will be appreciated!

[ffoodd]

You should try to globally improve your SVGs' accessibility. Here are some reading:

• Accessible inline SVG
• Making SVG accessible by Leonie Watson

And there are probably tons of better link :)

You could probably go with aria-label and role="img" on each SVG, and display aria-label's content as a tooltip on hover in a pseudo-element.

Not quite sure of the accessibility of this, though. Maybe @Heydon would have a better idea?

[n8udd]

I just came here to leave the same comment.

On my first visit to the page, my first instinct was to toggle the switches. The second is obvious what it does after the first click.

The menu toggle is not. I clicked it repeatedly, and didn't know what I was changing. I eventually scrolled down, and saw what it was doing.

[housseindjirdeh]

Thanks a million folks, opened #19 to track adding a11y tags to the SVGs used in this app 🚀

@n8udd That's a very good point, and I think a lot of people are most likely thinking the same and are instinctively clicking the toggles as soon as they load the app. I initially didn't have the hero/sub-hero components describing the app so switching that toggle used to show the list changing above the fold, but that's not the case anymore.

Do you have anything in mind to possibly help for this? Only show that toggle when the user has scrolled down to a certain point? Is that a decent solution?