Skip to content

Commit 3ba79b0

Browse files
Mash707Mash707
authored
chore(skeleton): updated screen reader text (patternfly#11739)
* chore(skeleton): updated screen reader text * updated text and shapes example * updated skeleton card demo
1 parent 588b3fd commit 3ba79b0

File tree

6 files changed

+34
-34
lines changed

6 files changed

+34
-34
lines changed

‎packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import { Skeleton } from '@patternfly/react-core';
22

3-
export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
3+
export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading default content" />;

‎packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { Skeleton } from '@patternfly/react-core';
22

33
export const SkeletonPercentageHeight: React.FunctionComponent = () => (
44
<div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
5-
<Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
6-
<Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
7-
<Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
8-
<Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
9-
<Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
10-
<Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
5+
<Skeleton height="25%" width="15%" screenreaderText="Loading percentage height content" />
6+
<Skeleton height="33%" width="15%" />
7+
<Skeleton height="50%" width="15%" />
8+
<Skeleton height="66%" width="15%" />
9+
<Skeleton height="75%" width="15%" />
10+
<Skeleton height="100%" width="15%" />
1111
</div>
1212
);

‎packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { Skeleton } from '@patternfly/react-core';
33

44
export const SkeletonPercentageWidth: React.FunctionComponent = () => (
55
<Fragment>
6-
<Skeleton width="25%" screenreaderText="Loaded 25% of content" />
6+
<Skeleton width="25%" screenreaderText="Loading percentage width content" />
77
<br />
8-
<Skeleton width="33%" screenreaderText="Loaded 33% of content" />
8+
<Skeleton width="33%" />
99
<br />
10-
<Skeleton width="50%" screenreaderText="Loaded 50% of content" />
10+
<Skeleton width="50%" />
1111
<br />
12-
<Skeleton width="66%" screenreaderText="Loaded 66% of content" />
12+
<Skeleton width="66%" />
1313
<br />
14-
<Skeleton width="75%" screenreaderText="Loaded 75% of content" />
14+
<Skeleton width="75%" />
1515
<br />
1616
<Skeleton />
1717
</Fragment>

‎packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@ import { Skeleton } from '@patternfly/react-core';
44
export const SkeletonShapes: React.FunctionComponent = () => (
55
<Fragment>
66
Small circle
7-
<Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
7+
<Skeleton shape="circle" width="15%" screenreaderText="Loading circle content" />
88
<br />
99
Medium circle
10-
<Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
10+
<Skeleton shape="circle" width="30%" />
1111
<br />
1212
Large circle
13-
<Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
13+
<Skeleton shape="circle" width="50%" />
1414
<br />
1515
Small square
16-
<Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
16+
<Skeleton shape="square" width="15%" screenreaderText="Loading square content" />
1717
<br />
1818
Medium square
19-
<Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
19+
<Skeleton shape="square" width="30%" />
2020
<br />
2121
Large square
22-
<Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
22+
<Skeleton shape="square" width="50%" />
2323
<br />
2424
Small rectangle
2525
<div style={{ height: '200px' }}>
26-
<Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
26+
<Skeleton height="50%" width="50%" screenreaderText="Loading rectangle content" />
2727
</div>
2828
<br />
2929
Medium rectangle
3030
<div style={{ height: '200px' }}>
31-
<Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
31+
<Skeleton height="75%" width="75%" />
3232
</div>
3333
<br />
3434
Large rectangle
3535
<div style={{ height: '200px' }}>
36-
<Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
36+
<Skeleton height="100%" />
3737
</div>
3838
</Fragment>
3939
);

‎packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,24 @@ import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_fo
1212
export const SkeletonText: React.FunctionComponent = () => (
1313
<Fragment>
1414
{t_global_font_size_4xl.name}
15-
<Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
15+
<Skeleton fontSize="4xl" screenreaderText="Loading text content" />
1616
<br />
1717
{t_global_font_size_3xl.name}
18-
<Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
18+
<Skeleton fontSize="3xl" />
1919
<br />
2020
{t_global_font_size_2xl.name}
21-
<Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
21+
<Skeleton fontSize="2xl" />
2222
<br />
2323
{t_global_font_size_xl.name}
24-
<Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
24+
<Skeleton fontSize="xl" />
2525
<br />
2626
{t_global_font_size_lg.name}
27-
<Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
27+
<Skeleton fontSize="lg" />
2828
<br />
2929
{t_global_font_size_md.name}
30-
<Skeleton fontSize="md" screenreaderText="Loading font size md" />
30+
<Skeleton fontSize="md" />
3131
<br />
3232
{t_global_font_size_sm.name}
33-
<Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
33+
<Skeleton fontSize="sm" />
3434
</Fragment>
3535
);

‎packages/react-core/src/demos/examples/Skeleton/SkeletonCard.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
77
<CardBody>
88
<Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
99
<Skeleton screenreaderText="Loading content" />
10-
<Skeleton width="66%" screenreaderText="Loaded 66% of content" />
11-
<Skeleton width="25%" screenreaderText="Loaded 25% of content" />
12-
<Skeleton width="50%" screenreaderText="Loaded 50% of content" />
10+
<Skeleton width="66%" />
11+
<Skeleton width="25%" />
12+
<Skeleton width="50%" />
1313
</Flex>
1414
</CardBody>
1515
<CardBody>
@@ -18,9 +18,9 @@ export const SkeletonCard: React.FunctionComponent = () => {
1818
<CardBody>
1919
<Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
2020
<Skeleton screenreaderText="Loading content" />
21-
<Skeleton width="25%" screenreaderText="Loaded 25% of content" />
22-
<Skeleton width="75%" screenreaderText="Loaded 75% of content" />
23-
<Skeleton width="50%" screenreaderText="Loaded 50% of content" />
21+
<Skeleton width="25%" />
22+
<Skeleton width="75%" />
23+
<Skeleton width="50%" />
2424
</Flex>
2525
</CardBody>
2626
</Card>

0 commit comments

Comments
 (0)