fix: Remove tabIndex and focus CSS from AttachmentRow to avoid test failures

Reverted tabIndex={-1} on AttachmentRow and focus CSS on
StackedLayout since they could interfere with existing focus traps
and cause test failures. The core fix (aria-label derivation from
text content in useRoleModEffect) is sufficient for screen readers
to announce Adaptive Card content via browse mode.

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

Author: uzirthapa

CHANGELOG.md

@@ -363,10 +363,8 @@ 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 screen reader (Narrator/NVDA) not announcing Adaptive Card content in stacked layout, by [@uzirthapa](https://github.com/uzirthapa)
+   - Adaptive Cards without `speak` property now derive `aria-label` from visible text content so screen readers can announce card 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)

__tests__/html2/accessibility/adaptiveCard/attachmentRow.focusable.html

@@ -58,29 +58,20 @@
 
         const attachmentRows = document.querySelectorAll('[aria-roledescription="attachment"]');
 
-        // Both attachment rows should be programmatically focusable via tabIndex="-1".
+        // Both attachment rows should exist with proper a11y attributes.
         expect(attachmentRows).toHaveProperty('length', 2);
-        expect(attachmentRows[0].getAttribute('tabindex')).toBe('-1');
-        expect(attachmentRows[1].getAttribute('tabindex')).toBe('-1');
-
-        // Both should have role="group".
         expect(attachmentRows[0].getAttribute('role')).toBe('group');
         expect(attachmentRows[1].getAttribute('role')).toBe('group');
 
-        // Focus on the first attachment row and verify it receives focus.
-        attachmentRows[0].focus();
-
-        await pageConditions.became(
-          'focus is on the first attachment row',
-          () => document.activeElement === attachmentRows[0],
-          1000
-        );
+        // The Adaptive Cards inside should have aria-labels derived from text content.
+        const firstCard = attachmentRows[0].querySelector('.ac-adaptiveCard');
+        const secondCard = attachmentRows[1].querySelector('.ac-adaptiveCard');
 
-        // The Adaptive Card inside should have an aria-label derived from text content.
-        const card = attachmentRows[0].querySelector('.ac-adaptiveCard');
+        expect(firstCard.getAttribute('aria-label')).toContain('First card content');
+        expect(firstCard.getAttribute('role')).toBe('figure');
 
-        expect(card.getAttribute('aria-label')).toContain('First card content');
-        expect(card.getAttribute('role')).toBeTruthy();
+        expect(secondCard.getAttribute('aria-label')).toContain('Second card content');
+        expect(secondCard.getAttribute('role')).toBe('figure');
       });
     </script>
   </body>

packages/component/src/Activity/AttachmentRow.tsx

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

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

@@ -52,16 +52,6 @@
   .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 {