Fix bug where the scrollable div is not keyboard accessible (#5806)

* update

* Change files

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-60dbc1f9-ed82-4344-b568-d0030c7be6a6.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTT",
+  "comment": "Fix bug where scrollable UL element is not keyboard focusable",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-60dbc1f9-ed82-4344-b568-d0030c7be6a6.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "RTT",
+  "comment": "Fix bug where scrollable UL element is not keyboard focusable",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/CaptionsBanner.tsx

@@ -413,6 +413,7 @@ export const CaptionsBanner = (props: CaptionsBannerProps): JSX.Element => {
                   : captionsBannerClassName(formFactor, /* @conditional-compile-remove(rtt) */ expandBannerHeight)
               }
               data-ui-id="captions-banner-inner"
+              data-is-focusable={true}
             >
               {
                 /* @conditional-compile-remove(rtt) */ isRealTimeTextOn && (