Screen reader: support "do primary action"

[compulim]

Related to #4020. Related to #4021.

Changelog Entry

Fixed

• Fixes #4020. With or without scan mode turned on, screen reader users should be able to press ENTER to focus on interactive activity, by @compulim, in PR #4041
• Fixes #4021. For screen reader usability, suggested actions container should not render "Is empty" alt text initially, by @compulim, in PR #4041

Description

This pull request will resolve 2 accessibility issues:

• When using screen reader with scan mode enabled, the ENTER key should continue to send the focus to the first tabbable element of the focusing activity
• The alt text "Suggested actions Container: Is empty" is confusing screen reader user when they were never taught about the suggested actions feature

Design

Capture ENTER while scan mode is enabled

When using screen reader with scan mode, the ENTER key will be captured by the screen reader and redirected as "do primary action". In browser term, it will send click event to the currently navigating element.

The element may not be the physical focus (i.e. not represented by document.activeElement). Instead, the element could be a pseudo-focus and only know to the screen reader software (e.g. a blue box drawn by Windows Narrator).

Although not well-documented, we found that when "do primary action" is triggered, the screen reader will:

1. Check if the currently navigating element (denoted by blue box) has click event handler or not
2. If yes, then send a click event to that element
3. If no, the screen reader will narrate and say the element do not have any actions

In order to capture ENTER key while scan mode is enabled, we need to add an onClick handler to the activity. In additional to the current onKeyDown handler on the transcript.

Alt text of suggested actions container is confusing

When the suggested actions were never shown, the screen reader navigating elements across the page may come across with "Suggested action container: Is empty".

The alt text was introduced because of an accessibility requirement. But it also created confusion to the user because they never encounter the suggested actions and don't know what to do.

When Web Chat is initially rendered, we could hide (not rendering) the suggested actions container. Thus, the alt text will never be read by the screen reader.

When the bot sent any suggested actions, we will start rendering the suggested actions container from that point of time. And the alt text "Suggested action container: Is empty" will be narrated by the screen reader afterward.

Specific Changes

• <BasicTranscript>
  • Refactored focusInside() function to focus on the inner of an interactive activity
  • Added onClick handler for interactive activity, this will serve as "primary action" for screen reader
  • The existing onKeyDown handler will call focusInside() for a true ENTER key (not captured by screen reader)
• <SuggestedActions>
  • Initially rendering the container will not render the alt text, or the container itself
  • When the first suggested action arrives, it will render the container, including the alt text
  • After one of the suggested actions is clicked, it will continue to render the container, including the alt text
• Updated test reliability for the following tests:
  • packages/directlinespeech/__tests__ temporarily disable tests related to "internal HTTP support", will re-enable in Re-enable Direct Line Speech "internal HTTP" tests #4053

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