[#1730, #1773, #1820, #1849]Added screen reader alerts for various actions throughout the app.

[tonyanziano]

#1730, #1773, #1820, #1849

===

• Added ariaAlertService.ts in packages/app/client
  • creates an invisible <span> with role="alert" that will be read by any screen reader technologies and then removed after 5 seconds

• Added screen reader alerts for the following actions:
  • saving app settings
  • bot URL validation messages in Open Bot dialog
  • hiding, showing, and copying bot secret in Create Bot dialog
  • navigating to previous and next bot states in the inspector
  • toggling diff mode in the inspector
  • copying JSON in the inspector
• Fixed accessibility around bot secret input in Create Bot dialog
  • previously, secret input was always disabled, so it was invisible to screen readers
  • secret input is now read-only
  • fixed label on secret input (was not being narrated before)

[coveralls]

Coverage remained the same at ?% when pulling 58afba4 on toanzian/sr-toast into e8b9ede on master.

[corinagum]

Some questions/suggestions before approval :)

[corinagum]

should we also make it a 0x0px <div> so in the unlikely chance it gets on screen, it's still invisible?

[tonyanziano]

I tried this and you can't hide an element with text content: Example

I could give it an opacity of 0, but some screen readers do not read content with an opacity of 0.

[corinagum]

Oh yeah, I meant should we change it from <span> to <div> so that it is adjustable to 0px by 0px. Fiddler shows that as working with overflow: hidden
https://jsfiddle.net/sxygke3n/1/

[corinagum]

(also good to know about the opacity 0 thing, I didn't know that)

[tonyanziano]

Addressed feedback

[corinagum]

Up to you on whether you want to implement <span> to <div> with overflow hidden. I still think it's a good idea.

[tonyanziano]

@corinagum oh duh, overflow. I'll add that to the CSS. Good call

[corinagum]

Awesome! :D