From 06a629d5167071defa1f9da36eda58266046f9c4 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 19 Oct 2026 15:57:03 -0700
Subject: [PATCH 1/2] Scroll carousel cards into view when focused with TAB

When the keyboard moves the focus into a carousel card from outside of it
(TAB or SHIFT-TAB), center the card with react-film, as LEFT/RIGHT do,
instead of leaving it partially visible. Focus by pointer is not
:focus-visible and does not scroll.
---
 CHANGELOG.md                                  |   1 +
 .../navigation.arrowKeys.formControls.html    |   8 +-
 .../navigation.tab.scrollIntoView.html        | 137 ++++++++++++++++++
 ...igation.tab.scrollIntoView.html.snap-1.png | Bin 0 -> 8426 bytes
 ...igation.tab.scrollIntoView.html.snap-2.png | Bin 0 -> 8405 bytes
 ...igation.tab.scrollIntoView.html.snap-3.png | Bin 0 -> 7887 bytes
 ...igation.tab.scrollIntoView.html.snap-4.png | Bin 0 -> 8405 bytes
 ...navigation.tab.scrollIntoView.pointer.html | 112 ++++++++++++++
 ...tab.scrollIntoView.pointer.html.snap-1.png | Bin 0 -> 8418 bytes
 .../src/Activity/CarouselFilmStrip.js         |  15 ++
 10 files changed, 271 insertions(+), 2 deletions(-)
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.html
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-1.png
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-2.png
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-3.png
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-4.png
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html
 create mode 100644 __tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html.snap-1.png

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ea94b2678..1072c1e30c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,6 +63,7 @@ Legends:
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed carousel cards focused with <kbd>TAB</kbd> staying partially out of view, in PR [#XXXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXXX), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08
 
diff --git a/__tests__/html2/carousel/navigation.arrowKeys.formControls.html b/__tests__/html2/carousel/navigation.arrowKeys.formControls.html
index 531e140f5c..a9bdc4962e 100644
--- a/__tests__/html2/carousel/navigation.arrowKeys.formControls.html
+++ b/__tests__/html2/carousel/navigation.arrowKeys.formControls.html
@@ -217,14 +217,18 @@
         // WHEN: Press TAB twice to focus on the button inside the hero card.
         await host.sendTab(2);
 
-        // THEN: The button inside the hero card should have focus.
+        // THEN: The button inside the hero card should have focus, TAB into the hero card scrolled it into view.
         expect(document.activeElement).toBe(heroCardButton);
+        await waitFor(() => expect(isCardInView(cards[1])).toBe(true));
+        await waitForCarouselSettled();
 
         // WHEN: Press LEFT and RIGHT on the button inside the hero card.
         // THEN: The button inside the hero card should keep focus.
         await host.sendKeys('ARROW_LEFT');
         expect(document.activeElement).toBe(heroCardButton);
-        expect(carouselFilmstrip.scrollLeft).toBe(0);
+
+        await waitForCarouselScrolled();
+        expect(document.activeElement).toBe(heroCardButton);
 
         await host.sendKeys('ARROW_RIGHT');
         expect(document.activeElement).toBe(heroCardButton);
diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.html b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html
new file mode 100644
index 0000000000..48636ec437
--- /dev/null
+++ b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        createRoot(document.getElementById('webchat')).render(
+          createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: A carousel of hero cards, each with a button.
+        await directLine.emulateIncomingActivity({
+          attachmentLayout: 'carousel',
+          attachments: [1, 2, 3].map(index => ({
+            content: {
+              buttons: [{ title: `Buy item ${index}`, type: 'imBack', value: `Buy item ${index}` }],
+              text: 'Price: $XXX.XX USD',
+              title: `Details about item ${index}`
+            },
+            contentType: 'application/vnd.microsoft.card.hero'
+          })),
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const carouselLayout = document.querySelector('.carousel-layout');
+        const carouselFilmstrip = carouselLayout.querySelector('.carousel-filmstrip');
+        const cards = Array.from(carouselFilmstrip.querySelectorAll('[aria-roledescription="attachment"]'));
+        const flippers = Array.from(carouselLayout.querySelectorAll('.react-film__flipper'));
+        const buttons = cards.map(card => card.querySelector('button'));
+
+        const isCardInView = card => {
+          const cardRect = card.getBoundingClientRect();
+          const filmstripRect = carouselFilmstrip.getBoundingClientRect();
+
+          return cardRect.left >= filmstripRect.left && cardRect.right <= filmstripRect.right;
+        };
+
+        // The flipper is hidden when its body has slid out of the flipper button (1s delay after scroll stops, then 300ms slide).
+        const isFlipperHidden = flipper => {
+          const bodyRect = flipper.querySelector('.react-film__flipper__body').getBoundingClientRect();
+          const buttonRect = flipper.getBoundingClientRect();
+
+          return bodyRect.right <= buttonRect.left || bodyRect.left >= buttonRect.right;
+        };
+
+        const expectCardInView = async index => {
+          await waitFor(() => expect(isCardInView(cards[index])).toBe(true));
+
+          // Wait for the scroll and the flippers to settle.
+          await waitFor(
+            () => {
+              expect(carouselLayout.querySelector('.react-film__main--scrolling')).toBeNull();
+              expect(flippers.every(isFlipperHidden)).toBe(true);
+            },
+            { timeout: 5000 }
+          );
+
+          expect(isCardInView(cards[index])).toBe(true);
+        };
+
+        expect(cards).toHaveLength(3);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        expect(isCardInView(cards[1])).toBe(false); // The second card is partially visible.
+
+        // WHEN: Focus on the first card via keyboard.
+        pageObjects.focusTranscript();
+        await host.sendKeys('ENTER');
+
+        // THEN: The first card has focus, the carousel is at the start.
+        expect(document.activeElement).toBe(cards[0]);
+        await expectCardInView(0);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        await host.snapshot('local');
+
+        // WHEN: Press TAB.
+        await host.sendTab();
+
+        // THEN: The "Buy item 1" button has focus, the carousel is at the start.
+        expect(document.activeElement).toBe(buttons[0]);
+        await expectCardInView(0);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        await host.snapshot('local');
+
+        // WHEN: Press TAB.
+        await host.sendTab();
+
+        // THEN: The second card has focus and is scrolled fully into view, as RIGHT would do.
+        expect(document.activeElement).toBe(cards[1]);
+        await expectCardInView(1);
+        expect(isCardInView(cards[0])).toBe(false);
+        await host.snapshot('local');
+
+        // WHEN: Press SHIFT-TAB.
+        await host.sendShiftTab();
+
+        // THEN: The "Buy item 1" button has focus, the first card is scrolled back into view.
+        expect(document.activeElement).toBe(buttons[0]);
+        await expectCardInView(0);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-1.png b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..72bc3494331facf739f69b167de8328eb3f69505
GIT binary patch
literal 8426
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
F{{X$rbh!Wk

literal 0
HcmV?d00001

diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-2.png b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..78f788ada0b1324fdc305754b2e49cdf7721ed4f
GIT binary patch
literal 8405
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

literal 0
HcmV?d00001

diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-3.png b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..cdb27a056d5e97527b942778da2aaf26d9cb1ba7
GIT binary patch
literal 7887
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

literal 0
HcmV?d00001

diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-4.png b/__tests__/html2/carousel/navigation.tab.scrollIntoView.html.snap-4.png
new file mode 100644
index 0000000000000000000000000000000000000000..78f788ada0b1324fdc305754b2e49cdf7721ed4f
GIT binary patch
literal 8405
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

literal 0
HcmV?d00001

diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html b/__tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html
new file mode 100644
index 0000000000..56c9d401e2
--- /dev/null
+++ b/__tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html
@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for",
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "botframework-webchat/": "/__dist__/packages/bundle/static/botframework-webchat/",
+          "react": "/__dist__/packages/bundle/static/react.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.js",
+          "react-dom/client": "/__dist__/packages/bundle/static/react-dom/client.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { waitFor } from '@testduet/wait-for';
+      import { createStoreWithOptions, ReactWebChat } from 'botframework-webchat';
+      import { createElement } from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+      window.WebChat = { createStoreWithOptions };
+
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        createRoot(document.getElementById('webchat')).render(
+          createElement(ReactWebChat, { directLine, store, styleOptions: { hideSendBox: true } })
+        );
+
+        await pageConditions.uiConnected();
+
+        // GIVEN: A carousel of hero cards, each with a button.
+        await directLine.emulateIncomingActivity({
+          attachmentLayout: 'carousel',
+          attachments: [1, 2, 3].map(index => ({
+            content: {
+              buttons: [{ title: `Buy item ${index}`, type: 'imBack', value: `Buy item ${index}` }],
+              text: 'Price: $XXX.XX USD',
+              title: `Details about item ${index}`
+            },
+            contentType: 'application/vnd.microsoft.card.hero'
+          })),
+          from: { role: 'bot' },
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        const carouselLayout = document.querySelector('.carousel-layout');
+        const carouselFilmstrip = carouselLayout.querySelector('.carousel-filmstrip');
+        const cards = Array.from(carouselFilmstrip.querySelectorAll('[aria-roledescription="attachment"]'));
+        const flippers = Array.from(carouselLayout.querySelectorAll('.react-film__flipper'));
+
+        const isCardInView = card => {
+          const cardRect = card.getBoundingClientRect();
+          const filmstripRect = carouselFilmstrip.getBoundingClientRect();
+
+          return cardRect.left >= filmstripRect.left && cardRect.right <= filmstripRect.right;
+        };
+
+        // The flipper is hidden when its body has slid out of the flipper button (1s delay after scroll stops, then 300ms slide).
+        const isFlipperHidden = flipper => {
+          const bodyRect = flipper.querySelector('.react-film__flipper__body').getBoundingClientRect();
+          const buttonRect = flipper.getBoundingClientRect();
+
+          return bodyRect.right <= buttonRect.left || bodyRect.left >= buttonRect.right;
+        };
+
+        const expectCardInView = async index => {
+          await waitFor(() => expect(isCardInView(cards[index])).toBe(true));
+
+          // Wait for the scroll and the flippers to settle.
+          await waitFor(
+            () => {
+              expect(carouselLayout.querySelector('.react-film__main--scrolling')).toBeNull();
+              expect(flippers.every(isFlipperHidden)).toBe(true);
+            },
+            { timeout: 5000 }
+          );
+
+          expect(isCardInView(cards[index])).toBe(true);
+        };
+
+        expect(cards).toHaveLength(3);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        expect(isCardInView(cards[1])).toBe(false); // The second card is partially visible.
+
+        // WHEN: Click on the visible part of the second card.
+        await host.clickAt(10, 10, cards[1]);
+
+        // Move the mouse away from the carousel, the flippers are shown while the mouse is over it.
+        await host.moveTo(10, 10, document.getElementById('webchat'));
+
+        // THEN: The second card has focus by pointer (not :focus-visible), the carousel stays at the start.
+        expect(document.activeElement).toBe(cards[1]);
+        expect(cards[1].matches(':focus-visible')).toBe(false);
+        await expectCardInView(0);
+        expect(carouselFilmstrip.scrollLeft).toBe(0);
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html.snap-1.png b/__tests__/html2/carousel/navigation.tab.scrollIntoView.pointer.html.snap-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb3dbae63c93d12ec2040e1e7a8d1460b6d9549e
GIT binary patch
literal 8418
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

literal 0
HcmV?d00001

diff --git a/packages/component/src/Activity/CarouselFilmStrip.js b/packages/component/src/Activity/CarouselFilmStrip.js
index 306cdee62c..b25f7ba052 100644
--- a/packages/component/src/Activity/CarouselFilmStrip.js
+++ b/packages/component/src/Activity/CarouselFilmStrip.js
@@ -38,6 +38,20 @@ const CarouselFilmStrip = ({
   const scrollableCallbackRef = useScrollableCallbackRef();
   const scrollTo = useScrollTo();
 
+  // When the keyboard moves the focus into a card from outside of it (TAB or SHIFT-TAB), center the card with react-film,
+  // as LEFT/RIGHT do, instead of leaving it partially visible. Clicking a card or button is not :focus-visible and does not
+  // scroll; text inputs are, so the card is centered for typing.
+  const handleAttachmentsFocus = useCallback(
+    ({ currentTarget, relatedTarget, target }) => {
+      const cards = Array.from(currentTarget.children);
+
+      const index = cards.findIndex(card => card.contains(target));
+
+      ~index && !cards[+index].contains(relatedTarget) && target.matches(':focus-visible') && scrollTo(() => index);
+    },
+    [scrollTo]
+  );
+
   // When a card itself has focus (not a control inside it), LEFT/RIGHT move the focus to the previous/next card
   // (mirrored in RTL), HOME/END to the first/last card. This is a shortcut: every card is still a tab stop.
   const handleAttachmentsKeyDown = useCallback(
@@ -167,6 +181,7 @@ const CarouselFilmStrip = ({
             <div className={classNames['carousel-filmstrip__complimentary-content']}>
               <ul
                 className={cx(classNames['carousel-filmstrip__attachments'], 'react-film__filmstrip__list')}
+                onFocus={handleAttachmentsFocus}
                 onKeyDown={handleAttachmentsKeyDown}
                 ref={itemContainerCallbackRef}
               >

From 9779dee5a5333d1f115a5a8a73d007e30f66a619 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <eugeneolonov@microsoft.com>
Date: Mon, 19 Oct 2026 16:06:15 -0700
Subject: [PATCH 2/2] Add PR number to changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1072c1e30c..2d8aa948a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -63,7 +63,7 @@ Legends:
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny)
-- Fixed carousel cards focused with <kbd>TAB</kbd> staying partially out of view, in PR [#XXXX](https://github.com/microsoft/BotFramework-WebChat/pull/XXXX), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed carousel cards focused with <kbd>TAB</kbd> staying partially out of view, in PR [#5926](https://github.com/microsoft/BotFramework-WebChat/pull/5926), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08