@azure/communication-react 1.5.1-alpha-202306170013 → 1.5.1-alpha-202306200012

package/dist/dist-cjs/communication-react/index.js

@@ -167,7 +167,7 @@ const _toCommunicationIdentifier = (id) => {
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-var telemetryVersion = '1.5.1-alpha-202306170013';
+var telemetryVersion = '1.5.1-alpha-202306200012';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -6304,10 +6304,14 @@ const getTagClosingTagInfo = (tag) => {
  * @returns Updated HTML and selection index if the selection index should be set.
  */
 const updateHTML = (props) => {
-    const { htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
+    const { htmlText, oldPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
     if (tags.length === 0 || (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1)) {
         // no tags added yet or the whole text is changed
-        return { updatedHTML: newPlainText, updatedSelectionIndex: undefined };
+        const changeWithSkippedChars = escapeHTMLChars(change);
+        const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) +
+            changeWithSkippedChars +
+            escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));
+        return { updatedHTML, updatedSelectionIndex: oldPlainTextEndIndex + change.length };
     }
     let result = '';
     let lastProcessedHTMLIndex = 0;
@@ -6317,7 +6321,7 @@ const updateHTML = (props) => {
     // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed
     // e.g.: change is on the beginning of the tag => change will be added before the tag
     // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention
-    let processedChange = change;
+    let processedChange = escapeHTMLChars(change);
     // end tag plain text index of the last processed tag
     let lastProcessedPlainTextTagEndIndex = 0;
     // as some tags/text can be removed fully, selection should be updated correctly
@@ -6339,13 +6343,13 @@ const updateHTML = (props) => {
         if (startIndex <= tag.plainTextBeginIndex) {
             // change start is before the open tag
             // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
-            const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
+            const startChangeDiff = getChangeDiff(oldPlainText, Math.max(lastProcessedPlainTextTagEndIndex, startIndex), tag.plainTextBeginIndex);
             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex - startChangeDiff) + processedChange;
             processedChange = '';
             if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
                 // the whole change is before tag start
                 // mentionTag length can be ignored here as the change is before the tag
-                const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
+                const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, tag.plainTextBeginIndex);
                 lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
                 // the change is handled; exit
                 break;
@@ -6375,13 +6379,13 @@ const updateHTML = (props) => {
                         if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
                             // mention tag should be deleted when user tries to edit it in the middle
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         else if (startIndex === tag.plainTextBeginIndex) {
                             // non empty change at the beginning of the mention tag to be added before the mention tag
                             result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
-                            changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
+                            changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = tag.openTagIndex;
                         }
                         else if (startIndex === closingTagInfo.plainTextEndIndex) {
@@ -6389,12 +6393,13 @@ const updateHTML = (props) => {
                             result +=
                                 htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
                                     processedChange;
-                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
+                            changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;
                             lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
                         }
                         processedChange = '';
                     }
                     else {
+                        // When change is empty, it means that this change is a deletion
                         const updateMentionTagResult = handleMentionTagUpdate({
                             htmlText,
                             oldPlainText,
@@ -6422,7 +6427,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6434,13 +6438,13 @@ const updateHTML = (props) => {
                 }
                 else {
                     // no subtags
-                    const startChangeDiff = startIndex - tag.plainTextBeginIndex;
+                    const startChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, startIndex);
                     result +=
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
                             processedChange;
                     processedChange = '';
                     if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
-                        const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
+                        const endChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, oldPlainTextEndIndex);
                         lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
                     }
                     else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
@@ -6479,7 +6483,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6539,7 +6542,6 @@ const updateHTML = (props) => {
                     const updatedContent = updateHTML({
                         htmlText: tag.content,
                         oldPlainText,
-                        newPlainText,
                         tags: tag.subTags,
                         startIndex,
                         oldPlainTextEndIndex,
@@ -6555,7 +6557,7 @@ const updateHTML = (props) => {
                         htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
                     processedChange = '';
                     // oldPlainTextEndIndex already includes mentionTag length
-                    const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
+                    const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, closingTagInfo.plainTextEndIndex);
                     // as change may be before the end of the tag, we need to add the rest of the tag
                     lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
                 }
@@ -6567,9 +6569,9 @@ const updateHTML = (props) => {
         if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {
             // the last tag should handle the end of the change if needed
             // oldPlainTextEndIndex already includes mentionTag length
-            const endChangeDiff = oldPlainTextEndIndex - closingTagInfo.plainTextEndIndex;
+            const endChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, oldPlainTextEndIndex);
             if (startIndex >= closingTagInfo.plainTextEndIndex) {
-                const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
+                const startChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, startIndex);
                 result +=
                     htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
             }
@@ -6719,17 +6721,18 @@ const textToTagParser = (text, trigger) => {
         if (!foundHtmlTag) {
             if (parseIndex !== 0) {
                 // Add the remaining text to the plain text representation
-                plainTextRepresentation += text.substring(parseIndex);
+                const newText = text.substring(parseIndex);
+                plainTextRepresentation += unEscapeHtmlCharacters(newText);
             }
             else {
-                plainTextRepresentation = text;
+                plainTextRepresentation = unEscapeHtmlCharacters(text);
             }
             break;
         }
         if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {
             const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);
             // Add the plain text between the last tag and this one found
-            plainTextRepresentation += text.substring(parseIndex, foundHtmlTag.startIdx);
+            plainTextRepresentation += unEscapeHtmlCharacters(text.substring(parseIndex, foundHtmlTag.startIdx));
             nextTag.plainTextBeginIndex = plainTextRepresentation.length;
             if (foundHtmlTag.type === 'open') {
                 tagParseStack.push(nextTag);
@@ -6755,14 +6758,14 @@ const textToTagParser = (text, trigger) => {
                             plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
                 }
                 if (!currentOpenTag.subTags) {
-                    plainTextRepresentation += currentOpenTag.content;
+                    plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
                 }
                 else if (currentOpenTag.subTags.length > 0) {
                     // Add text after the last tag
                     const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
                     const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
                     const trailingText = currentOpenTag.content.substring(startOfRemainingText);
-                    plainTextRepresentation += trailingText;
+                    plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
                 }
                 currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
                 addTag(currentOpenTag, tagParseStack, tags);
@@ -6850,6 +6853,32 @@ const addTag = (tag, parseStack, tags) => {
         }
     }
 };
+// We should revisit this in the future when we support other text such as rich text editing.
+const escapeHTMLChars = (text) => {
+    const mentionRegex = new RegExp(`<${MSFT_MENTION_TAG}(.*?)>(.*?)</${MSFT_MENTION_TAG}>`, 'i');
+    if (!text.match(mentionRegex)) {
+        return text
+            .replace(/&(?![A-Z]+;)/gi, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+    return text;
+};
+const getChangeDiff = (plainText, startIndex, endIndex) => {
+    return endIndex - startIndex + getLengthDiffForEscapedHtmlChars(plainText, startIndex, endIndex);
+};
+const getLengthDiffForEscapedHtmlChars = (text, startIndex, endIndex) => {
+    var _a, _b;
+    const subText = text.substring(startIndex, endIndex);
+    const escapedAngleBracketCount = ((_a = subText.match(/(<)|(>)/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    let escapedCharLength = escapedAngleBracketCount * ('&lt;'.length - '<'.length);
+    const escapedAmpersandCount = ((_b = subText.match(/&/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    escapedCharLength += escapedAmpersandCount * ('&amp;'.length - '&'.length);
+    return escapedCharLength;
+};
+const unEscapeHtmlCharacters = (text) => {
+    return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -7117,13 +7146,11 @@ const TextFieldWithMention = (props) => {
         const oldPlainText = inputTextValue;
         const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
         // update plain text with the mention html text
-        const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
         const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
         // update html text with updated plain text
         const updatedContent = updateHTML({
             htmlText: textValue,
             oldPlainText,
-            newPlainText,
             tags: tagsValue,
             startIndex: currentTriggerStartIndex,
             oldPlainTextEndIndex: selectionEnd,
@@ -7438,44 +7465,32 @@ const TextFieldWithMention = (props) => {
                 }
             }
         }
-        let result = '';
-        if (tagsValue.length === 0) {
-            // no tags in the string and newValue should be used as a result string
-            result = newValue;
-        }
-        else {
-            // there are tags in the text value and htmlTextValue is html string
-            // find diff between old and new text
-            const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
-                oldText: inputTextValue,
-                newText: newValue,
-                previousSelectionStart: previousSelectionStartValue,
-                previousSelectionEnd: previousSelectionEndValue,
-                currentSelectionStart: currentSelectionStartValue,
-                currentSelectionEnd: currentSelectionEndValue
-            });
-            const change = newValue.substring(changeStart, newChangeEnd);
-            // get updated html string
-            const updatedContent = updateHTML({
-                htmlText: htmlTextValue,
-                oldPlainText: inputTextValue,
-                newPlainText: newValue,
-                tags: tagsValue,
-                startIndex: changeStart,
-                oldPlainTextEndIndex: oldChangeEnd,
-                change,
-                mentionTrigger: triggerText
-            });
-            result = updatedContent.updatedHTML;
-            // update caret index if needed
-            if (updatedContent.updatedSelectionIndex !== undefined) {
-                setCaretIndex(updatedContent.updatedSelectionIndex);
-                setSelectionEndValue(updatedContent.updatedSelectionIndex);
-                setSelectionStartValue(updatedContent.updatedSelectionIndex);
-            }
-        }
-        onChange && onChange(event, result);
-    }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
+        const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
+            oldText: inputTextValue,
+            newText: newValue,
+            previousSelectionStart: previousSelectionStartValue,
+            previousSelectionEnd: previousSelectionEndValue,
+            currentSelectionStart: currentSelectionStartValue,
+            currentSelectionEnd: currentSelectionEndValue
+        });
+        const change = newValue.substring(changeStart, newChangeEnd);
+        const updatedContent = updateHTML({
+            htmlText: htmlTextValue,
+            oldPlainText: inputTextValue,
+            tags: tagsValue,
+            startIndex: changeStart,
+            oldPlainTextEndIndex: oldChangeEnd,
+            change,
+            mentionTrigger: triggerText
+        });
+        // update caret index if needed
+        if (updatedContent.updatedSelectionIndex !== undefined) {
+            setCaretIndex(updatedContent.updatedSelectionIndex);
+            setSelectionEndValue(updatedContent.updatedSelectionIndex);
+            setSelectionStartValue(updatedContent.updatedSelectionIndex);
+        }
+        onChange && onChange(event, updatedContent.updatedHTML);
+    }), [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]);
     // Adjust the selection range based on a mouse / touch interaction
     const handleOnMove = React.useCallback(({ event, selectionStartValue, selectionEndValue, interactionStartSelection, shouldHandleMoveEvent }) => {
         if (shouldHandleMoveEvent &&
@@ -10283,6 +10298,7 @@ const ParticipantItem = (props) => {
     const theme = useTheme();
     const localeStrings = useLocale$1().strings.participantItem;
     const ids = useIdentifiers();
+    const uniqueId = React.useId();
     const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
     // For 'me' show empty name so avatar will get 'Person' icon, when there is no name
     const meAvatarText = (displayName === null || displayName === void 0 ? void 0 : displayName.trim()) || '';
@@ -10322,7 +10338,7 @@ const ParticipantItem = (props) => {
         React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles({
                 width: `calc(100% - ${!me && participantStateString ? participantStateMaxWidth : menuButtonContainerStyle.width})`,
                 alignItems: 'center'
-            }) },
+            }), id: uniqueId, "aria-labelledby": `${props.ariaLabelledBy} ${uniqueId}` },
             avatar,
             me && React__default['default'].createElement(react.Text, { className: meTextStyle }, strings.isMeText),
             React__default['default'].createElement(react.Stack, { horizontal: true, className: react.mergeStyles(infoContainerStyle) }, onRenderIcon && onRenderIcon(props))),
@@ -10444,7 +10460,7 @@ const iconStyles$2 = react.mergeStyles({
 });
 
 // Copyright (c) Microsoft Corporation.
-const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip) => {
+const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, styles, onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy) => {
     const callingParticipant = participant;
     let presence = undefined;
     if (callingParticipant) {
@@ -10464,7 +10480,7 @@ const onRenderParticipantDefault = (participant, strings, myUserId, onRenderAvat
     return (React__default['default'].createElement(ParticipantItem, { styles: styles, key: participant.userId, userId: participant.userId, displayName: participant.displayName, me: myUserId ? participant.userId === myUserId : false, menuItems: menuItems, presence: presence, onRenderIcon: onRenderIcon, onRenderAvatar: onRenderAvatar, onClick: () => onParticipantClick === null || onParticipantClick === void 0 ? void 0 : onParticipantClick(participant), showParticipantOverflowTooltip: showParticipantOverflowTooltip, 
         /* @conditional-compile-remove(one-to-n-calling) */
         /* @conditional-compile-remove(PSTN-calls) */
-        participantState: callingParticipant.state }));
+        participantState: callingParticipant.state, ariaLabelledBy: participantAriaLabelledBy }));
 };
 const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
     if (!excludeMe || !myUserId) {
@@ -10487,7 +10503,7 @@ const getParticipantsForDefaultRender = (participants, excludeMe, myUserId) => {
  */
 const ParticipantList = (props) => {
     var _a, _b, _c, _d;
-    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip } = props;
+    const { excludeMe = false, myUserId, participants, onRemoveParticipant, onRenderAvatar, onRenderParticipant, onFetchParticipantMenuItems, showParticipantOverflowTooltip, participantAriaLabelledBy } = props;
     const ids = useIdentifiers();
     const strings = useLocale$1().strings.participantItem;
     const displayedParticipants = React.useMemo(() => {
@@ -10525,7 +10541,7 @@ const ParticipantList = (props) => {
     const participantItemStyles = React.useMemo(() => { var _a; return react.merge(participantListItemStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.participantItemStyles); }, [(_c = props.styles) === null || _c === void 0 ? void 0 : _c.participantItemStyles]);
     return (React__default['default'].createElement(react.Stack, { "data-ui-id": ids.participantList, className: react.mergeStyles(participantListStyle$1, (_d = props.styles) === null || _d === void 0 ? void 0 : _d.root) }, displayedParticipants.map((participant) => onRenderParticipant
         ? onRenderParticipant(participant)
-        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip))));
+        : onRenderParticipantDefault(participant, strings, myUserId, onRenderAvatar, createParticipantMenuItems, participantItemStyles, props.onParticipantClick, showParticipantOverflowTooltip, participantAriaLabelledBy))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -11270,7 +11286,7 @@ const VideoTile = (props) => {
         }
         const currentObserver = observer.current;
         return () => currentObserver.disconnect();
-    }, [observer, videoTileRef]);
+    }, [videoTileRef]);
     /* @conditional-compile-remove(pinned-participants) */
     const useLongPressProps = React.useMemo(() => {
         return {
@@ -11629,6 +11645,12 @@ const localVideoCameraCycleButtonStyles = (theme) => {
         }
     };
 };
+/**
+ * @private
+ */
+const localVideoTileContainerStyles = {
+    root: { width: '100%', height: '100%' }
+};
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -11771,7 +11793,7 @@ const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
 const _useOrganizedParticipants = (props) => {
     const visibleGridParticipants = React.useRef([]);
     const visibleOverflowGalleryParticipants = React.useRef([]);
-    const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
+    const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
     const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
     visibleGridParticipants.current =
         pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -11809,7 +11831,13 @@ const _useOrganizedParticipants = (props) => {
     ]);
     const gridParticipants = getGridParticipants();
     const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
-        if (isScreenShareActive) {
+        if (isScreenShareActive && localParticipant) {
+            const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
+            // If screen sharing is active, assign video and audio participants as overflow gallery participants
+            /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
+            return localParticipantPlusOverflow.concat(callingParticipants);
+        }
+        else if (isScreenShareActive) {
             // If screen sharing is active, assign video and audio participants as overflow gallery participants
             /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
             return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -11824,7 +11852,8 @@ const _useOrganizedParticipants = (props) => {
         }
     }, [
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
-        isScreenShareActive
+        isScreenShareActive,
+        localParticipant
     ]);
     const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
     return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
@@ -11977,9 +12006,12 @@ const HorizontalGallery = (props) => {
     const firstIndexOfCurrentPage = page * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
-        return indexesArray[clippedPage].map((index) => {
-            return React__default['default'].Children.toArray(children)[index];
-        });
+        if (indexesArray[0] !== undefined) {
+            return indexesArray[clippedPage].map((index) => {
+                return React__default['default'].Children.toArray(children)[index];
+            });
+        }
+        return [];
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const disablePreviousButton = page === 0;
@@ -12035,10 +12067,13 @@ const LOCAL_VIDEO_TILE_ZINDEX = 2;
 /**
  * @private
  */
-const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
+const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
+    console.log(screenSharePresent);
     return {
-        minWidth: `${localVideoTileSizeRem.width}rem`,
-        minHeight: `${localVideoTileSizeRem.height}rem`,
+        width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
+        height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
+        minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
+        minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
         position: 'absolute',
         bottom: `${localVideoTileOuterPaddingRem}rem`,
         borderRadius: theme.effects.roundedCorner4,
@@ -12365,7 +12400,7 @@ const childrenContainerStyle = (pageControlBarHeight) => {
  */
 const rootStyle = {
     height: '100%',
-    width: '100%',
+    width: 'inherit',
     gap: `${VERTICAL_GALLERY_GAP}rem`,
     position: 'relative'
 };
@@ -12434,9 +12469,12 @@ const VerticalGallery = (props) => {
     const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
     const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
     const childrenOnCurrentPage = React.useMemo(() => {
-        return indexesArray[clippedPage - 1].map((index) => {
-            return React__default['default'].Children.toArray(children)[index];
-        });
+        if (indexesArray[0] !== undefined) {
+            return indexesArray[clippedPage - 1].map((index) => {
+                return React__default['default'].Children.toArray(children)[index];
+            });
+        }
+        return;
     }, [indexesArray, clippedPage, children]);
     const showButtons = numberOfChildren > childrenPerPage;
     const onPreviousButtonClick = () => {
@@ -12520,13 +12558,14 @@ const VerticalGalleryControlBar = (props) => {
  * @beta
  */
 const ResponsiveVerticalGallery = (props) => {
+    var _a;
     const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
     const containerRef = React.useRef(null);
     const containerHeight = _useContainerHeight(containerRef);
     const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
     const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
     const childrenPerPage = calculateVerticalChildrenPerPage({
-        numberOfChildren: React__default['default'].Children.count(children),
+        numberOfChildren: (_a = React__default['default'].Children.count(children)) !== null && _a !== void 0 ? _a : 0,
         containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
         gapHeightRem,
         controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
@@ -12620,16 +12659,16 @@ const OverflowGallery = (props) => {
     ]);
     /* @conditional-compile-remove(vertical-gallery) */
     if (overflowGalleryPosition === 'VerticalRight') {
-        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
+        return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
     }
     /* @conditional-compile-remove(pinned-participants) */
     if (isNarrow) {
         // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
         // participant tiles are visible
         onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
-        return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
+        return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
     }
-    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
+    return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -12640,7 +12679,7 @@ const OverflowGallery = (props) => {
  * @private
  */
 const DefaultLayout = (props) => {
-    const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
+    const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth, 
     /* @conditional-compile-remove(vertical-gallery) */
     parentHeight, pinnedParticipantUserIds = [], 
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
@@ -12649,14 +12688,16 @@ const DefaultLayout = (props) => {
     const isShort = parentHeight ? isShortHeight(parentHeight) : false;
     // This is for tracking the number of children in the first page of overflow gallery.
     // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+    // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
     const childrenPerPage = React.useRef(4);
     const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
         remoteParticipants,
+        localParticipant,
         dominantSpeakers,
         maxRemoteVideoStreams,
         isScreenShareActive: !!screenShareComponent,
         maxOverflowGalleryDominantSpeakers: screenShareComponent
-            ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+            ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
             : childrenPerPage.current,
         /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
     });
@@ -13501,7 +13542,10 @@ const FloatingLocalVideoLayout = (props) => {
     const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
         var _a, _b;
         return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
-            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
+            ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
+                indexesToRender &&
+                indexesToRender.includes(i) &&
+                activeVideoStreams++ < maxRemoteVideoStreams
             : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
     });
     const layerHostId = reactHooks.useId('layerhost');
@@ -13510,7 +13554,7 @@ const FloatingLocalVideoLayout = (props) => {
             return SMALL_FLOATING_MODAL_SIZE_REM;
         }
         /* @conditional-compile-remove(vertical-gallery) */
-        if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
             return isNarrow
                 ? SMALL_FLOATING_MODAL_SIZE_REM
                 : isShort
@@ -13518,25 +13562,26 @@ const FloatingLocalVideoLayout = (props) => {
                     : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
         }
         /*@conditional-compile-remove(click-to-call) */
-        if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'HorizontalBottom') {
+        if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
             return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
         }
         return LARGE_FLOATING_MODAL_SIZE_REM;
     }, [
         overflowGalleryTiles.length,
         isNarrow,
+        screenShareComponent,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     ]);
-    const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
+    const wrappedLocalVideoComponent = (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (
     // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
     showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
             boxShadow: theme.effects.elevation8,
             zIndex: LOCAL_VIDEO_TILE_ZINDEX
-        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
+        }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
     const overflowGallery = React.useMemo(() => {
-        if (overflowGalleryTiles.length === 0) {
+        if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
             return null;
         }
         return (React__default['default'].createElement(OverflowGallery
@@ -13553,6 +13598,7 @@ const FloatingLocalVideoLayout = (props) => {
     }, [
         isNarrow,
         /* @conditional-compile-remove(vertical-gallery) */ isShort,
+        screenShareComponent,
         overflowGalleryTiles,
         styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
         /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
@@ -13669,7 +13715,7 @@ const VideoGallery = (props) => {
             root: { borderRadius: theme.effects.roundedCorner4 }
         }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
         const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
-        return (React__default['default'].createElement(react.Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
+        return (React__default['default'].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
             React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((shouldFloatLocalVideo && isNarrow) ||
                     /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
     }, [
@@ -13731,11 +13777,13 @@ const VideoGallery = (props) => {
             /* @conditional-compile-remove(PSTN-calls) */
             participantState: participant.state, 
             /* @conditional-compile-remove(pinned-participants) */
-            menuKind: remoteVideoTileMenuOptions
-                ? remoteVideoTileMenuOptions.kind === 'drawer'
-                    ? 'drawer'
-                    : 'contextual'
-                : undefined, 
+            menuKind: participant.userId === localParticipant.userId
+                ? undefined
+                : remoteVideoTileMenuOptions
+                    ? remoteVideoTileMenuOptions.kind === 'drawer'
+                        ? 'drawer'
+                        : 'contextual'
+                    : undefined, 
             /* @conditional-compile-remove(pinned-participants) */
             drawerMenuHostId: drawerMenuHostId, 
             /* @conditional-compile-remove(pinned-participants) */
@@ -13752,6 +13800,7 @@ const VideoGallery = (props) => {
         onCreateRemoteStreamView,
         onDisposeRemoteVideoStreamView,
         remoteVideoViewOptions,
+        localParticipant,
         onRenderAvatar,
         showMuteIndicator,
         strings,
@@ -13772,6 +13821,7 @@ const VideoGallery = (props) => {
             : undefined;
     const layoutProps = React.useMemo(() => ({
         remoteParticipants,
+        localParticipant,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -13786,6 +13836,7 @@ const VideoGallery = (props) => {
         /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
     }), [
         remoteParticipants,
+        localParticipant,
         screenShareComponent,
         showCameraSwitcherInLocalPreview,
         maxRemoteVideoStreams,
@@ -18785,7 +18836,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
  */
 const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
 
-var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
+var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
 
 var call$i={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown"};var chat$i={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$i={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$i,chat:chat$i,callWithChat:callWithChat$i};
 
@@ -20687,6 +20738,7 @@ const ParticipantContainer = (props) => {
  */
 const ParticipantListWithHeading = (props) => {
     const { onFetchAvatarPersonaData, onFetchParticipantMenuItems, title, participantListProps } = props;
+    const subheadingUniqueId = React.useId();
     const theme = react.useTheme();
     const subheadingStyleThemed = React.useMemo(() => ({
         root: {
@@ -20696,11 +20748,11 @@ const ParticipantListWithHeading = (props) => {
         }
     }), [theme.palette.neutralSecondary, theme.fonts.smallPlus.fontSize, props.isMobile]);
     return (React__default['default'].createElement(react.Stack, { className: participantListStack },
-        React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed, "aria-label": title }, title),
+        React__default['default'].createElement(react.Stack.Item, { styles: subheadingStyleThemed, "aria-label": title, id: subheadingUniqueId }, title),
         React__default['default'].createElement(react.FocusZone, { className: participantListContainerStyle, shouldFocusOnMount: true },
             React__default['default'].createElement(ParticipantList, Object.assign({}, participantListProps, { styles: props.isMobile ? participantListMobileStyle : participantListStyle, onRenderAvatar: (userId, options) => (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement(AvatarPersona, Object.assign({ "data-ui-id": "chat-composite-participant-custom-avatar", userId: userId }, options, { hidePersonaDetails: !!(options === null || options === void 0 ? void 0 : options.text) }, { dataProvider: onFetchAvatarPersonaData })),
-                    (options === null || options === void 0 ? void 0 : options.text) && (React__default['default'].createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile })))));
+                    (options === null || options === void 0 ? void 0 : options.text) && (React__default['default'].createElement(react.Text, { nowrap: true, styles: displayNameStyles$1 }, options === null || options === void 0 ? void 0 : options.text)))), onFetchParticipantMenuItems: onFetchParticipantMenuItems, showParticipantOverflowTooltip: !props.isMobile, participantAriaLabelledBy: subheadingUniqueId })))));
 };
 
 // Copyright (c) Microsoft Corporation.
@@ -26019,6 +26071,10 @@ const outboundCallStringsTrampoline = (strings) => {
 
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+/**
+ * @private
+ */
+const pageContainer = { width: '100%', height: '100%' };
 /**
  * @private
  */
@@ -26079,6 +26135,8 @@ const TransferPage = (props) => {
     const remoteParticipants = useSelector$1(getRemoteParticipants);
     /* @conditional-compile-remove(call-transfer) */
     const transferCall = useSelector$1(getTransferCall);
+    /* @conditional-compile-remove(call-transfer) */
+    const [announcerString, setAnnouncerString] = React.useState(undefined);
     // Reduce the controls shown when mobile view is enabled.
     const callControlOptions = props.mobileView
         ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
@@ -26093,6 +26151,10 @@ const TransferPage = (props) => {
         }
         return 'transferor';
     }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
+    /* @conditional-compile-remove(call-transfer) */
+    React.useEffect(() => {
+        setAnnouncerString(strings.transferPageNoticeString);
+    }, [strings.transferPageNoticeString]);
     let transferTileParticipant = transferor;
     /* @conditional-compile-remove(call-transfer) */
     if (pageSubject === 'transferTarget') {
@@ -26105,16 +26167,19 @@ const TransferPage = (props) => {
         transferParticipantDisplayName =
             (_d = transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName) !== null && _d !== void 0 ? _d : strings.transferPageUnknownTransferTargetDisplayName;
     }
-    return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
-        // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
-        errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
-            options: callControlOptions,
-            increaseFlyoutItemSize: props.mobileView
-        }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
-            /* @conditional-compile-remove(call-transfer) */
-            statusText: pageSubject === 'transferTarget'
-                ? strings.transferPageTransferTargetText
-                : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
+    return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(pageContainer) },
+        /* @conditional-compile-remove(call-transfer) */
+        React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: "polite" }),
+        React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings }, 
+            // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
+            errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
+                options: callControlOptions,
+                increaseFlyoutItemSize: props.mobileView
+            }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName, 
+                /* @conditional-compile-remove(call-transfer) */
+                statusText: pageSubject === 'transferTarget'
+                    ? strings.transferPageTransferTargetText
+                    : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
 };
 const TransferTile = (props) => {
     const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;