Fix ARIA role of transcript when connection is pending

[beyackle2]

Fixes #4393.

Changelog Entry

Fixed

• Fixes #4393. Renders <section role="feed"> only if there are one or more activities contained within, by @beyackle2 and @compulim, in PR #4420

Description

The <section role="feed"> should not be emptied and should have at least one <article> or role="article".

When the chat is started, it is initially empty. We should not render <section role="feed">.

Design

We tried <section role="feed" aria-busy="true">, however, Accessibility Insights still say the element is violating "WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them".

We have 2 options:

1. Render <section> without role attribute, and set role="feed" when it has contents
2. Do not render <section role="feed"> if it is empty

We went on the second option as we worry the first one might cause issues in some screen readers.

Specific Changes

• Not rendering <section role="feed"> when it is empty

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[ghost]

All CLA requirements met.

[compulim]

Need tests and this will be puuuuurfect. 😽

[compulim]

Looks like aria-busy="true" won't help with the accessibility issue. Few things we could try:

• Change role to something else until the first message come
• Inject an invisible "the chat history is empty" in the transcript before the first message

[compulim]

@beyackle2 Few things I changed:

• Now, it renders <section role="feed"> if there are any contents
• For tests, I am adding this DOM integrity test to verifyDOMIntegrity.js, which is a tiny version of axe-core
  • Ultimately, we should use axe-core and replace verifyDOMIntegrity.js (outlined in Add Microsoft FastPass or axe-core to our test suite #3716)
  • However, axe-core is using a non-MIT license so we need to do something extra before using it
  • Thus, we have the tiny verifyDOMIntegrity.js as a stopgap for now

Please let me know if it looks good to you.