[Accessibility] Put aria-live region outside of transcript

[compulim]

Background

Instead of putting the aria-live region into the transcript, we can create another <ul> container with the aria-live="polite" and it contains only the screen reader text.

Since the screen reader text could be "scanned" by the user later, we can mitigate it by removing the narrating element after 2 seconds. So they can't really interact with them. 2 seconds should be enough to "queue" the element into screen reader.

<ul aria-live="polite">
  <li>Bot said, this is the first message. Sent at 12:34 PM.</li>
  <!-- Read by screen-reader only during aria-live. We can remove it after 2 seconds. -->
</ul>
<ul>
  <li>
    <div>This is the first message.</div>
    <!-- This is visualized, and latter, accessible through scan mode of screen reader. This one may have interactive buttons. -->
  </li>
</ul>

Action items

• Create a separate container with aria-live="polite" and it only contains what we want the screen reader to narrate
  • We will clean up this container after 2 seconds, to prevent the user from interacting with non-interactive content in this container
• Leave the existing visualized transcript, as long as it does not have aria-live="polite", it is fine. The user will interact with buttons in this tree
• Remove role="log"
  • It is okay to not having role="log" or role="feed" on our transcript, role="list" and role="listitem" should be sufficient
  • We could also use aria-label="transcript" for "role renaming"

2020-06-26 Update

Making a new branch with multiple fixes, https://github.com/compulim/BotFramework-WebChat/tree/fix-a11y-post-4.9.1.

• Live region is now in a separated-but-invisible DOM tree
  • New message arrived, will show up in this DOM tree for 100 ms, screen reader will queue it
  • After 100 ms, the message will be removed from this DOM tree to workaround bugs in browsers
  • The message in live region will not announce the attachment content, it will only say
    - "Bot said: Hi I am Clara. 1 attachment. Sent at June 25 12:34 PM"
    - This is a technical barrier: as we have 2 DOM trees for the same transcript, we prefer not to render attachments twice
• Messages should be read in correct order
  • Due to distributed system nature in the backend, messages are arriving randomly, we sort the DOM tree by timestamp
    • For users who can see, messages are in correct order
    • For users who are using screen reader, messages appears to be out of order, because screen reader is first-come-first-serve
  • Since most bot message comes with a "reply to ID", I am using this as a hint to momentarily delay messages that their "reply to" was not arrived yet
• Cleaned up accessibility text
  • "User said" -> "You said"
  • "Bot/user sent" -> "Bot/user attached"
  • The narration for live region is "Bot said: Hi I am Clara. 1 attachment. Sent at June 25 12:34 PM."
  • The narration for transcript (e.g. scan/browse mode) is "Bot said: Hi I am Clara. Bot attached: Yes button, No button. Sent at June 25 12:34 PM."
• Change widget disable logic from "disable on blur" to "set tabindex="-1""
• When disabling an Adaptive Card, don't set tabindex="-1" on its root <div>
• Do not strip Markdown from text marked as plain text
• Links in Markdown can be navigated by screen readers (fixing bug [Accessibility][Screen Reader][JAWS] - Activating the focused links not working with JAWS  #3176)
• Added some aria-roledescription to make the screen reader narration more friendly

[corinagum]

Great idea