Bug 187799

Summary:	SVG <a> with focus lacks visual indicator
Product:	WebKit	Reporter:	Peter Krautzberger <peter>
Component:	SVG	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, ap, bfulgham, jdiggs, rniwa, webkit-bug-importer, zimmermann
Priority:	P2	Keywords:	InRadar
Version:	Safari 11
Hardware:	Unspecified
OS:	Unspecified

Description Peter Krautzberger 2018-07-19 05:28:53 PDT

# Reproduce

* visit https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a
* open the sample there
* focus one of the links

Expected result

The link has some visual indication that it is in focus. 

# Actual result

There is no visible indication that the link is in focus.

# Notes

* Also confirmed on WebKitGTK+  2.20.3
* Defining a CSS outline has no effect
* Chrome, Firefox, and Edge behave as expected
* workaround: wrapping the <a>'s children in a <rect> and specifying stroke-related properties for a:focus>rect works.

Comment 1 Peter Krautzberger 2018-07-19 09:32:07 PDT

As @joanie pointed out, the example on MDN includes some CSS which may be confusing. Those styles do not include anything for focus, but styles for hover and active instead (which are also not working in WebKit but everywhere else).

Comment 2 Ahmad Saleem 2022-07-26 04:16:50 PDT

I am able to reproduce this bug in Safari 15.6 on macOS 12.5, while going to MDN article and looking into loaded example, if you hover over <circle> anchor link, it does not show outline to highlight that it is link although cursor do change to show that it is link to click, while all in other browsers (Chrome Canary 106 and Firefox Nightly 104) it does. Just wanted to share updated testing results. Thanks!

Comment 3 Radar WebKit Bug Importer 2022-07-26 19:49:33 PDT

<rdar://problem/97642031>

Comment 4 Ahmad Saleem 2022-12-17 16:04:39 PST

We need to update "svg.css" with following to fix this:

/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML's.
   See warning below */

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /* Even for text, SVG uses fill over color */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}

https://github.com/WebKit/WebKit/blob/c2dd7ba9890874670b16f914a46afb7c420da9ce/Source/WebCore/css/svg.css#L4