react-feather icon indicating copy to clipboard operation
react-feather copied to clipboard

Set focusable="false" to avoid focus on icons in IE11

Open ghengeveld opened this issue 7 years ago • 1 comments

Similar to this issue SVGs in IE11 are focusable by default (using the tab key). Since I'm using react-feather icons alongside form fields for validation, this makes navigating the form using the tab key quite tedious in IE11.

The fix: add focusable="false" to all svg elements.

See also: https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element

ghengeveld avatar Sep 12 '18 14:09 ghengeveld

focusable="false" tabindex="0" is recommended for backwards compatibility.

DanielRuf avatar Sep 24 '19 04:09 DanielRuf