|Summary:||Broken tab button behavior with svg <use> element|
|Product:||WebKit||Reporter:||Arseny Forshtreter <arseniy.forshtreter>|
|Severity:||Normal||CC:||cfleizach, fredrik, stephanie.rewis, webkit-bug-importer, zimmermann|
|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 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.