emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
7.69k stars 237 forks source link

Setting props on list item #421

Open basickarl opened 1 month ago

basickarl commented 1 month ago

Describe the feature / bug 📝:

Hi, I'm trying to set the tabIndex value of the parent container to -1 of a toast item. As you see in the image below it is currently not at -1 and I cannot see how I can change this.

image

I believe the tab indexing is targeting the li element. Is there currently a way to set the props on a list item as this would fix the issue? I checked the API documentation and I don't see that it is possible.

It would be cool of it was done via something like this:

  toast(<div>A custom toast with default styling</div>, {
    duration: 5000,
    props: {
      tabIndex: -1,
    },
  });

This would only spread the props onto the list item and not affect any other toasts.

Steps to reproduce the bug 🔁:

  1. Create a custom toast via the custom code: https://sonner.emilkowal.ski/toast#custom
  2. Make the toast appear.
  3. Press tab, it will select the toast.
emilkowalski commented 1 month ago

Why would you do that out of curiosity? That would make the toasts inaccessible.

basickarl commented 1 month ago

I'm setting tabIndex manually on my custom components inside of the toasts, so they will be accessible.