fix: Screen reader not announcing Adaptive Card content in stacked layout

Screen readers (Narrator/NVDA) were not announcing Adaptive Card content
when focused because stacked layout attachment rows lacked tabIndex and
cards without the `speak` property had no aria-label for screen readers
to announce.

- Add `tabIndex={0}` to stacked layout AttachmentRow for keyboard focus
- Add focus-visible styling using existing CSS custom properties
- Derive `aria-label` from card text content when `speak` is not set

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: uzirthapa

CHANGELOG.md

@@ -363,6 +363,10 @@ Breaking changes in this release:
 
 ### Fixed
 
+- Fixed screen reader (Narrator/NVDA) not announcing Adaptive Card content when focused in stacked layout, by [@uzirthapa](https://github.com/uzirthapa)
+   - Made stacked layout attachment rows keyboard-focusable with `tabIndex={0}`
+   - Added focus-visible styling for stacked attachment rows
+   - Adaptive Cards without `speak` property now derive `aria-label` from visible text content
 - Fixed [#5256](https://github.com/microsoft/BotFramework-WebChat/issues/5256). `styleOptions.maxMessageLength` should support any JavaScript number value including `Infinity`, by [@compulim](https://github.com/compulim), in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/pull/5255)
 - Fixes [#4965](https://github.com/microsoft/BotFramework-WebChat/issues/4965). Removed keyboard helper screen in [#5234](https://github.com/microsoft/BotFramework-WebChat/pull/5234), by [@amirmursal](https://github.com/amirmursal) and [@OEvgeny](https://github.com/OEvgeny)
 - Fixes [#5268](https://github.com/microsoft/BotFramework-WebChat/issues/5268). Concluded livestream is sealed and activities received afterwards are ignored, and `streamSequence` is not required in final activity, in PR [#5273](https://github.com/microsoft/BotFramework-WebChat/pull/5273), by [@compulim](https://github.com/compulim)

packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardHacks/useRoleModEffect.ts

@@ -34,8 +34,22 @@ export default function useRoleModEffect(
   adaptiveCard: AdaptiveCard
 ): readonly [(cardElement: HTMLElement) => void, () => void] {
   const modder = useMemo(
-    () => (_, cardElement: HTMLElement) =>
-      setOrRemoveAttributeIfFalseWithUndo(
+    () => (_, cardElement: HTMLElement) => {
+      // If the card doesn't have an aria-label (i.e. no "speak" property was set),
+      // derive one from the card's visible text content so screen readers can announce it.
+      let undoAriaLabel: () => void = () => {};
+
+      if (!cardElement.getAttribute('aria-label')) {
+        const textContent = (cardElement.textContent || '').replace(/\s+/g, ' ').trim();
+
+        if (textContent) {
+          const label = textContent.length > 200 ? textContent.slice(0, 200) + '\u2026' : textContent;
+
+          undoAriaLabel = setOrRemoveAttributeIfFalseWithUndo(cardElement, 'aria-label', label);
+        }
+      }
+
+      const undoRole = setOrRemoveAttributeIfFalseWithUndo(
         cardElement,
         'role',
         // "form" role requires either "aria-label", "aria-labelledby", or "title".
@@ -44,7 +58,13 @@ export default function useRoleModEffect(
           cardElement.getAttribute('title')
           ? 'form'
           : 'figure'
-      ),
+      );
+
+      return () => {
+        undoRole();
+        undoAriaLabel();
+      };
+    },
     []
   );
 

packages/component/src/Activity/AttachmentRow.tsx

@@ -35,7 +35,7 @@ function AttachmentRow(props: AttachmentRowProps) {
   const classNames = useStyles(styles);
 
   return (
-    <div aria-roledescription="attachment" className={classNames['stacked-layout__attachment-row']} role="group">
+    <div aria-roledescription="attachment" className={classNames['stacked-layout__attachment-row']} role="group" tabIndex={0}>
       <ScreenReaderText text={attachedAlt} />
       {showBubble ? (
         <Bubble

packages/component/src/Activity/StackedLayout.module.css

@@ -52,6 +52,16 @@
   .stacked-layout__attachment-row {
     margin-block-start: var(--webchat__padding--regular);
     width: 100%;
+
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus-visible {
+      outline: var(--webchat__border-width--transcript-visual-keyboard-indicator)
+        var(--webchat__border-style--transcript-visual-keyboard-indicator)
+        var(--webchat__color--transcript-visual-keyboard-indicator);
+    }
   }
 
   &.stacked-layout--no-message .stacked-layout__attachment-list .stacked-layout__attachment-row:first-child {