Fix CallComposite captions to correctly be <li> items (#5375)

* Fix CallComposite captions to correctly be <li> items nested inside a <ul>

* Change files

* update width

* fix spoken lang rtl

Author: JamesBurnside

change-beta/@azure-communication-react-0b73a063-ba1d-44e8-88ec-a93775a88a03.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix CallComposite captions to correctly be <li> items nested inside a <ul>",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-0b73a063-ba1d-44e8-88ec-a93775a88a03.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix CallComposite captions to correctly be <li> items nested inside a <ul>",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -73,7 +73,7 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
     formFactor = 'default',
     captionsOptions
   } = props;
-  const captionsScrollDivRef = useRef<HTMLDivElement>(null);
+  const captionsScrollDivRef = useRef<HTMLUListElement>(null);
   const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);
   const theme = useTheme();
 
@@ -113,9 +113,9 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
   return (
     <>
       {startCaptionsInProgress && (
-        <FocusZone as="ul" className={captionsContainerClassName} data-ui-id="captions-banner">
+        <FocusZone className={captionsContainerClassName} data-ui-id="captions-banner">
           {isCaptionsOn && (
-            <div
+            <ul
               ref={captionsScrollDivRef}
               className={
                 captionsOptions?.height === 'full'
@@ -126,12 +126,12 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
             >
               {captions.map((caption) => {
                 return (
-                  <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
+                  <li key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
                     <_Caption {...caption} onRenderAvatar={onRenderAvatar} />
-                  </div>
+                  </li>
                 );
               })}
-            </div>
+            </ul>
           )}
           {!isCaptionsOn && (
             <Stack

packages/react-components/src/components/styles/Captions.style.ts

@@ -74,14 +74,23 @@ export const captionsContainerClassName = mergeStyles({
 export const captionContainerClassName = mergeStyles({
   marginTop: _pxToRem(6),
   marginBottom: _pxToRem(6),
+  textAlign: 'unset', // ensure RTL spoken language captions are appropriately aligned to the right
   overflowAnchor: 'auto'
 });
 
+/** Reset styling set by the `ul` element */
+const resetUlStyling = {
+  listStyleType: 'none',
+  padding: 0,
+  margin: 0
+};
+
 /**
  * @private
  */
 export const captionsBannerClassName = (formFactor: 'default' | 'compact'): string => {
   return mergeStyles({
+    ...resetUlStyling,
     overflowX: 'hidden',
     height: formFactor === 'compact' ? '4.5rem' : '8.75rem',
     overflowY: 'auto',
@@ -94,6 +103,7 @@ export const captionsBannerClassName = (formFactor: 'default' | 'compact'): stri
  */
 export const captionsBannerFullHeightClassName = (theme: ITheme): string => {
   return mergeStyles({
+    ...resetUlStyling,
     overflowX: 'hidden',
     overflowY: 'auto',
     height: '100%',