Add axe-core and fix tests

[compulim]

Fixes #4650

Changelog Entry

Breaking changes

• When activity.channelData['webchat:fallback-text'] is present but empty, it will no longer applies aria-hidden to the activity
  • The activity will not be narrated through live region. However, when navigating the transcript, it will be narrated as empty
  • To make an activity presentational or hide from screen reader, please use activityMiddleware to customize the rendering

Added

• Resolved #4650. Added automated accessibility check using axe-core
  • Add axe-core in end-to-end tests, by @compulim, in PR #4704
  • HTML test: using <main> for the root container, by @compulim, in PR #4684 and PR #4704
  • HTML test: changed contrast ratio in tests that use different background colors, by @compulim, in PR #4686 and PR #4704
  • Added ponyfill prop to <ReactWebChat>/<Composer> and createStoreWithOptions, by @compulim, in PR #4662
    • This is for development scenarios where fake timer is needed and will only applies to Web Chat only
  • HTML test: fix accessibility issues on HTML file, by @compulim, in PR #4685
  • HTML test: ensure all images has alternate text, by @compulim, in PR #4704
  • Adaptive Cards: always set role attribute, by @compulim, in PR #4704
  • Adaptive Cards: update host config to use lighter color for disabled inputs, by @compulim, in PR #4704
  • Keyboard help screen: remove <header> container, by @compulim, in PR #4704
  • Live region: added <label> for input fields in Adaptive Cards, by @compulim, in PR #4704

Description

Add accessibility checker (axe-core) in our end-to-end tests and runs it after taking every screenshots and before completion of the test.

Design

Specific Changes

• Add axe-core as window.checkAccessibility() and run after every host.snapshot() and host.done()
• For activity.channelData['webchat:fallback-text'] is empty, it will no longer set aria-hidden
• Adaptive Cards: always set role attribute to form if it has any input fields and is valid as a form, otherwise, figure
• Adaptive Cards: updated host config to use lighter color for disabled controls (align with Edge)
• YouTube/Vimeo: added title to the <iframe>
• Keyboard help: remove <header> as it is "page header" but not "dialog header"
• Updated ponyfill sanity check
• Updated some tests
  • HTML tests: ensure <main> is on every test
  • HTML tests: updated custom color scheme for some tests to ensure contrast ratio
  • HTML tests: ensure all images has alt text
  • Live region: added to for "simplified rendering of Adaptive Cards"
  • HTML tests: update test panels to conform with accessibility requirements
• Updated MockBot
  • Subtle color should not be used for non-white Adaptive Cards

• 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)