Fix focus not returned to SVG Element

[RobinMalfait]

This PR fixes an issue where the focus is not returned to an SVG element with a tabIndex correctly.

There are a few issues going on here:

1. We assume that the element to focus (e.target) is an instanceof HTMLElement, but the SVGElement is not an instanceof HTMLElement.
2. By using instanceof we are checking against concrete classes, so if this happen to cross certain contexts (Shadow DOM, Iframes, ...) then the instances would be different.

To solve this, we will now:

1. Relax the types and only care about the actual attributes and methods we are interested in. In most cases this means changing internal types from HTMLElement to Element for example.
2. We will check whether certain properties are available in the object to deduce the correct type from the object.

Fixes: #3660

Test plan

Added an SVG to open a Dialog component and made sure that pressing escape or clicking outside of the Dialog does restore the focus to the SVG itself.

<svg
  tabIndex={0}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      setIsOpen((v) => !v)
    }
  }}
  onClick={() => setIsOpen((v) => !v)}
  className="h-6 w-6 text-gray-500"
>
  <BookOpenIcon />
</svg>

Here is a video of that behavior:

Screen.Recording.2025-04-25.at.12.00.45.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 11:53am
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 11:53am