Bug 162866 – Broken tab button behavior with svg <use> element

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: SVG

[Arseny Forshtreter]

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!

[Radar WebKit Bug Importer]

<rdar://problem/28602056>

[Stephanie (Sullivan) Rewis]

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.

[Ahmad Saleem]

I am not able to reproduce this in Safari 15.6 on macOS 12.5 and it seems to be fixed in Safari Technical Preview 151 better.

*** Safari 15.6 ***

1) Click on first input
2) Press Tab
3) It goes to next input
4) Press Tab again - it goes *poof*

*** Safari Technical Preview 151 ***

1) Click on first input
2) Press Tab
3) It goes to next input
4) Press Tab again - it goes to address bar
5) Press Tab again - it goes to first input field again.

Appreciate if someone can comment and mark this bug accordingly. Original actual results from "Comment 0" was that pressing Tab was not leading to next input field on the page.

NOTE - I had JSFiddle open with "show" in the end to make it fully visible.

[Alexey Proskuryakov]

Yes, this appears fixed.