Mention breaking changes of upstream library in release notes? about carbon-icons-svelte HOT 7 CLOSED

My edit was to late, but yes that is what I noticed. The enter key did not register as a click. And we used

button {
  all: unset;
}

to remove all the styles....

And this became the ClickableIcon component:

<button on:click>
  <slot />
</button>

<style lang="scss">
  button {
    all: unset;
    display: flex;
    align-items: center;

    &:focus {
      outline: 2px solid var(--cds-focus);
      outline-offset: 2 px;
    }
  }
</style>

from carbon-icons-svelte.

Can you elaborate on the use case?

from carbon-icons-svelte.

Also, forwarded events on:click etc has also been removed. So now I have do wrap the icons in a div if I want to be able to click on them? Seems like a bad choice

from carbon-icons-svelte.

@Addeuz That should not be done anyway because of accessibility. If something should be clickable, it should be wrapped in a button or link.

from carbon-icons-svelte.

We use icons as buttons when a button is to small. And using a link for a click that isn't navigation is also bad a11y.

We also add a tabindex to the icon so it can be tapped through. Idk if we can make it any more compliant with a11y. But if someone have tips they are much appreciated.

But now without the on:click we have to put a div around the icons and put the on:click and tabindex on the div

Edit: Further thinking... @brunnerh after some thought I understood what you mean by wrapping it in a button. Not necessarily a carbon button but a "normal" button. So we made a wrapper class that wraps a button around the icon we want and we put the click on the button.

from carbon-icons-svelte.

tabindex is almost useless, if you do not additionally handle key events, the click handler will not fire on pressing enter/space if the element is not a link/button. Obviously links should only be used for navigation. In addition to being triggered on enter/space the element should also be given role=button.

All of this is wasted effort, you can just use a regular button, as intended. "when a button is too small" is thinking about a button as fixed visual concept, all you have to do is style it accordingly. Usually I just add a CSS class that removes all default styling for this purpose, it is way easier than trying to create all the interactivity and accessibility features from scratch.

.bare-button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

(This might need additional properties, depending on what other styles you have applied.)

from carbon-icons-svelte.

I will commit to communicating breaking changes more explicitly.

from carbon-icons-svelte.