@workday/canvas-kit-docs 16.2.0 → 16.2.1
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.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.2.
|
|
23
|
-
"@workday/canvas-kit-react": "16.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.2.1",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.2.1",
|
|
23
|
+
"@workday/canvas-kit-react": "16.2.1",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.2.1",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.2.1",
|
|
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.2.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.2.
|
|
24
|
-
"@workday/canvas-kit-react": "16.2.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.2.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.2.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.2.1",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.2.1",
|
|
24
|
+
"@workday/canvas-kit-react": "16.2.1",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.2.1",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.2.1",
|
|
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"
|
|
@@ -24,7 +24,7 @@ yarn add @workday/canvas-kit-react
|
|
|
24
24
|
### Basic Example
|
|
25
25
|
|
|
26
26
|
`ActionBar` includes a container `ActionBar` component and the following subcomponent:
|
|
27
|
-
`ActionBar.List` which should
|
|
27
|
+
`ActionBar.List` which should contain `ActionBar.Item`.
|
|
28
28
|
|
|
29
29
|
In a basic example of an `ActionBar` there are two buttons. The primary action button should be used
|
|
30
30
|
only once and left aligned if content is left to right, followed by secondary buttons. Tertiary
|
|
@@ -41,8 +41,8 @@ with `ActionBar.Item` such as `icon` or `size`.
|
|
|
41
41
|
|
|
42
42
|
### Delete Action Example
|
|
43
43
|
|
|
44
|
-
`ActionBar.Item` is a `SecondaryButton` by default but it's
|
|
45
|
-
such as `DeleteButton`, by using `as` prop.
|
|
44
|
+
`ActionBar.Item` is a `SecondaryButton` by default but it's possible to change it to another
|
|
45
|
+
element, such as `DeleteButton`, by using `as` prop.
|
|
46
46
|
|
|
47
47
|
<ExampleCodeBlock code={DeleteAction} />
|
|
48
48
|
|
|
@@ -75,13 +75,15 @@ You can change it from the default of 3 to any number greater than 1 and less th
|
|
|
75
75
|
The primary accessibility goal is a clearly named group of page-level actions where every action is
|
|
76
76
|
a native, keyboard-operable button. Use Action Bar for the primary and secondary actions of a page
|
|
77
77
|
or task. For a single action, use a [Button](/components/buttons/button/#accessibility) directly.
|
|
78
|
-
For a dense set of icon or dropdown controls that behaves as one tab stop, use
|
|
79
|
-
[Toolbar](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-toolbar--docs). For
|
|
80
|
-
actions that open a task flow, compose [Modal](/components/popups/modal/#accessibility) or
|
|
81
|
-
[Dialog](/components/popups/dialog/#accessibility) from an **`ActionBar.Item`**.
|
|
82
78
|
|
|
83
|
-
|
|
84
|
-
|
|
79
|
+
Overflow in Action Bar uses [Menu](/components/popups/menu).
|
|
80
|
+
|
|
81
|
+
For actions that open a modal or dialog, compose [Modal](/components/popups/modal) or
|
|
82
|
+
[Dialog](/components/popups/dialog) from an **`ActionBar.Item`** (see **Dialog/Modal trigger
|
|
83
|
+
composition** in Accessibility Requirements below).
|
|
84
|
+
|
|
85
|
+
When actions overflow, keyboard and assistive technology behavior follow Canvas Kit
|
|
86
|
+
[Menu](/components/popups/menu/#accessibility). For broader guidance, see the Canvas Kit
|
|
85
87
|
[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).
|
|
86
88
|
|
|
87
89
|
### Minimum Accessible Structure
|
|
@@ -95,7 +97,7 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
|
|
|
95
97
|
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
96
98
|
|
|
97
99
|
<ActionBar>
|
|
98
|
-
<ActionBar.List as="section" aria-label="
|
|
100
|
+
<ActionBar.List position="relative" as="section" aria-label="Action Bar">
|
|
99
101
|
<ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
|
|
100
102
|
First Action
|
|
101
103
|
</ActionBar.Item>
|
|
@@ -113,45 +115,34 @@ Canvas Kit applies these automatically. **Do not duplicate them** in consuming c
|
|
|
113
115
|
|
|
114
116
|
**ARIA and DOM** (_applied by hooks/subcomponents_):
|
|
115
117
|
|
|
116
|
-
- **`ActionBar`**:
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
with **`aria-label`** to expose a landmark. It is positioned fixed to the bottom of the viewport
|
|
120
|
-
unless you override `position`.
|
|
121
|
-
- **`ActionBar.Item`**: Renders a native `<button>` through **`SecondaryButton`** (or the component
|
|
122
|
-
passed to `as`). It inherits the [Button accessibility](/components/buttons/button/#accessibility)
|
|
123
|
-
behavior, including visible label wiring and decorative `icon` handling.
|
|
118
|
+
- **`ActionBar.Item`**: Defaults to **`SecondaryButton`**, which renders a native
|
|
119
|
+
`<button type="button">` with native keyboard behavior. Visible text provides its accessible name.
|
|
120
|
+
When overriding **`as`**, preserve the semantics required by that component.
|
|
124
121
|
- **Overflow**: Items that do not fit, or that exceed `maximumVisible`, receive `aria-hidden`,
|
|
125
122
|
`inert`, and `disabled`, so they are removed from the tab order and the accessibility tree and
|
|
126
123
|
appear in the overflow menu instead.
|
|
127
124
|
- **`ActionBar.OverflowButton`**: Renders a **`SecondaryButton`** with the related-actions icon,
|
|
128
125
|
`aria-haspopup`, and `aria-expanded` through the **`Menu.Target`**. It is `aria-hidden` with
|
|
129
126
|
`tabIndex={-1}` while no items overflow, and gains `tabIndex={0}` once items overflow.
|
|
130
|
-
- **`ActionBar.Menu`**:
|
|
131
|
-
|
|
132
|
-
**`ActionBar.Menu.Item`** has `role="menuitem"` with roving `tabIndex`.
|
|
133
|
-
|
|
134
|
-
**Focus** (_applied by the model_):
|
|
127
|
+
- **`ActionBar.Menu`**: The standard [Menu](/components/popups/menu/#accessibility) API (`ActionBar`
|
|
128
|
+
shares one menu model with **`ActionBar.OverflowButton`**).
|
|
135
129
|
|
|
136
|
-
|
|
137
|
-
- Selecting an item closes the menu.
|
|
138
|
-
- Closing the menu (Escape, outside click, or selection) returns focus to **`ActionBar.OverflowButton`**.
|
|
130
|
+
**Keyboard** (_native `<button>` behavior_):
|
|
139
131
|
|
|
140
|
-
|
|
132
|
+
Visible **`ActionBar.Item`** components use native `<button>` keyboard support: each item is its own
|
|
133
|
+
tab stop (<kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>), and <kbd>Enter</kbd> or
|
|
134
|
+
<kbd>Space</kbd> activates it. Action Bar does not use roving tabindex. Overflow menu behavior
|
|
135
|
+
follows [Menu accessibility](/components/popups/menu/#accessibility); **`ActionBar.OverflowButton`**
|
|
136
|
+
is the menu target.
|
|
141
137
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
| <kbd>Enter</kbd> / <kbd>Space</kbd> | Activates the focused item, or opens the overflow menu |
|
|
146
|
-
| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> | Opens the overflow menu from the overflow button |
|
|
147
|
-
| <kbd>ArrowDown</kbd> / <kbd>ArrowUp</kbd> inside menu | Moves between overflow menu items |
|
|
148
|
-
| <kbd>Escape</kbd> | Closes the overflow menu and returns focus to the overflow button |
|
|
149
|
-
| <kbd>Tab</kbd> inside menu | Closes the menu and moves focus to the next focusable element on the page |
|
|
138
|
+
Keyboard focus and screen reader reading order follow **DOM order** among visible
|
|
139
|
+
**`ActionBar.Item`** components and **`ActionBar.OverflowButton`**, not the fixed visual position of
|
|
140
|
+
the bar on the viewport.
|
|
150
141
|
|
|
151
142
|
**Screen reader expectations** (_when built-in behaviors are used as intended_):
|
|
152
143
|
|
|
153
|
-
- On entering the group, the landmark is announced with the **`aria-label`** (for example, "
|
|
154
|
-
|
|
144
|
+
- On entering the group, the landmark is announced with the **`aria-label`** (for example, "Action
|
|
145
|
+
Bar, region").
|
|
155
146
|
- Each visible item is announced by its text and role (for example, "First Action, button").
|
|
156
147
|
- The overflow button is announced with its **`aria-label`** and as a menu button with expanded or
|
|
157
148
|
collapsed state (for example, "More actions, menu button, collapsed").
|
|
@@ -163,53 +154,80 @@ Canvas Kit applies these automatically. **Do not duplicate them** in consuming c
|
|
|
163
154
|
Required in application code for an accessible Action Bar. Rows marked _(conditional)_ apply only
|
|
164
155
|
when the situation matches—otherwise omit.
|
|
165
156
|
|
|
166
|
-
**If no design spec is provided:** render **`ActionBar
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
| Requirement
|
|
172
|
-
|
|
|
173
|
-
| Group label
|
|
174
|
-
| Item accessible name
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
157
|
+
**If no design spec is provided:** render **`ActionBar.List`** with `as="section"` and a translated
|
|
158
|
+
**`aria-label`**, and **`ActionBar.Item`** components with visible text. Reserve space so the fixed
|
|
159
|
+
bar does not cover page content or focused controls. Omit an icon-only item, a dialog or modal
|
|
160
|
+
trigger, an overflow button, and **`disabled`** unless the spec requires them.
|
|
161
|
+
|
|
162
|
+
| Requirement | How to satisfy |
|
|
163
|
+
| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
164
|
+
| Group label | `as="section"` and a translated **`aria-label`** on **`ActionBar.List`** that is unique among landmarks on the page |
|
|
165
|
+
| Item accessible name | Non-empty visible text as the child of every **`ActionBar.Item`** |
|
|
166
|
+
| Icon-only name _(conditional)_ | When the spec requires an icon-only **`ActionBar.Item`**, wrap it in **`Tooltip`** with **`title`** and `type="label"` (preferred), or set **`aria-label`** on the item when the spec says not to use a tooltip. |
|
|
167
|
+
| Dialog or modal trigger _(conditional)_ | See **Dialog/Modal trigger composition** below, and the popup component’s accessibility section |
|
|
168
|
+
| Overflow button name _(conditional)_ | Translated **`aria-label`** on **`ActionBar.OverflowButton`**, passed through **`overflowButton`** on **`ActionBar.List`** |
|
|
169
|
+
| Focus not obscured | Reserve space (padding, spacer, or layout) so the fixed **`ActionBar.List`** does not cover page content or focused controls |
|
|
170
|
+
| Disabled action _(conditional)_ | Native **`disabled`** on **`ActionBar.Item`** when the spec marks the action unavailable |
|
|
171
|
+
|
|
172
|
+
#### Dialog/Modal trigger composition _(Conditional requirement)_
|
|
173
|
+
|
|
174
|
+
Place **`Dialog`** or **`Modal`** (whichever matches the design) inside **`ActionBar.List`**,
|
|
175
|
+
wrapping only the bar action that opens it. Render that action as
|
|
176
|
+
**`Dialog.Target as={ActionBar.Item}`** or **`Modal.Target as={ActionBar.Item}`** so the popup model
|
|
177
|
+
owns open, close, and focus while the item still registers with the Action Bar. Other
|
|
178
|
+
**`ActionBar.Item`** components stay siblings outside the popup container.
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import {ActionBar} from '@workday/canvas-kit-react/action-bar';
|
|
182
|
+
import {Dialog} from '@workday/canvas-kit-react/dialog';
|
|
183
|
+
|
|
184
|
+
<ActionBar>
|
|
185
|
+
<ActionBar.List position="relative" as="section" aria-label="Action Bar">
|
|
186
|
+
<Dialog>
|
|
187
|
+
<Dialog.Target as={ActionBar.Item}>Create</Dialog.Target>
|
|
188
|
+
<Dialog.Popper>
|
|
189
|
+
<Dialog.Card>
|
|
190
|
+
<Dialog.Heading>Create</Dialog.Heading>
|
|
191
|
+
{/* Dialog.Body, actions — see Dialog accessibility */}
|
|
192
|
+
</Dialog.Card>
|
|
193
|
+
</Dialog.Popper>
|
|
194
|
+
</Dialog>
|
|
195
|
+
<ActionBar.Item>Cancel</ActionBar.Item>
|
|
196
|
+
</ActionBar.List>
|
|
197
|
+
</ActionBar>;
|
|
198
|
+
```
|
|
184
199
|
|
|
185
200
|
**Summary for code generation:**
|
|
186
201
|
|
|
187
202
|
- **REQUIRED:** **`ActionBar.List`** with `as="section"` and a translated **`aria-label`**; every
|
|
188
|
-
**`ActionBar.Item`** with visible text;
|
|
189
|
-
|
|
190
|
-
|
|
203
|
+
**`ActionBar.Item`** with visible text; reserve space so the fixed bar does not cover page content
|
|
204
|
+
or focused controls
|
|
205
|
+
- **CONDITIONAL:** icon-only **`Tooltip`** / **`aria-label`** naming; **`Dialog`** / **`Modal`**
|
|
206
|
+
composition; **`overflowButton`** with an **`aria-label`**; **`disabled`** when the spec marks an
|
|
207
|
+
action unavailable
|
|
191
208
|
|
|
192
209
|
### Anti-Patterns
|
|
193
210
|
|
|
194
211
|
Do **not** generate code that does the following (see **Accessibility Requirements** above for what
|
|
195
|
-
to supply instead)
|
|
212
|
+
to supply instead).
|
|
196
213
|
|
|
197
|
-
- Omit `as="section"` or **`aria-label`** on **`ActionBar.List
|
|
198
|
-
unidentifiable to screen reader users
|
|
214
|
+
- Omit `as="section"` or **`aria-label`** on **`ActionBar.List`**
|
|
199
215
|
- Reuse the same **`aria-label`** for **`ActionBar.List`** and another landmark on the page
|
|
216
|
+
- Use Action Bar for a single action—use [Button](/components/buttons/button/#accessibility) instead
|
|
217
|
+
- Add links or URL navigation in Action Bar (for example **`Hyperlink`** or **`href`** on
|
|
218
|
+
**`ActionBar.Item`**)—bar actions should be buttons
|
|
200
219
|
- Use more than one **`PrimaryButton`** or any **`TertiaryButton`** in an Action Bar
|
|
201
|
-
- Render **`ActionBar.Item`** without visible text or as a non-button element with `onClick`
|
|
202
220
|
- Add `role="toolbar"`, `role="group"`, roving tabindex, or arrow-key handlers to
|
|
203
|
-
**`ActionBar.List
|
|
221
|
+
**`ActionBar.List`**
|
|
222
|
+
- Hand-set **`aria-haspopup`**, **`aria-expanded`**, or **`aria-hidden`** on
|
|
223
|
+
**`ActionBar.OverflowButton`** or overflowing **`ActionBar.Item`**—the Action Bar model sets these
|
|
204
224
|
- Render **`ActionBar.OverflowButton`** without **`aria-label`**
|
|
205
|
-
-
|
|
206
|
-
|
|
207
|
-
-
|
|
208
|
-
|
|
209
|
-
-
|
|
210
|
-
-
|
|
211
|
-
- Move focus manually after the overflow menu closes—**`Menu`** returns focus to the overflow button
|
|
212
|
-
- Leave the fixed **`ActionBar.List`** covering page content or focused controls
|
|
225
|
+
- Hide overflow with CSS, `hidden`, or conditional rendering—use the dynamic API and
|
|
226
|
+
`maximumVisible`
|
|
227
|
+
- Use overflow with static children—it requires `items` on the model and render props
|
|
228
|
+
- Mismatch overflow menu item text or behavior from the visible bar items
|
|
229
|
+
- Move focus manually after the overflow menu closes
|
|
230
|
+
- Leave fixed **`ActionBar.List`** covering page content or focused controls
|
|
213
231
|
|
|
214
232
|
## Component API
|
|
215
233
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.2.
|
|
3
|
+
"version": "16.2.1",
|
|
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.2.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.2.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.2.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.2.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.2.1",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.2.1",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.2.1",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.2.1",
|
|
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": "24223441c4c032707012c80f81aa445981c5042d"
|
|
67
67
|
}
|