Accessibility on focus management and disable Adaptive Cards

[compulim]

Fixes #1427. Fixes #2669.

Changelog Entry

Added

• Fixes #1427. Support disabled prop and added actionPerformedClassName in Adaptive Card and other legacy cards, by @compulim in PR #3150

Fixed

• Fixes #2669. The "New messages" button will be accessible through TAB key, inbetween the last read and last unread activities, by @compulim in PR #3150.

Changed

• Bumped all dependencies to latest versions, by @compulim in PR #2985, #3012 and #3150
  • Production dependencies
    • component
      • [email protected]
      • [email protected]

Samples

• Resolves #1427, added disable cards after submission sample, by @compulim in PR #3150

Description

This will provide a better accessibility and UX for answering prompts via Adaptive Card and other cards.

Fixed accessibility around focus management on the "New messages" button and how UIs are disabled.

Specific Changes

Note: in the screen recordings, the dotted line for focus is only shown for illustrative purpose only. It is not going into production code.

Accessibility for disabled elements

Disabled elements will have the focus retained on them temporarily. When the user focus to another element, the disabled element will have disabled attribute set, thus they will not be able to TAB back once TAB out.

Excerpt from code comment

Differences between <button> and <AccessibleButton>:

• Disable behavior
  • When the widget is disabled
    • Set aria-disabled attribute to true
    • Set readonly attribute
    • If the focus is on, don't set disabled attribute, until it is blurred
      • Otherwise, set disabled attribute
    • Remove onClick handler
  • Why we need this
    • Browser compatibility: when the widget is disabled, different browser send focus to different places
    • When the widget become disabled, it's reasonable to keep the focus on the same widget for an extended period of time
      • When the user press TAB after the current widget is disabled, it should jump to the next non-disabled widget

Developers using this accessible widget will need to:

• Style the disabled widget themselves, using CSS query :disabled, [aria-disabled="true"] {}
• Modify all code that check disabled through disabled attribute to use aria-disabled="true" instead
  • aria-disabled="true" is the source of truth
• If the widget is contained by a <form>, the developer need to filter out some onSubmit event caused by this widget

Correct tab order for "New messages" button

"New messages" button is appended after the last read activity, but not last shown activity. I.e. this make the button TAB-able.

Additional context

• [email protected] -> @2.1.0
• [email protected] -> @2.0.0

---

• Testing Added