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

package/dist/communication-react.d.ts

@@ -7514,6 +7514,11 @@ export declare interface ParticipantItemProps {
      * For example, `strings.participantStateConnecting` will be used if `participantState` is `Connecting`.
      */
     participantState?: ParticipantState;
+    /**
+     * Optional aria property that prefixes the ParticipantItems aria content
+     * Takes in a unique id value of the element you would like to be read before the ParticipantItem.
+     */
+    ariaLabelledBy?: string;
 }
 
 /**
@@ -7617,6 +7622,8 @@ export declare type ParticipantListProps = {
     styles?: ParticipantListStyles;
     /** prop to determine if we should show tooltip for participants or not */
     showParticipantOverflowTooltip?: boolean;
+    /** Optional aria-lablledby prop that prefixes each ParticipantItem aria-label */
+    participantAriaLabelledBy?: string;
 };
 
 /**

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-202306180015';
 
 // Copyright (c) Microsoft Corporation.
 /**
@@ -10283,6 +10283,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 +10323,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 +10445,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 +10465,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 +10488,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 +10526,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.
@@ -20687,6 +20688,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 +20698,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.