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.
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.