fix(ProgressBar): improve screen reader output

[dakahn]

Closes #11420

JAWS was reading every helper text update (which numbered in the hundreds) and had a super verbose output. This PR hides the hleperText from JAWS and instead has a visually hidden live region that describes the ProgreesBar as 'loading' or 'done' depending on the state of isFinished.

Testing / Reviewing

With a screen reader reload the page. The progress bar should describe itself and then tell the user it's loading. when it's finished it should then update the user by saying 'done'

Notes

@mbgower let me know if this is what you were shooting for in that issue ticket. I'm hiding the progress bar via aria-busy like you suggested, but its worth noting that in my research it seems like that attribute might be intended for a loading region of a page--which i guess this progressbar could count as.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	b633d5c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/62c6fa4954ec40000991af3c
😎 Deploy Preview	https://deploy-preview-11698--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	b633d5c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/62c6fa49a564a5000923cd4e
😎 Deploy Preview	https://deploy-preview-11698--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[mbgower]

Thanks, @dakahn I'll have a look.
I do see aria-busy cited by mozilla
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role

It sounds like maybe you were pushing valuenow updates a lot? I haven't looked behind the scenes to see the cause, but in my experience screen readers usually announce a few percentage points when loading, which tends to be adequate for most situations.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow

[mbgower]

So, @dakahn what you are describing ("JAWS was reading every helper text update (which numbered in the hundreds) and had a super verbose output") does not match my experience (or my origainl issue) with the Progress Bar example, which in both the live react repo and your deployment have virtually identical output during the progress bar 'load' which is that they announce a couple of times (which is fine).
The big difference in your update is that Jaws announces "Done" when complete, as does NVDA. That is an improvement. This change is definitely worth it for that.

Note that the other things I had mentioned was the 'partially checked' output. I'm not hearing it in anymore -- but on both live and your preview! I am wondering why the behaviour seems to have changed for me. You haven't pushed anything yet, right?

[dakahn]

@mbgower right yeah there have been no updates on my end other than what you tested. i did have a jaws update when i fired it up yesterday though? maybe thats what changed?

[jnm2377]

@dakahn Is this what I should be seeing? I may be testing it wrong.

Screen.Recording.2022-06-30.at.5.23.14.PM.mov

[dakahn]

@jnm2377 Pretty much! make sure you're testing VO in Safari though as it can get a little whacky in other browsers