NEW187799
SVG <a> with focus lacks visual indicator 
https://bugs.webkit.org/show_bug.cgi?id=187799
Summary SVG <a> with focus lacks visual indicator
Peter Krautzberger
Reported 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.
Attachments
Add attachment proposed patch, testcase, etc.
Peter Krautzberger
Comment 1 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).
Ahmad Saleem
Comment 2 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!
Radar WebKit Bug Importer
Comment 3 2022-07-26 19:49:33 PDT
<rdar://problem/97642031>
Ahmad Saleem
Comment 4 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
j.gerbes
Comment 5 2025-01-22 15:02:06 PST
This bug is still present in WebKit 20621.1.9.111.1. The default `:focus` styles are being applied on focus, but it seems that `outline` is not rendered for `<a>` and `<svg>` elements within an `<svg>` element: <html> <head> <style> .outline { outline: 1px solid red; } </style> </head> <body> <h2>Outline on outer SVG element (rendered)</h2> <svg class="outline" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <circle cx="50" cy="50" r="35" /> </svg> <h2>Outline on circle element (rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <circle class="outline" cx="50" cy="50" r="35" /> </svg> <h2>Outline on anchor element (not rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <a class="outline" href="#"> <circle cx="50" cy="50" r="35" /> </a> </svg> <h2>Outline on inner SVG element (not rendered)</h2> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100" > <svg class="outline"> <circle cx="50" cy="50" r="35" /> </svg> </svg> </body> </html>
Note You need to log in before you can comment on or make changes to this bug.