Breaks other [aria-label]::before hovers
AnandChowdhary opened this issue · comments
Anand Chowdhary commented
In https://github.com/kazzkiq/balloon.css/blob/master/balloon.css#L42, the rule is :
[aria-label]:hover:before, [aria-label]:hover:after, [aria-label][data-balloon-visible]:before, [aria-label][data-balloon-visible]:after, [aria-label]:not([data-balloon-nofocus]):focus:before, [aria-label]:not([data-balloon-nofocus]):focus:after {
opacity: 1;
pointer-events: none;
}
Which can simply be:
[aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-visible]:before, [aria-label][data-balloon-visible]:after, [aria-label]:not([data-balloon-nofocus]):focus:before, [aria-label]:not([data-balloon-nofocus]):focus:after {
opacity: 1;
pointer-events: none;
}
This way, only [aria-label]
s which have a data-balloon-pos
attribution, i.e., are using Balloon.css, will be selected. Right now, any element that has an ARIA label on hover gets these styles.
For example:
<a aria-label="Visit our about page" class="external" href="#">Learn more</a>
a.external::after {
opacity: 0.5;
content: " (External link)";
}
This would also inherit Balloon.css's hover style, which would make the opacity
1 and remove pointer events, which isn't the desired behavior.