fix(react-examples): Improved information for screen readers on Facep…

…ile examples (#16479) #### Pull request checklist - [x] Addresses an existing issue: Fixes microsoftdesign/fluentui#10275 - [x] Include a change request file using `$ yarn change`: No change files are needed #### Description of changes Added Announced for the adding person action Changed button label to improve clarity
microsoft · Jan 20, 2021 · d820d6e · d820d6e
1 parent 0827183
commit d820d6e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx b/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Facepile, OverflowButtonType } from '@fluentui/react/lib/Facepile';
 import { facepilePersonas } from '@fluentui/example-data';
+import { Announced } from '@fluentui/react';
 
 const overflowButtonProps = {
   ariaLabel: 'More users',
@@ -14,21 +15,28 @@ export const FacepileAddFaceExample: React.FunctionComponent = () => {
 
   const addButtonProps = React.useMemo(
     () => ({
-      ariaLabel: 'Add a new person',
-      onClick: (ev: React.MouseEvent<HTMLButtonElement>) => setNumberOfFaces(numberOfFaces + 1),
+      ariaLabel: 'Add a new person to the Facepile',
+      onClick: (ev: React.MouseEvent<HTMLButtonElement>) => {
+        setNumberOfFaces(numberOfFaces + 1);
+      },
     }),
     [numberOfFaces],
   );
 
   return (
-    <Facepile
-      personas={personas}
-      maxDisplayablePersonas={5}
-      overflowButtonProps={overflowButtonProps}
-      overflowButtonType={OverflowButtonType.descriptive}
-      showAddButton
-      addButtonProps={addButtonProps}
-      ariaDescription="To move through the items use left and right arrow keys."
-    />
+    <>
+      {numberOfFaces > 0 ? (
+        <Announced message={`New person added, currently ${numberOfFaces} in the Facepile.`} aria-live="assertive" />
+      ) : null}
+      <Facepile
+        personas={personas}
+        maxDisplayablePersonas={5}
+        overflowButtonProps={overflowButtonProps}
+        overflowButtonType={OverflowButtonType.descriptive}
+        showAddButton
+        addButtonProps={addButtonProps}
+        ariaDescription="To move through the items use left and right arrow keys."
+      />
+    </>
   );
 };
diff --git a/packages/react-examples/src/react/__snapshots__/Facepile.AddFace.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Facepile.AddFace.Example.tsx.shot
@@ -43,7 +43,7 @@ exports[`Component Examples renders Facepile.AddFace.Example.tsx correctly 1`] =
         }
   >
     <button
-      aria-label="Add a new person"
+      aria-label="Add a new person to the Facepile"
       className=
           ms-Button
           ms-Facepile-addButton