Bug 63551

Summary: SVGElement 'blur' event is not working
Product: WebKit Reporter: Dirk Schulze <krit>
Component: SVGAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: rwlbuis, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Description Flags
Example for 'blur' event
Displays focus, blur, focusin, focusout, activate, DOMFocusIn, DOMFocusOut, and DOMActivate events on SVG and HTML elements. none

Description Dirk Schulze 2011-06-28 12:03:33 PDT
Created attachment 98954 [details]
Example for 'blur' event

If a SVGElement looses its focus it should fire event 'blur' but doesn't right now.

This is related to bug https://bugs.webkit.org/show_bug.cgi?id=41401
Comment 1 Dirk Schulze 2011-06-28 12:09:12 PDT
*** Bug 41401 has been marked as a duplicate of this bug. ***
Comment 2 Rob Buis 2011-07-04 15:19:33 PDT
Actually I don't think this works in SVG, blur (and onfocus) are not part of the list:


See also:



Comment 3 Dirk Schulze 2011-07-04 22:15:17 PDT
I think it could be very useful for accessibility.
Comment 4 Courtney Christensen 2011-08-30 15:22:45 PDT
Created attachment 105707 [details]
Displays focus, blur, focusin, focusout, activate, DOMFocusIn, DOMFocusOut, and DOMActivate events on SVG and HTML elements.

I have been running some SVG focus-related tests (spurred by trying to capture iOS VoiceOver's focus-ring changes in JavaScript, see [1]). It seems[2] SVG *should* only be firing `DOMFocusIn`, `DOMFocusOut`, and `DOMActivate`.

However, with elements taking on "group" roles via `tabindex` and/or `role="button"`, I've found:

  * Chrome (14b) fires all events on SVG, even `focus` and `blur`, which it technically should not.
  * Desktop Safari (5.1) only fires `DOMActivate` for SVG.
  * iOS Safari (w/VoiceOver on) fires nothing for SVG

Live example at:

            | Chrome 14b | Safari 5.1 | Mobile Safari* |
focus       |    H, S    |     H      |       H        |
blur        |    H, S    |     H      |       H        |
focusin     |    H, S    |     H      |       H        |
focusout    |    H, S    |     H      |       H        |
activate    |            |            |                |
DOMFocusIn  |    H, S    |     H      |       H        |
DOMFocusOut |    H, S    |     H      |       H        |
DOMActivate |    H, S    |    H, S    |       H        |
  H => fires on HTML elements
  S => fires on SVG elements
  * => only w/VoiceOver (iOS) activated

I found an old bug[3] which sounds related, but has long since been marked RESOLVED/FIXED. Also, I would like to confirm Dirk's assertion that this is an important accessibility feature. I'm going to keep an eye on this bug

[1]: http://old.nabble.com/Considering-a-Touchhover-td31127221.html#a31129788
[2]: http://www.w3.org/TR/SVGTiny12/interact.html#focus
[3]: https://bugs.webkit.org/show_bug.cgi?id=12573
Comment 5 Dirk Schulze 2012-02-03 10:23:25 PST
(In reply to comment #4)
> Created an attachment (id=105707) [details]
Your test works in Safari trunk as well. But you embedded the SVG in the HTML document. We might check if it works for plain SVG files as well.
Comment 6 Dirk Schulze 2014-05-12 06:38:57 PDT
It is finally fixed in trunk for SVG only as well.