DEV Community

loading...

Discussion on: 🚀 Svelte Quick Tip: Creating a toast notification system

Collapse
geoffrich profile image
Geoff Rich

Wow you get these out fast 😅

It's good to see role="alert" on the toast for accessibility!

It would also be good to make sure the close button has an accessible name and focus styles for keyboard and assistive tech users. Otherwise the button will receive focus, but not indicate its purpose.

<button class="close" on:click={() => dispatch("dismiss")}>
    <!-- 
        This provides a name that will be read out by screen readers, 
        but not shown visually 
    -->
    <span class="visually-hidden">Close</span>
    <CloseIcon width="0.8em" />
</button>

<style>
    button:focus {
        outline: 1px solid black;
        outline-offset: 2px;
    }
    /* from https://piccalil.li/quick-tip/visually-hidden */
    .visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: auto;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        white-space: nowrap;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
danawoodman profile image
Dana Woodman Author

Haha thanks Geoff! Will update the article, good feedback 💯

Forem Open with the Forem app