Bug 162866

Summary: Broken tab button behavior with svg <use> element
Product: WebKit Reporter: Arseny Forshtreter <arseniy.forshtreter>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: cfleizach, fredrik, stephanie.rewis, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: Mac   
OS: OS X 10.11   

Description Arseny Forshtreter 2016-10-03 09:47:20 PDT
Hi everyone.

After upgrading Safari to version 10.0 one of my colleagues has noticed a very strange behavior on our service: pressing a Tab button while being focused on some of <input> elements on the page leads to focus on Safari interface elements (back button or first tab, depends whether tabs pane is visible or not) instead of a next input element.
Brief research has shown that <use> element causes the problem.
Here is a minimal example: https://jsfiddle.net/bwb9aq3h/ To reproduce a bug you need to focus a first <input>, press Tab and make sure that back button or tabs pane gets focused after that instead of next <input>

Even though we've found a workaround (a very odd one i must say, you need to insert a whitespace around <use> like here: https://jsfiddle.net/hsrdm2vv/), we sincerely hope for this to be fixed, because it breaks user experience on a lot of websites that use svg icons.

Thank you!
Comment 1 Radar WebKit Bug Importer 2016-10-03 18:41:21 PDT
Comment 2 Stephanie (Sullivan) Rewis 2016-11-03 14:26:45 PDT
Yes, agreed. This is a very big deal. While adding space might work for some, many large sites remove whitespace automatically. This is a high priority a11y and keyboard navigation bug in my opinion.