I have an <image>
element within an <svg>
element, embedded into HTML markup. Somehow the <image>
element gets :focus
'ed when I navigate through the page with the Tab
button. And it has the ugly focus frame around:
:focus { /* user agent stylesheet */
outline: -webkit-focus-ring-color auto 5px;
}
It's Chrome 129.
I'm a bit surprised, because I supposed that vector elements within an svg
shouldn't be focusable at all.
Here are the styles:
Why the element can be :focus
'ed at all and how to prevent it from behaving so?
UPD
Accessibility tab says it's focusable:
But I still can't get, how it is possible. What property, style or event handler can make it focusable? BTW, it has an assigned Bootstrap tooltip.
UPD2 This is the result of applying Bootstrap tooltip:
$('.cloudHolder svg .entry').tooltip();
Now I'm investigation what exactly .tooltip();
does to make the element focusable.
That were focusin
/focusout
event handlers. If they are set, Chrome deduces the element is tabbable.
In my case, the handlers were set by popper.js 2.x ($('.cloudHolder svg .entry').tooltip();
).