Close button aria-label doesn't say what the actual button does

[johngnapp]

Hi,

The aria-label attribute for the close button is set to "toast" in ToastrBox.js. When using a screen reader this gets announced as "toast button", so it's not obvious what the button is for.

It'd be great if the attribute could be updated to "dismiss" or "dismiss message" so that it's clear what will happen when you press the button.

Thanks!

[thandrade88]

I solved doing this

options: {
...
showCloseButton: false,
        component: props => {
          return (
            <div className="rrt-right-container">
                  <button
                    onClick={props.remove}
                    tabIndex="0"
                    type="button"
                    className={`close-toastr toast-close-button toastr-control`}
                    aria-label={text you want}
                  >
                    ✕
                  </button>
            </div>
          );
}

in Options, set showCloseButton as false and in component you add a new button

[diegoddox]

Will close but feel free to reopen

[perkeletto]

For accessibility reasons it would be great if you could make it an option to give custom aria-label for the close button. "Status message....toast button" is not great result when using screen reader

atleast change it desribe the button better than "Toast button", though this would not help in my case as i need to be able to have it in my language