@workday/canvas-kit-docs 16.0.11 → 16.0.12
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.
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "16.0.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.0.
|
|
23
|
-
"@workday/canvas-kit-react": "16.0.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.0.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.0.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.0.12",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.0.12",
|
|
23
|
+
"@workday/canvas-kit-react": "16.0.12",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.0.12",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.0.12",
|
|
26
26
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "16.0.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.0.
|
|
24
|
-
"@workday/canvas-kit-react": "16.0.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.0.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.0.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.0.12",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.0.12",
|
|
24
|
+
"@workday/canvas-kit-react": "16.0.12",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.0.12",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.0.12",
|
|
27
27
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
2
|
|
|
3
3
|
import Basic from './examples/Basic';
|
|
4
4
|
import Custom from './examples/Custom';
|
|
@@ -46,6 +46,10 @@ position of the icon may be adjusted depending on where you place it in the mark
|
|
|
46
46
|
|
|
47
47
|
<ExampleCodeBlock code={Icon} />
|
|
48
48
|
|
|
49
|
+
> **Accessibility Note**: In this example, the icon is used as a decoration and is intentionally
|
|
50
|
+
> hidden from screen readers. If you're using icons to convey additional information, add
|
|
51
|
+
> `role="img"` and a translated `aria-label` string to `StatusIndicator.Icon`.
|
|
52
|
+
|
|
49
53
|
### Overflow
|
|
50
54
|
|
|
51
55
|
We **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its
|
|
@@ -61,14 +65,16 @@ of `StatusIndicator` via [style props](/get-started/for-developers/documentation
|
|
|
61
65
|
Set the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the
|
|
62
66
|
following values:
|
|
63
67
|
|
|
64
|
-
- `gray`
|
|
65
|
-
- `orange`
|
|
66
|
-
- `blue`
|
|
67
|
-
- `green`
|
|
68
|
-
- `red`
|
|
68
|
+
- `neutral` (default; `gray` is a deprecated alias)
|
|
69
|
+
- `caution` (`orange` is a deprecated alias)
|
|
70
|
+
- `info` (`blue` is a deprecated alias)
|
|
71
|
+
- `positive` (`green` is a deprecated alias)
|
|
72
|
+
- `critical` (`red` is a deprecated alias)
|
|
69
73
|
- `transparent`
|
|
70
74
|
|
|
71
75
|
The background color dictated by the `variant` will be dark or light based on the `emphasis`.
|
|
76
|
+
`variant` and `emphasis` change color only—they do not change the accessible name. Put the status
|
|
77
|
+
meaning in **`StatusIndicator.Label`**.
|
|
72
78
|
|
|
73
79
|
<ExampleCodeBlock code={Variants} />
|
|
74
80
|
|
|
@@ -84,6 +90,113 @@ Status Indicator and its subcomponents support custom styling via the `cs` prop.
|
|
|
84
90
|
information, check our
|
|
85
91
|
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
|
|
86
92
|
|
|
93
|
+
## Accessibility
|
|
94
|
+
|
|
95
|
+
`StatusIndicator` is a compact, **non-interactive** status label. The accessibility goal is that
|
|
96
|
+
assistive technology users get the same status meaning as sighted users from
|
|
97
|
+
**`StatusIndicator.Label`** text—not from color, emphasis, or a decorative icon.
|
|
98
|
+
|
|
99
|
+
### Minimum Accessible Structure
|
|
100
|
+
|
|
101
|
+
The following matches the [Basic Example](#basic-example): a container and a visible label. Icon is
|
|
102
|
+
optional.
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
106
|
+
|
|
107
|
+
<StatusIndicator>
|
|
108
|
+
<StatusIndicator.Label>Unpublished</StatusIndicator.Label>
|
|
109
|
+
</StatusIndicator>;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
Always include **`StatusIndicator.Label`** with concise text that names the status. Do not rely on
|
|
113
|
+
**`variant`**, **`emphasis`**, or **`StatusIndicator.Icon`** as the only indicator of meaning.
|
|
114
|
+
|
|
115
|
+
### Built-in Behaviors
|
|
116
|
+
|
|
117
|
+
Canvas Kit applies visual layout and color through `statusIndicatorStencil` when you compose
|
|
118
|
+
**`StatusIndicator`**, **`StatusIndicator.Label`**, and optionally **`StatusIndicator.Icon`**. It
|
|
119
|
+
does **not** apply `role="img"` or an accessible name on the icon. **Do not duplicate them** in
|
|
120
|
+
consuming code. Only add icon ARIA when the informative-icon requirement below applies.
|
|
121
|
+
|
|
122
|
+
**ARIA and DOM** (_applied by subcomponents_):
|
|
123
|
+
|
|
124
|
+
- **`StatusIndicator`**: renders a `div` (override with `as` if needed). Default `maxWidth` is
|
|
125
|
+
`200px`. Default `variant` is `neutral`; default `emphasis` is `low`. No ARIA role is set.
|
|
126
|
+
- **`StatusIndicator.Label`**: renders a `span` with bold subtext, `white-space: nowrap`,
|
|
127
|
+
`overflow: hidden`, and `text-overflow: ellipsis`. Truncation is visual; the full text remains in
|
|
128
|
+
the accessibility tree.
|
|
129
|
+
- **`StatusIndicator.Icon`**: renders `SystemIcon` at size `20`. It does **not** set `role="img"` or
|
|
130
|
+
`aria-label`. If `icon.type` is missing, the icon renders nothing.
|
|
131
|
+
|
|
132
|
+
**Keyboard** (_not a control by default_):
|
|
133
|
+
|
|
134
|
+
- **`StatusIndicator`** is not in the tab order. There is no built-in keyboard behavior.
|
|
135
|
+
|
|
136
|
+
**Screen reader expectations** (_when built-in behaviors are used as intended_):
|
|
137
|
+
|
|
138
|
+
- Assistive technology should announce the **`StatusIndicator.Label`** text as the content of the
|
|
139
|
+
indicator
|
|
140
|
+
- `variant` and `emphasis` are **not** announced
|
|
141
|
+
- A decorative **`StatusIndicator.Icon`** (no `role="img"`) should not add a separate accessible
|
|
142
|
+
name
|
|
143
|
+
- [**OverflowTooltip**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs#tooltips-on-overflowing-content)
|
|
144
|
+
uses `type="muted"` and does not set `aria-label` on the target—the accessible name stays the
|
|
145
|
+
element's text content
|
|
146
|
+
|
|
147
|
+
### Accessibility Requirements
|
|
148
|
+
|
|
149
|
+
Required in application code for an accessible Status Indicator. Rows marked _(conditional)_ apply
|
|
150
|
+
only when the situation matches—otherwise omit.
|
|
151
|
+
|
|
152
|
+
**If no design spec is provided:** include a visible **`StatusIndicator.Label`**; keep the icon
|
|
153
|
+
decorative (omit `role="img"` and `aria-label`); omit `tabIndex` and **`OverflowTooltip`**. Prefer
|
|
154
|
+
short label text so truncation is unnecessary.
|
|
155
|
+
|
|
156
|
+
| Requirement | How to satisfy |
|
|
157
|
+
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
158
|
+
| Visible status text | **`StatusIndicator.Label`** with translated text that names the status (for example, "Unpublished", not color alone) |
|
|
159
|
+
| Color is not the only indicator | Use **`variant`** / **`emphasis`** only as visual reinforcement of the label. See [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81) |
|
|
160
|
+
| Decorative icon _(conditional)_ | **`StatusIndicator.Icon`** with `icon={...}` and **no** `role="img"` when the icon only supports the label visually |
|
|
161
|
+
| Informative icon _(conditional)_ | On **`StatusIndicator.Icon`**, set `role="img"` and a translated `aria-label` that adds meaning **beyond** the label text |
|
|
162
|
+
| Overflowed label _(conditional)_ | Avoid exceeding the `200px` max width. If truncation cannot be avoided, wrap **`StatusIndicator`** in **`OverflowTooltip`** and set `tabIndex={0}` so keyboard and mouse users can reveal the full text. See the [Overflow example](#overflow) |
|
|
163
|
+
|
|
164
|
+
**Informative icon** _(conditional)_:
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
168
|
+
import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
|
|
169
|
+
|
|
170
|
+
<StatusIndicator>
|
|
171
|
+
<StatusIndicator.Icon role="img" aria-label="Waiting to sync" icon={cloudArrowUpIcon} />
|
|
172
|
+
<StatusIndicator.Label>Unpublished</StatusIndicator.Label>
|
|
173
|
+
</StatusIndicator>;
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
**Summary for code generation:**
|
|
177
|
+
|
|
178
|
+
- **REQUIRED:** visible **`StatusIndicator.Label`** whose text conveys the status
|
|
179
|
+
- **CONDITIONAL:** `role="img"` + translated `aria-label` on **`StatusIndicator.Icon`**,
|
|
180
|
+
**`OverflowTooltip`** + `tabIndex={0}`
|
|
181
|
+
|
|
182
|
+
### Anti-Patterns
|
|
183
|
+
|
|
184
|
+
Do **not** generate code that does the following (see **Accessibility Requirements** above for what
|
|
185
|
+
to supply instead):
|
|
186
|
+
|
|
187
|
+
- Omit **`StatusIndicator.Label`** or use an empty label, relying on `variant`, `emphasis`, or an
|
|
188
|
+
icon for meaning
|
|
189
|
+
- Set `role="img"` on a decorative **`StatusIndicator.Icon`**, or set `role="img"` without a
|
|
190
|
+
translated `aria-label`—that can expose an unnamed image to assistive technology. See **Decorative
|
|
191
|
+
icon** and **Informative icon** in **Accessibility Requirements**
|
|
192
|
+
- Duplicate the label text as `aria-label` on the icon when the icon adds no extra meaning
|
|
193
|
+
- Add `role="status"`, `aria-live`, or `aria-label` on **`StatusIndicator`** by default—Canvas Kit
|
|
194
|
+
does not wire these, and they change how assistive technology treats a static label. If a design
|
|
195
|
+
requires announcing asynchronous updates, see
|
|
196
|
+
[ARIA Live Regions](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs)
|
|
197
|
+
- Truncate label text without **`OverflowTooltip`** and `tabIndex={0}` when keyboard users must read
|
|
198
|
+
the overflow
|
|
199
|
+
|
|
87
200
|
## Component API
|
|
88
201
|
|
|
89
202
|
<SymbolDoc name="StatusIndicator" fileName="/preview-react/" />
|
|
@@ -12,12 +12,12 @@ export default () => {
|
|
|
12
12
|
return (
|
|
13
13
|
<Flex cs={parentContainerStyles}>
|
|
14
14
|
<StatusIndicator>
|
|
15
|
-
<StatusIndicator.Icon
|
|
15
|
+
<StatusIndicator.Icon icon={cloudArrowUpIcon} />
|
|
16
16
|
<StatusIndicator.Label>Unpublished</StatusIndicator.Label>
|
|
17
17
|
</StatusIndicator>
|
|
18
18
|
<StatusIndicator variant="positive">
|
|
19
19
|
<StatusIndicator.Label>published</StatusIndicator.Label>
|
|
20
|
-
<StatusIndicator.Icon
|
|
20
|
+
<StatusIndicator.Icon icon={cloudArrowUpIcon} />
|
|
21
21
|
</StatusIndicator>
|
|
22
22
|
</Flex>
|
|
23
23
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.0.
|
|
3
|
+
"version": "16.0.12",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.0.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.0.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.0.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.0.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.0.12",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.0.12",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.0.12",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.0.12",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
55
55
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "e5a8658cb7f35a14333b162a8b4001d899a010a6"
|
|
67
67
|
}
|