Progress-Bar accessibility warning

[andoulla]

Do you want to request a feature or report a bug?
Improvement

What is the current behavior?
Currently, the toast fails our accessibility testing (we use https://github.com/dequelabs/axe-core) as the progress bar doesn't have an aria-progressbar-name label. Even when hideProgressBar is enabled, the test still fails as the progress bar div is still present in the dom but not shown.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

Would it be possible to
a) add some aria-labelling on the progress-bar element of the component
b) not render the progress bar when hideProgressBar is set to true

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
N/A

Component configuration

<ToastContainer
      aria-live="assertive"
      draggable={false}
      pauseOnFocusLoss={false}
      hideProgressBar
      position="top-center"
      transition={Zoom}
      {...props}
    />

HTML output

          <div
            class="Toastify"
          >
            <div
              class="Toastify__toast-container Toastify__toast-container--top-center sx8m832"
            >
              <div
                class="Toastify__toast Toastify__toast--default enter"
                id="5w0vchmpb"
              >
                <div
                  class="Toastify__toast-body"
                  role="alert"
                >
                  Message
                </div>
                <button
                  aria-label="close"
                  class="Toastify__close-button Toastify__close-button--default"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    viewBox="0 0 14 16"
                  >
                    <path
                      d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
                      fill-rule="evenodd"
                    />
                  </svg>
                </button>
                <div
                  class="Toastify__progress-bar Toastify__progress-bar--animated Toastify__progress-bar--default"
                  role="progressbar"
                  style="animation-duration: 5000ms; animation-play-state: running; opacity: 0;"
                />
              </div>
            </div>
          </div>
 

[fkhadra]

@andoulla thanks for reporting the issue. I'm planning to launch the next release during the coming week. I'll add this to my backlog