Fixes #3354.

Changelog Entry

Added

• Resolves #3354. Added access key (ALT + SHIFT + A for Windows and CTRL + OPTION + A for Mac) to suggested actions, by @compulim, in PR #3367

Description

Adding access key to suggested actions. Screen reader texts are updated to reflect this change.

Instead of using HTML's accesskey attribute, we are using our own implementation for a few reasons:

• Cross platform consistency
• Access key is only available when the focus is inside Web Chat component

Specific Changes

• Added new sub-component AccessKeySink to handle the sinking of keyup events related to access keys
  • Include useFocusAccessKeyEffect hook for handling access key for focusing
• Added suggestedActionsAccessKey prop to <Composer>
• Added internal useLocalizeAccessKey hook to localize access key into string
• Added internal useNavigatorPlatform hook to identify platform
  • Different platform prefer different access key modifiers
• Updated en-US.json and yue.json for new loc strings

Additional Context

__tests__/suggestedActions.js

One of the original snapshot for __tests__/suggestedActions.js is incorrect. It produce the following result when styleOptions is set to { suggestedActionLayout: 'stacked', suggestedActionsStackedHeight: 50 }.

We should not render wrong layout with default style options. We should also put some efforts to make sure devs can't mess up the UI too far.

• Testing Added