Fix accessibility issues in Adaptive Cards library

[compulim]

Fixes #3949.

Changelog Entry

Fixed

• Fixes #3949. For accessibility reasons, buttons in Adaptive Cards should be role="button" instead of role="menubar"/role="menuitem", by @compulim, in PR #4263

Description

ActionSet/Action in AC is currently menubar/menuitem respectively. For accessibility reasons, actions should be button. This will help end-users who use screen reader to reach the action button via B/F keys.

We should also consider updating the instruction text for indicating how to navigate. Currently, it is "Message is interactive. Press SHIFT TAB two to three times to go to the chat history. Then select the message".

As ActionSet/Action are now buttons (form fields), we might be able to simplify it to "Message contains form fields."

This pull request will also refactor existing hacks into a more consumable/pluggable pattern.

Design

We have isolated our DOM hacks to Adaptive Cards in a separate folder:

• Re-rendering should keep focus
• Re-rendering should keep values
• Adaptive Cards can be disabled
• ActionSet should not be role="menubar"
• Action should set aria-pushed attribute

We added a new internal useAdaptiveCardModEffect() hook to apply/undo DOM hacks. These hacks, need to undo right before we re-render, and right after we mount it on the DOM:

• Undo before re-render
  • Re-render could potentially unmount part of the DOM, say, hiding part of the card using Action.ShowCard
  • Some hacks, such as "persist user input values", are using the "undo mod" stage to save the values, then reapply the values during the "apply mod" stage
  • Thus, the "undo mod" stage should always run before re-render
• Reapply right after mounted
  • Some hacks, such as "persist user focus", need the Adaptive Cards to be mounted on the DOM tree. Otherwise, it will be no effect
  • Say, setting focus on an element which is not visible/mounted, is no-op
  • Thus, the "apply mod" stage should always run right after the DOM node is mounted

Other designs

After Adaptive Card is rendered as an unmounted DOM tree, it could be walked using standard DOM traversal functions. When walking the DOM tree, we could programmatically turn it into React.

This approach leverage DOM reconciliation in React, which helps re-render.

However, for other hacks, we will need to modify the walking mechanism and apply the hack while walking the tree. This could be very difficult to add mods that requires traversing multiple nodes. The mod will be more-or-less similar to translating a DOM tree based purely on SAX interface, which could be very difficult to get done.

Thus, we are keeping our hacks as DOM-based, instead of React-based.

Specific Changes

• Added infrastructure to apply/undo DOM hacks (a.k.a. mod) we done to Adaptive Cards
• Upgraded a legacy test adaptiveCards.js/disable card inputs

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