carbon-icons-svelte
carbon-icons-svelte copied to clipboard
carbon-design-system
Mention breaking changes of upstream library in release notes?
v11 comes with the breaking changes of @carbon/icons, I specifically noticed that the Delete icon was gone and found out that TrashCan is what should be used (descriptive over semantic 👍).
Apparently Delete along with several other other icons has been removed as it had been previously deprecated.
Not sure why this is marked as "feature" in the release notes 😅
New features 🚀
Also, the lack of a closing } here bugs me:
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
@Addeuz That should not be done anyway because of accessibility. If something should be clickable, it should be wrapped in a button or link.
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.
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.)
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>