search

chinchang / hint.css

A CSS only tooltip library for your lovely websites.
https://kushagra.dev/lab/hint/
MIT License
8.42k stars 701 forks source link

Hidden hint has outline when going through links on a page using a tab key #143

Open dvorapa opened 8 years ago

dvorapa commented 8 years ago

The hint is outlined even when it is hidden. See screenshot below snimek obrazovky porizeny 2016-06-04 22-43-13

chinchang commented 8 years ago

This behavior is because after/before pseudo elements (used by Hint.css for tooltips) are part of the actual element itself and therefore become part of its outline too. While I am looking for a solution to prevent this somehow, you can for now try removing the outline all together if its not too critical for you:

a { outline: 0; }

EDIT: THIS IS NOT AT ALL RECOMMENDED. Because outline makes it usable for keyboard users.

dvorapa commented 8 years ago

It is just a little design bug, not so important. I do not want to remove it because of handicapped people, who could go through using tab key and want to see, what link they are on. Better to have special shape than nothing for these users

tnguyen14 commented 7 years ago

I'm curious about whether this can be fixed somehow as well. And I agree with @dvorapa that the outline shouldn't be hidden for accessibility reason.

iainsimmons commented 7 years ago

Another option would be to show the hint/tooltip on focus (and maybe active) states in addition to just hovering. That way, the outline would at least be shown around a readable tooltip. Much better experience for keyboard users, and if using the ARIA labels, I think it wouldn't change much for screen reader users (though I thought I read somewhere that some assistive technology reads out pseudo-content...)

chinchang commented 7 years ago

@iainsimmons Focus support was removed due to #63

iainsimmons commented 7 years ago

@chinchang Having a button that is still focused when clicked isn't an issue in my eyes, as it's technically correct. If you want the hint to disappear you should move the focus to another, relevant element while handling the click event for the button.

Aymkdn commented 5 years ago

Any solution for this 3-years-old issue ?

chinchang commented 5 years ago

Re-visiting this issue and all the discussion here and on issue #63, I feel removing the focus support was not a good idea. It has broken the keyboard accessibility just for the sake of preventing the tooltip from showing even after a button/link is clicked.

I would vote for getting the tooltip back on focus. What say people?

Aymkdn commented 5 years ago

My current workaround is to force a blur() on the a/button once the user has clicked on it : 

<button type="button" class="hint--top" aria-label="some text" onclick="doSomething(); this.blur()">awesome action</button>
iainsimmons commented 5 years ago

My current workaround is to force a blur() on the a/button once the user has clicked on it :

<button type="button" class="hint--top" aria-label="some text" onclick="doSomething(); this.blur()">awesome action</button>

Yes, this can only really be done with JavaScript, since the 'correct' behaviour is to leave a button focused after it is clicked, until you focus on something else.