@workday/canvas-kit-docs 10.3.32 → 10.3.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -28,7 +28,19 @@ yarn add @workday/canvas-kit-react
|
|
|
28
28
|
|
|
29
29
|
<ExampleCodeBlock code={RTL} />
|
|
30
30
|
|
|
31
|
-
###
|
|
31
|
+
### Adding screen reader support to loading animations
|
|
32
|
+
|
|
33
|
+
Sometimes, letting users know when content has finished loading is just as important as asking users
|
|
34
|
+
to "please wait" while content is loading. The disappearance of an animation is information that
|
|
35
|
+
might need description. In this example, we are using `AriaLiveRegion` and `AccessibleHide`
|
|
36
|
+
components included in Canvas to describe both the appearance and disappearance of `LoadingDots`.
|
|
37
|
+
|
|
38
|
+
- When idle, render an empty live region
|
|
39
|
+
- When loading, render `LoadingDots` inside the live region,
|
|
40
|
+
- When complete, render `AccessibleHide` inside the live region expressing "Complete!"
|
|
41
|
+
- We can assign a name to `AriaLiveRegion` component by passing in `aria-label="Loading"`
|
|
42
|
+
- We can declare `LoadingDots` a labeled graphic by passing `role="img"` and
|
|
43
|
+
`aria-label="Please wait..."` into the component
|
|
32
44
|
|
|
33
45
|
<ExampleCodeBlock code={Accessible} />
|
|
34
46
|
|
|
@@ -1,6 +1,44 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
|
|
3
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {SecondaryButton} from '@workday/canvas-kit-react/button';
|
|
6
|
+
import {createStyles, cssVar} from '@workday/canvas-kit-styling';
|
|
7
|
+
import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
|
|
8
|
+
|
|
9
|
+
const loadingStyles = createStyles({
|
|
10
|
+
backgroundColor: base.licorice300,
|
|
11
|
+
padding: system.space.x3,
|
|
12
|
+
});
|
|
3
13
|
|
|
4
14
|
export default () => {
|
|
5
|
-
|
|
15
|
+
const [loadingState, setLoadingState] = React.useState('idle');
|
|
16
|
+
|
|
17
|
+
React.useEffect(() => {
|
|
18
|
+
const timer = setTimeout(() => {
|
|
19
|
+
if (loadingState === 'loading') {
|
|
20
|
+
setLoadingState('success');
|
|
21
|
+
}
|
|
22
|
+
}, 4000);
|
|
23
|
+
|
|
24
|
+
return () => {
|
|
25
|
+
clearTimeout(timer);
|
|
26
|
+
};
|
|
27
|
+
}, [loadingState]);
|
|
28
|
+
|
|
29
|
+
const handleLoad = () => {
|
|
30
|
+
setLoadingState('loading');
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<Flex gap={cssVar(system.space.x4)}>
|
|
35
|
+
<SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
|
|
36
|
+
<AriaLiveRegion aria-label="Loading">
|
|
37
|
+
{loadingState === 'loading' && (
|
|
38
|
+
<LoadingDots className={loadingStyles} role="img" aria-label="Please wait..." />
|
|
39
|
+
)}
|
|
40
|
+
{loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
|
|
41
|
+
</AriaLiveRegion>
|
|
42
|
+
</Flex>
|
|
43
|
+
);
|
|
6
44
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.34",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^10.3.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^10.3.
|
|
49
|
-
"@workday/canvas-kit-react": "^10.3.
|
|
50
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^10.3.34",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^10.3.34",
|
|
49
|
+
"@workday/canvas-kit-react": "^10.3.34",
|
|
50
|
+
"@workday/canvas-kit-styling": "^10.3.34",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "fae866b068464b06983dd44e1bb6a63266c5664e"
|
|
63
63
|
}
|