Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duplicated Nested Close Buttons after update #235

Open
pantomash opened this issue Jun 23, 2021 · 2 comments
Open

Duplicated Nested Close Buttons after update #235

pantomash opened this issue Jun 23, 2021 · 2 comments

Comments

@pantomash
Copy link

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
Copy link

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
Copy link
Owner

Stabzs commented Jun 29, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants