Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    To prevent the focus outline from appearing around your <image> element inside the <svg> when navigating with the Tab button, you can simply remove the default focus outline using CSS.

    Add the following styles to target the <image> element within the <svg> and remove the focus outline:

    svg image:focus {
    outline: none;
}

    If you’d prefer to completely prevent the <image> element from being focusable, you can remove it from the tab navigation by setting the tabindex to -1:

    <svg>
    <image tabindex="-1" href="image.jpg" width="100" height="100" />
</svg>

    This ensures that the <image> element is not focusable, and the focus outline won’t appear while tabbing through the page.

    Login or Signup to reply.
  2. 0

    Why SVG is Focusable?

    As for me, for Accessibility: for assistive technologies like screen readers. Also Elements with an inherent interactive behavior or elements that can display external resources, like , might be implicitly focusable. Chrome, especially, may add this behavior to improve accessibility for interactive SVG content.

    How to Prevent the Element from Being Focusable mix of these items
    I hope will help you

    • try to set tabindex="-1" at image component
    • try property: focusable="false"
    • try css like this: svg image { pointer-events: none;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search