Stabzs / Angular2-Toaster

Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library
MIT License
334 stars 93 forks source link

Duplicated Nested Close Buttons after update #235

Open pantomash opened 3 years ago

pantomash commented 3 years ago

I have overrided close button html. In version 8.0.0 generated code was looking fine. After update to newest version 11.0.1 that was needed to update Angular, generated code looks different. Now my custom close button is wrapped by generated button element.

 toasterConfig = new ToasterConfig({
    tapToDismiss: true,
    mouseoverTimerStop: true,
    animation: 'fade',
    timeout: {
      error: NOTIFICATION_TIMEOUT_NONE,
      success: NOTIFICATION_TIMEOUT,
      warning: NOTIFICATION_TIMEOUT,
    },
    showCloseButton: true,
    closeHtml: `<button aria-label="Close" class="toast-close-button">x</button>`,
  })

image

skrzepij commented 3 years ago

I think it will be great to set a new optional @Input for the aria-label value as this is a missing part of accessibility in the hardcoded button element.

Stabzs commented 3 years ago

Correct, in 11.0.0 styles and layout were reworked to create more consistent layout across devices. It also cuts down on the amount of boilerplate magic string content that needs to be provided just to add a button.

It looks like some of the documentation incorrectly still suggests adding explicit <button></button> html for the close button which needs to be updated. In your case @pantomash, your closeHtml simply becomes closeHtml: x.

However, this doesn't solve the issue of binding aria-label and/or classes. I think your idea of an input binding @skrzepij should work and I'll look into getting that change in soon.