Accessiblity questions

[vaaralav]

Thanks for the awesome project! I've been using this in handful of projects and it just works ❤️

Have you considered taking steps to make the notifications more accessible?

Currently the toasts doesn't have role="alert" on them by default so at least VoiceOver won't read the notifications. If that attribute is given to the toast content eg. toast(<span role="alert">Wow so easy!</span>) VoiceOver reads "Wow so easy!" twice when the toast appears and once more when the toast disappears. I believe that has to do with Transition wrapper, but I'm not sure.

Another small thing that could be more accessible is the DefaultCloseButton. VoiceOver reads it now as "multiplication symbol, button". If the button was defined like below the button would be read "close, button".

function DefaultCloseButton({ ariaLabel, closeToast, type }) {
  return (
    <button {...rule(type === 'default')} type="button" onClick={closeToast} aria-label={ariaLabel}>
      ✖
    </button>
  );
}

DefaultCloseButton.propTypes = {
  closeToast: PropTypes.func,
  ariaLabel: PropTypes.string,
};

DefaultCloseButton.defaultProps = {
  ariaLabel: 'close'
}

[vaaralav]

Here's a sandbox with the <span role="alert">Wow so easy!</span> toast example: https://codesandbox.io/s/8zw2815229

[fkhadra]

Hello @vaaralav,

I really appreciate your feedback, thanks a lot!

VoiceOver reads "Wow so easy!" twice when the toast appears and once more when the toast disappears.

This is probably due to the transition like you suggested.

Adding accessibility could only make the library better. I will work on it for sure.

[fkhadra]

Hey @vaaralav,

The library is a bit more accessible :). If you have any remarks please tell me

[timrodz]

Hey @fkhadra,

I've been testing this library with accessibility, and I'm still getting the screen-reader saying the message twice (upon entering and exiting the transition). My setup is like so:

const transition = cssTransition({
    enter: styles.transitionIn,
    exit: styles.transitionOut,
    duration: [350, 200],
})

const Toast = () => (
    <div aria-live="polite">
        <ToastContainer
            hideProgressBar
            position="bottom-center"
            className={styles.container}
            toastClassName={styles.wrapper}
            bodyClassName={styles.body}
            autoClose={6000}
            transition={transition}
            role="alert"
        />
    </div>
)

[tannakartikey]

@timrodz this is quite old now so not sure if it is helpful to you anymore. Adding role and aria-live both would create the double speaking issue on iOS.
Doc link: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#roles_with_implicit_live_region_attributes

To maximize compatibility, some people recommend adding a redundant aria-live="assertive" when using this role. However, adding both aria-live and role="alert" causes double speaking issues in VoiceOver on iOS.