Bug 162866 - Broken tab button behavior with svg <use> element
Summary: Broken tab button behavior with svg <use> element
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Safari 10
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2016-10-03 09:47 PDT by Arseny Forshtreter
Modified: 2017-01-11 12:14 PST (History)
5 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
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.