From 8cdac1a5cd2a884f69befa6632dc0db400db0039 Mon Sep 17 00:00:00 2001
From: Tomi Olubeko <66456876+tomi-msft@users.noreply.github.com>
Date: Wed, 10 Jul 2024 16:49:48 -0700
Subject: [PATCH] chore: remove default 'aria-label' value from Skeleton
 (#31970)

---
 ...eact-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json | 7 +++++++
 .../library/src/components/Skeleton/Skeleton.test.tsx      | 4 ----
 .../Skeleton/__snapshots__/Skeleton.test.tsx.snap          | 1 -
 .../library/src/components/Skeleton/useSkeleton.ts         | 1 -
 .../stories/src/Skeleton/SkeletonAnimation.stories.tsx     | 4 ++--
 .../stories/src/Skeleton/SkeletonAppearance.stories.tsx    | 4 ++--
 .../stories/src/Skeleton/SkeletonDefault.stories.tsx       | 2 +-
 .../stories/src/Skeleton/SkeletonItemShape.stories.tsx     | 2 +-
 .../stories/src/Skeleton/SkeletonItemSize.stories.tsx      | 2 +-
 .../stories/src/Skeleton/SkeletonRow.stories.tsx           | 2 +-
 10 files changed, 15 insertions(+), 14 deletions(-)
 create mode 100644 change/@fluentui-react-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json

diff --git a/change/@fluentui-react-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json b/change/@fluentui-react-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json
new file mode 100644
index 0000000000000..9a44a76ed2ad3
--- /dev/null
+++ b/change/@fluentui-react-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: remove default 'aria-label' value from Skeleton and update stories",
+  "packageName": "@fluentui/react-skeleton",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx
index f484a6104b29d..f9fe36b1c36e9 100644
--- a/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx
+++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/Skeleton.test.tsx
@@ -23,8 +23,4 @@ describe('Skeleton', () => {
     const result = render(<Skeleton />);
     expect(result.getByRole('progressbar').getAttribute('aria-busy')).toBeDefined();
   });
-  it('adds a proper aria-label to Skeleton', () => {
-    const result = render(<Skeleton />);
-    expect(result.getByRole('progressbar').getAttribute('aria-label')).toEqual('Loading Content');
-  });
 });
diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/__snapshots__/Skeleton.test.tsx.snap b/packages/react-components/react-skeleton/library/src/components/Skeleton/__snapshots__/Skeleton.test.tsx.snap
index 30b58078e1883..c2444c673a6bc 100644
--- a/packages/react-components/react-skeleton/library/src/components/Skeleton/__snapshots__/Skeleton.test.tsx.snap
+++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/__snapshots__/Skeleton.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`Skeleton renders a default state 1`] = `
 <div>
   <div
     aria-busy="true"
-    aria-label="Loading Content"
     class="fui-Skeleton"
     role="progressbar"
   >
diff --git a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
index 1605960d3342d..358ab34de42da 100644
--- a/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
+++ b/packages/react-components/react-skeleton/library/src/components/Skeleton/useSkeleton.ts
@@ -24,7 +24,6 @@ export const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLEl
       ref: ref as React.Ref<HTMLDivElement>,
       role: 'progressbar',
       'aria-busy': true,
-      'aria-label': 'Loading Content',
       ...props,
     }),
     { elementType: 'div' },
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx
index 6121fbdde5a34..ebc895c72054e 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAnimation.stories.tsx
@@ -15,12 +15,12 @@ export const Animation = (props: Partial<SkeletonProps>) => {
   return (
     <div className={styles.invertedWrapper}>
       <Field validationMessage="Wave animation" validationState="none">
-        <Skeleton {...props}>
+        <Skeleton {...props} aria-label="Loading Content">
           <SkeletonItem />
         </Skeleton>
       </Field>
       <Field validationMessage="Pulse animation" validationState="none">
-        <Skeleton {...props} animation="pulse">
+        <Skeleton {...props} animation="pulse" aria-label="Loading Content">
           <SkeletonItem />
         </Skeleton>
       </Field>
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx
index 43441de82dd12..3d498f8a01258 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonAppearance.stories.tsx
@@ -15,12 +15,12 @@ export const Appearance = (props: Partial<SkeletonProps>) => {
   return (
     <div className={styles.invertedWrapper}>
       <Field validationMessage="Opaque Appearance" validationState="none">
-        <Skeleton {...props}>
+        <Skeleton {...props} aria-label="Loading Content">
           <SkeletonItem />
         </Skeleton>
       </Field>
       <Field validationMessage="Translucent Appearance" validationState="none">
-        <Skeleton {...props} appearance="translucent">
+        <Skeleton {...props} appearance="translucent" aria-label="Loading Content">
           <SkeletonItem />
         </Skeleton>
       </Field>
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonDefault.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonDefault.stories.tsx
index c38debb727009..2e123a977fb37 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonDefault.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonDefault.stories.tsx
@@ -3,7 +3,7 @@ import { Skeleton, SkeletonItem } from '@fluentui/react-components';
 import type { SkeletonProps } from '@fluentui/react-components';
 
 export const Default = (props: Partial<SkeletonProps>) => (
-  <Skeleton {...props}>
+  <Skeleton {...props} aria-label="Loading Content">
     <SkeletonItem />
   </Skeleton>
 );
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx
index 7b6a059fc8992..70fda3191e0d8 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemShape.stories.tsx
@@ -18,7 +18,7 @@ export const Shape = () => {
   const styles = useStyles();
   return (
     <div className={styles.invertedWrapper}>
-      <Skeleton className={styles.row}>
+      <Skeleton className={styles.row} aria-label="Loading Content">
         <SkeletonItem size={64} shape="circle" />
         <SkeletonItem size={64} shape="rectangle" />
         <SkeletonItem size={64} shape="square" />
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx
index b61fddb8f0ab2..f582758f59036 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonItemSize.stories.tsx
@@ -26,7 +26,7 @@ export const Size = () => {
       {SIZES.map(size => (
         <div key={size} className={styles.innerWrapper}>
           <Text align="center">{size}</Text>
-          <Skeleton>
+          <Skeleton aria-label="Loading Content">
             <SkeletonItem size={size} />
           </Skeleton>
         </div>
diff --git a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx
index ca326b8a76a6c..25f6d9b4b10a3 100644
--- a/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx
+++ b/packages/react-components/react-skeleton/stories/src/Skeleton/SkeletonRow.stories.tsx
@@ -28,7 +28,7 @@ export const Row = (props: Partial<SkeletonProps>) => {
   const styles = useStyles();
   return (
     <div className={styles.invertedWrapper}>
-      <Skeleton {...props}>
+      <Skeleton {...props} aria-label="Loading Content">
         <div className={styles.firstRow}>
           <SkeletonItem shape="circle" size={24} />
           <SkeletonItem shape="rectangle" size={16} />