search

shinokada / svelte-heros-v2

Hero Icons v2 for Svelte. You can select outline and solid icons using the variation props. Svlete-Heros support major CSS framework. You can add additional CSS using the `class` props.
https://svelte-heros-v2.codewithshin.com
Apache License 2.0
41 stars 3 forks source link

[BUG]: Icons should not be focusable #10

Closed michael closed 1 year ago

michael commented 1 year ago

Description of the bug

I noticed that unlike in svelte-heros-v1 the icons receive a focus when tabbing through the focusable elements. I think this shouldn't happen.

Steps To Reproduce

  1. Use any Icon
  2. Use TAB

Additional Information

No response

shinokada commented 1 year ago

If you don't want a focusable icon add tabindex="-1":

<AcademicCap size="50" tabindex="-1" />
joekrump commented 5 months ago

@shinokada I'm curious what the thinking is behind having the icons be focusable by default vs opt in? In many cases I'm using the icon components within <button> elements which results in odd behaviour since a single tab focuses the button, then tabbing again focuses its inner icon.

shinokada commented 5 months ago

Svg icons are often used for components such as accordion, dropdown, etc. They require to be focusable since it opens/closes/toggles hidden components. If you don't want to them focusable, you can read "Setting Global Icon using setContext" and "Creating a Default Icon Setting" in the docs to create your custom icons.