Search code examples
htmlcssimagesvgfocus

Why can <image> inside <svg> be :focus'ed?

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:

enter image description here

Why the element can be :focus'ed at all and how to prevent it from behaving so?

UPD

Accessibility tab says it's focusable:

enter image description here

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.

Solution

  • 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();).