chore: remove default 'aria-label' value from Skeleton (microsoft#31970)

tomi-msft · Jul 10, 2024 · 8cdac1a · 8cdac1a
1 parent 1b6cc50
commit 8cdac1a
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 14 deletions.
diff --git a/change/@fluentui-react-skeleton-b2554d76-ec3a-4c57-bd18-04e351cd08ba.json 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
@@ -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/...nents/react-skeleton/library/src/components/Skeleton/__snapshots__/Skeleton.test.tsx.snap b/...nents/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />