Announce card action buttons as buttons, describe pressed actions as Selected

[Eugene (OEvgeny)]

Fixes #5716, fixes #5719, fixes #5745, fixes #5750

Changelog Entry

Changed

• 💥 Card action buttons the user pressed are styled with the adaptive-card-renderer__action--selected class instead of [aria-pressed='true']: host CSS that targets .ac-pushButton[aria-pressed='true'] should target .ac-pushButton.adaptive-card-renderer__action--selected instead, in PR #5900, by @OEvgeny

Fixed

• Fixed card action buttons, such as Adaptive Card actions and hero card buttons, being announced as toggle buttons that could not be turned off: they are now buttons, and pressed actions are described as "Selected", fixes #5716, #5719, #5745, and #5750, in PR #5900, by @OEvgeny

Description

Card action buttons had aria-pressed, so screen readers announced "toggle button, off", and a pressed button stayed "on" when pressed again, which is not how ARIA defines a toggle button. The buttons are now plain buttons. Pressed buttons are described as "Selected" through aria-describedby, so the choice is still announced (#3622), and they keep their selected style through a class.

Design

• Decision: aria-describedby points to a hidden, localized "Selected" text (new string ADAPTIVE_CARD_ACTION_SELECTED_ALT; other languages fall back to English until translated).
• Decision: the selected style uses the adaptive-card-renderer__action--selected class in the default and Fluent themes; actionPerformedClassName is still added next to it.
• Open question: should Web Chat keep a compatibility selector for one release? Host CSS on [aria-pressed='true'] only keeps matching if the buttons keep aria-pressed, which is what these issues report.

Specific Changes

• useActionShouldBePushButtonModEffect: no longer sets aria-pressed; the pressed action gets the selected class and aria-describedby; the comment now names Action.ShowCard as the exception

• AdaptiveCardRenderer: renders the hidden "Selected" text and passes its ID and the selected class to the mod

• durableAddClassWithUndo: accepts space-separated class names

• AdaptiveCardRenderer.module.css, Fluent PartGroupingDecorator.module.css, and the deprecated adaptiveCardRenderer style set: the selected style uses the class instead of [aria-pressed='true']

• AdaptiveCardsStyleOptions: cardPushButtonBackgroundColor and cardPushButtonTextColor JSDoc describe the selected button

• useDisabledModEffect: the comment now names Action.ShowCard as the exception

• en-US.json: added ADAPTIVE_CARD_ACTION_SELECTED_ALT

• Added accessibility/adaptiveCard/selectedAction.html, with Fluent and Copilot variants; it also asserts that actionPerformedClassName (several classes) is applied to the pressed actions

• ariaPushed.html, hack.actionShouldBePushButtonMod.html, and richCard/heroCard.pushButton.focusVisible.html: assert the "Selected" description instead of aria-pressed

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

[Eugene (OEvgeny)]

I'll do validation tomorrow.