fix(space widget): Voiceover announcement in peoplelist item

Author: sokn-sys

packages/node_modules/@webex/react-component-people-list/src/__snapshots__/index.test.js.snap

@@ -20,7 +20,10 @@ exports[`PeopleList component renders a group of participants as moderator 1`] =
   className="webex-people-list list listNonVirtualized"
 >
   <div
+    aria-label="Participants, list of 2 items"
     className="webex-people-group group"
+    role="group"
+    tabIndex={0}
   >
     <ListItemHeader
       className="webex-people-group-title title"
@@ -31,8 +34,15 @@ exports[`PeopleList component renders a group of participants as moderator 1`] =
       type=""
     />
   </div>
-  <div>
+  <div
+    aria-label="Dr Dre, 1 of 2"
+    aria-posinset={1}
+    aria-setsize={2}
+    role="listitem"
+    tabIndex={0}
+  >
     <Person
+      aria-hidden="true"
       canEdit={true}
       displayName="Dr Dre"
       emailAddress="dreday@deathrowrecords.net"
@@ -43,8 +53,15 @@ exports[`PeopleList component renders a group of participants as moderator 1`] =
       onRemove={[Function]}
     />
   </div>
-  <div>
+  <div
+    aria-label="Jimmy Iovine, 2 of 2"
+    aria-posinset={2}
+    aria-setsize={2}
+    role="listitem"
+    tabIndex={0}
+  >
     <Person
+      aria-hidden="true"
       canEdit={true}
       displayName="Jimmy Iovine"
       emailAddress=""

packages/node_modules/@webex/react-component-people-list/src/__snapshots__/list-item.test.js.snap

@@ -2,12 +2,12 @@
 
 exports[`PeopleListItem component renders a local participant properly 1`] = `
 <div
+  aria-hidden="true"
   className="webex-people-list-item item"
   title="Dr Dre"
 >
   <ForwardRef(render)
     onClick={[Function]}
-    title="Dr Dre"
     type="small"
   >
     <ListItemSection
@@ -44,12 +44,12 @@ exports[`PeopleListItem component renders a local participant properly 1`] = `
 
 exports[`PeopleListItem component renders a local participant with email properly 1`] = `
 <div
+  aria-hidden="true"
   className="webex-people-list-item item"
   title="Dr Dre (dreday@deathrowrecords.net)"
 >
   <ForwardRef(render)
     onClick={[Function]}
-    title="Dr Dre"
     type="small"
   >
     <ListItemSection
@@ -86,12 +86,12 @@ exports[`PeopleListItem component renders a local participant with email properl
 
 exports[`PeopleListItem component renders an editable participant properly 1`] = `
 <div
+  aria-hidden="true"
   className="webex-people-list-item item"
   title="Jimmy Iovine"
 >
   <ForwardRef(render)
     onClick={[Function]}
-    title="Jimmy Iovine"
     type="small"
   >
     <ListItemSection
@@ -188,12 +188,12 @@ exports[`PeopleListItem component renders an editable participant properly 1`] =
 
 exports[`PeopleListItem component renders an external participant properly 1`] = `
 <div
+  aria-hidden="true"
   className="webex-people-list-item item external webex-people-list-item-external"
   title="Jimmy Iovine"
 >
   <ForwardRef(render)
     onClick={[Function]}
-    title="Jimmy Iovine"
     type="small"
   >
     <ListItemSection

packages/node_modules/@webex/react-component-people-list/src/index.js

@@ -53,7 +53,7 @@ function PeopleList({
     }
     // Rows for each person
     item.people.forEach((person) => {
-      totalRows.push({type: 'person', details: person});
+      totalRows.push({type: 'person', details: person, parent: item.label});
     });
   });
 
@@ -64,17 +64,36 @@ function PeopleList({
   }) {
   /* eslint-enable react/prop-types */
     if (totalRows[index].type === 'header') {
+      const groupLabel = totalRows[index].details;
+      const group = items.find((item) => item.label === groupLabel);
+      const groupCount = group ? group.people.length : 0;
+
       return (
-        <div style={style} className={classNames('webex-people-group', styles.group)} key={totalRows[index].details}>
-          {
-            totalRows[index].details
-            && <ListItemHeader className={classNames('webex-people-group-title', styles.title)} header={totalRows[index].details} isReadOnly />
-          }
+        <div
+          style={style}
+          className={classNames('webex-people-group', styles.group)}
+          role="group"
+          aria-label={`${groupLabel}, list of ${groupCount} ${groupCount === 1 ? 'item' : 'items'}`}
+          tabIndex={0}
+        >
+          {groupLabel && (
+            <ListItemHeader
+              className={classNames('webex-people-group-title', styles.title)}
+              header={groupLabel}
+              isReadOnly
+            />
+          )}
         </div>
       );
     }
 
     const person = totalRows[index].details;
+    const parentGroup = items.find((item) =>
+      item.people.some((p) => p.id === person.id));
+    const groupCount = parentGroup ? parentGroup.people.length : 0;
+    const posInSet = parentGroup
+      ? parentGroup.people.findIndex((p) => p.id === person.id) + 1
+      : 1;
 
     const handleItemClick = () => {
       onItemClick(person);
@@ -85,7 +104,15 @@ function PeopleList({
     };
 
     return (
-      <div key={key} style={style}>
+      <div
+        key={key}
+        style={style}
+        role="listitem"
+        aria-setsize={groupCount}
+        aria-posinset={posInSet}
+        aria-label={`${person.displayName || person.name}, ${posInSet} of ${groupCount}`}
+        tabIndex={0}
+      >
         <Person
           canEdit={showEdit}
           displayName={person.displayName || person.name}
@@ -96,14 +123,18 @@ function PeopleList({
           id={person.id}
           isExternal={person.isExternal}
           isPending={person.isPending}
+          aria-hidden="true"
         />
       </div>
     );
   }
 
   function onRowsRendered({startIndex, stopIndex}) {
     // gets users from displayed rows that are not labels
-    const userIds = totalRows.slice(startIndex, stopIndex + 1).filter((row) => row.type === 'person').map((p) => p.details.id);
+    const userIds = totalRows
+      .slice(startIndex, stopIndex + 1)
+      .filter((row) => row.type === 'person')
+      .map((p) => p.details.id);
 
     onDisplayUsers(userIds);
   }

packages/node_modules/@webex/react-component-people-list/src/list-item.js

@@ -85,8 +85,9 @@ function Person({
         }
       )}
       title={detailName}
+      aria-hidden="true"
     >
-      <ListItem onClick={handleAction} title={displayName} type="small">
+      <ListItem onClick={handleAction} type="small">
         <ListItemSection position="left">
           <div className={classNames('webex-people-list-avatar', styles.avatar)}>
             <PresenceAvatar avatarId={id} name={displayName} size={28} />