@workday/canvas-kit-docs 16.1.9 → 16.1.11
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.
- package/dist/es6/lib/docs.js +54 -64
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/16.0-UPGRADE-GUIDE.mdx +1 -1
- package/dist/mdx/preview-react/tabs/Tabs.mdx +4 -4
- package/dist/mdx/preview-react/tabs/examples/{OutlinedTabs.tsx → FilledTabs.tsx} +1 -1
- package/dist/mdx/preview-react/tabs/examples/RightToLeft.tsx +1 -1
- package/dist/mdx/react/button/button/Button.mdx +62 -91
- package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx +7 -2
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -88124,6 +88124,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88124
88124
|
],
|
|
88125
88125
|
"tags": {}
|
|
88126
88126
|
},
|
|
88127
|
+
{
|
|
88128
|
+
"kind": "property",
|
|
88129
|
+
"name": "cs",
|
|
88130
|
+
"required": false,
|
|
88131
|
+
"type": {
|
|
88132
|
+
"kind": "symbol",
|
|
88133
|
+
"name": "CSToPropsInput",
|
|
88134
|
+
"value": "CSToPropsInput"
|
|
88135
|
+
},
|
|
88136
|
+
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles }, or the result of {@link createVars } and\n{@link createModifiers }. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp } wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
88137
|
+
"declarations": [
|
|
88138
|
+
{
|
|
88139
|
+
"name": "cs",
|
|
88140
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
88141
|
+
}
|
|
88142
|
+
],
|
|
88143
|
+
"tags": {}
|
|
88144
|
+
},
|
|
88127
88145
|
{
|
|
88128
88146
|
"kind": "property",
|
|
88129
88147
|
"name": "variant",
|
|
@@ -88141,37 +88159,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88141
88159
|
}
|
|
88142
88160
|
]
|
|
88143
88161
|
},
|
|
88144
|
-
"description": "
|
|
88162
|
+
"description": "",
|
|
88145
88163
|
"declarations": [
|
|
88146
88164
|
{
|
|
88147
88165
|
"name": "variant",
|
|
88148
88166
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/tabs/lib/TabsItem.tsx"
|
|
88149
88167
|
}
|
|
88150
88168
|
],
|
|
88151
|
-
"tags": {
|
|
88152
|
-
"default": "'filled'"
|
|
88153
|
-
},
|
|
88154
|
-
"defaultValue": {
|
|
88155
|
-
"kind": "string",
|
|
88156
|
-
"value": "filled"
|
|
88157
|
-
}
|
|
88158
|
-
},
|
|
88159
|
-
{
|
|
88160
|
-
"kind": "property",
|
|
88161
|
-
"name": "cs",
|
|
88162
|
-
"required": false,
|
|
88163
|
-
"type": {
|
|
88164
|
-
"kind": "symbol",
|
|
88165
|
-
"name": "CSToPropsInput",
|
|
88166
|
-
"value": "CSToPropsInput"
|
|
88167
|
-
},
|
|
88168
|
-
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles }, or the result of {@link createVars } and\n{@link createModifiers }. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp } wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
88169
|
-
"declarations": [
|
|
88170
|
-
{
|
|
88171
|
-
"name": "cs",
|
|
88172
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
88173
|
-
}
|
|
88174
|
-
],
|
|
88175
88169
|
"tags": {}
|
|
88176
88170
|
},
|
|
88177
88171
|
{
|
|
@@ -88531,38 +88525,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88531
88525
|
],
|
|
88532
88526
|
"tags": {}
|
|
88533
88527
|
},
|
|
88534
|
-
{
|
|
88535
|
-
"kind": "property",
|
|
88536
|
-
"name": "variant",
|
|
88537
|
-
"required": false,
|
|
88538
|
-
"type": {
|
|
88539
|
-
"kind": "union",
|
|
88540
|
-
"value": [
|
|
88541
|
-
{
|
|
88542
|
-
"kind": "string",
|
|
88543
|
-
"value": "filled"
|
|
88544
|
-
},
|
|
88545
|
-
{
|
|
88546
|
-
"kind": "string",
|
|
88547
|
-
"value": "outlined"
|
|
88548
|
-
}
|
|
88549
|
-
]
|
|
88550
|
-
},
|
|
88551
|
-
"description": "The variant of the TabsItem.",
|
|
88552
|
-
"declarations": [
|
|
88553
|
-
{
|
|
88554
|
-
"name": "variant",
|
|
88555
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/tabs/lib/TabsItem.tsx"
|
|
88556
|
-
}
|
|
88557
|
-
],
|
|
88558
|
-
"tags": {
|
|
88559
|
-
"default": "'filled'"
|
|
88560
|
-
},
|
|
88561
|
-
"defaultValue": {
|
|
88562
|
-
"kind": "string",
|
|
88563
|
-
"value": "filled"
|
|
88564
|
-
}
|
|
88565
|
-
},
|
|
88566
88528
|
{
|
|
88567
88529
|
"kind": "property",
|
|
88568
88530
|
"name": "cs",
|
|
@@ -95244,9 +95206,21 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
95244
95206
|
"kind": "property",
|
|
95245
95207
|
"name": "variant",
|
|
95246
95208
|
"defaultValue": {
|
|
95247
|
-
"kind": "
|
|
95248
|
-
"
|
|
95249
|
-
"
|
|
95209
|
+
"kind": "property",
|
|
95210
|
+
"name": "variant",
|
|
95211
|
+
"type": {
|
|
95212
|
+
"kind": "union",
|
|
95213
|
+
"value": [
|
|
95214
|
+
{
|
|
95215
|
+
"kind": "string",
|
|
95216
|
+
"value": "filled"
|
|
95217
|
+
},
|
|
95218
|
+
{
|
|
95219
|
+
"kind": "string",
|
|
95220
|
+
"value": "outlined"
|
|
95221
|
+
}
|
|
95222
|
+
]
|
|
95223
|
+
}
|
|
95250
95224
|
},
|
|
95251
95225
|
"type": {
|
|
95252
95226
|
"kind": "union",
|
|
@@ -103687,7 +103661,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
103687
103661
|
"name": "variant",
|
|
103688
103662
|
"defaultValue": {
|
|
103689
103663
|
"kind": "string",
|
|
103690
|
-
"value": "
|
|
103664
|
+
"value": "outlined"
|
|
103691
103665
|
},
|
|
103692
103666
|
"type": {
|
|
103693
103667
|
"kind": "union",
|
|
@@ -103711,7 +103685,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
103711
103685
|
}
|
|
103712
103686
|
],
|
|
103713
103687
|
"tags": {
|
|
103714
|
-
"default": "'
|
|
103688
|
+
"default": "'outlined'"
|
|
103715
103689
|
}
|
|
103716
103690
|
},
|
|
103717
103691
|
{
|
|
@@ -106629,7 +106603,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
106629
106603
|
"name": "variant",
|
|
106630
106604
|
"defaultValue": {
|
|
106631
106605
|
"kind": "string",
|
|
106632
|
-
"value": "
|
|
106606
|
+
"value": "outlined"
|
|
106633
106607
|
},
|
|
106634
106608
|
"type": {
|
|
106635
106609
|
"kind": "union",
|
|
@@ -106653,7 +106627,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
106653
106627
|
}
|
|
106654
106628
|
],
|
|
106655
106629
|
"tags": {
|
|
106656
|
-
"default": "'
|
|
106630
|
+
"default": "'outlined'"
|
|
106657
106631
|
}
|
|
106658
106632
|
},
|
|
106659
106633
|
{
|
|
@@ -169482,6 +169456,22 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
169482
169456
|
}
|
|
169483
169457
|
}
|
|
169484
169458
|
},
|
|
169459
|
+
{
|
|
169460
|
+
"name": "listBoxContainerPartSelector",
|
|
169461
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
169462
|
+
"description": "Selector for `listBoxContainerStencil.parts.listBoxContainer` for use in other stencils' `base` rules.",
|
|
169463
|
+
"declarations": [
|
|
169464
|
+
{
|
|
169465
|
+
"name": "listBoxContainerPartSelector",
|
|
169466
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx"
|
|
169467
|
+
}
|
|
169468
|
+
],
|
|
169469
|
+
"tags": {},
|
|
169470
|
+
"type": {
|
|
169471
|
+
"kind": "string",
|
|
169472
|
+
"value": "[data-part=\"list-box-container\"]"
|
|
169473
|
+
}
|
|
169474
|
+
},
|
|
169485
169475
|
{
|
|
169486
169476
|
"name": "listBoxContainerStencil",
|
|
169487
169477
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/ListBox.tsx",
|
|
@@ -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.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
23
|
-
"@workday/canvas-kit-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.1.11",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.1.11",
|
|
23
|
+
"@workday/canvas-kit-react": "16.1.11",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.1.11",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.1.11",
|
|
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.1.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react": "16.1.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.1.11",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.1.11",
|
|
24
|
+
"@workday/canvas-kit-react": "16.1.11",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.1.11",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.1.11",
|
|
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"
|
|
@@ -400,7 +400,7 @@ functional shortcuts, refer to the storybook documentation and our example stori
|
|
|
400
400
|
**PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062)
|
|
401
401
|
|
|
402
402
|
A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana
|
|
403
|
-
Canvas visual language. It supports `filled` and `outlined` variants.
|
|
403
|
+
Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default.
|
|
404
404
|
|
|
405
405
|
```tsx
|
|
406
406
|
import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
|
|
@@ -6,7 +6,7 @@ import DynamicTabs from './examples/DynamicTabs';
|
|
|
6
6
|
import HoistedModel from './examples/HoistedModel';
|
|
7
7
|
import Icons from './examples/Icons';
|
|
8
8
|
import NamedTabs from './examples/NamedTabs';
|
|
9
|
-
import
|
|
9
|
+
import FilledTabs from './examples/FilledTabs';
|
|
10
10
|
import OverflowTabs from './examples/OverflowTabs';
|
|
11
11
|
import RightToLeft from './examples/RightToLeft';
|
|
12
12
|
import SinglePanel from './examples/SinglePanel';
|
|
@@ -39,11 +39,11 @@ that does not support overflow.
|
|
|
39
39
|
|
|
40
40
|
<ExampleCodeBlock code={Basic} />
|
|
41
41
|
|
|
42
|
-
###
|
|
42
|
+
### Filled Tabs
|
|
43
43
|
|
|
44
|
-
Set the `variant` prop of `Tabs` to `
|
|
44
|
+
Set the `variant` prop of `Tabs` to `filled` to render a filled style of tabs.
|
|
45
45
|
|
|
46
|
-
<ExampleCodeBlock code={
|
|
46
|
+
<ExampleCodeBlock code={FilledTabs} />
|
|
47
47
|
|
|
48
48
|
### Overflow Tabs
|
|
49
49
|
|
|
@@ -113,25 +113,20 @@ tokens with the fallback being `brand.primary.**`.
|
|
|
113
113
|
|
|
114
114
|
## Accessibility
|
|
115
115
|
|
|
116
|
-
The primary accessibility goal is a visible, programmatically determinable name on a native control
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
control
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
[
|
|
126
|
-
**`SegmentedControl.Item`** components)—not a lone variant button.
|
|
127
|
-
|
|
128
|
-
See the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit
|
|
129
|
-
[Accessibility overview](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-overview--docs).
|
|
116
|
+
The primary accessibility goal is a visible, programmatically determinable name on a native control that performs an in-page action (submit, open, dismiss, and similar). This page covers **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
117
|
+
|
|
118
|
+
Use [Hyperlink](/components/hyperlink/) when the control navigates to another URL or in-page location.
|
|
119
|
+
|
|
120
|
+
For [Toolbar](/components/buttons/toolbar/) icon and dropdown controls, see that component’s documentation. For a control that opens a menu, dialog, or expandable, see [Menu accessibility](/components/popups/menu/#accessibility), [Dialog accessibility](/components/popups/dialog/#accessibility), and [Expandable accessibility](/components/containers/expandable/#accessibility).
|
|
121
|
+
|
|
122
|
+
When users choose one value from **two or more** mutually exclusive options, use
|
|
123
|
+
[Segmented Control](/components/buttons/segmented-control/)—not a lone variant button. Use [Radio](/preview/inputs/radio/) when the selection needs radio semantics or native form submission.
|
|
124
|
+
|
|
125
|
+
See the [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/) and Canvas Kit [Accessibility overview](/guides/accessibility/overview/).
|
|
130
126
|
|
|
131
127
|
### Minimum Accessible Structure
|
|
132
128
|
|
|
133
|
-
The following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case,
|
|
134
|
-
text plus a decorative icon, and an icon-only control with an accessible name.
|
|
129
|
+
The following matches the [PrimaryButton](#primarybutton) examples: visible text for the default case, text plus a decorative icon, and an icon-only control with an accessible name.
|
|
135
130
|
|
|
136
131
|
```tsx
|
|
137
132
|
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
@@ -147,111 +142,87 @@ import {plusIcon, relatedActionsVerticalIcon} from '@workday/canvas-system-icons
|
|
|
147
142
|
</Tooltip>;
|
|
148
143
|
```
|
|
149
144
|
|
|
150
|
-
For icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type="label"` (which sets
|
|
151
|
-
**`aria-label`** from **`title`** so sighted users also see the label). If the spec explicitly says
|
|
152
|
-
not to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to
|
|
153
|
-
**`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
145
|
+
For icon-only buttons, prefer **`Tooltip`** with **`title`** and default `type="label"` (which sets **`aria-label`** from **`title`** so sighted users also see the label). **`Tooltip`** with `type="label"` overwrites the wrapped control’s accessible name—use it on icon-only buttons only; visible button text already supplies the name. If the spec explicitly says not to use a tooltip, set **`aria-label`** on the button instead. The same patterns apply to **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**.
|
|
154
146
|
|
|
155
147
|
### Built-in Behaviors
|
|
156
148
|
|
|
157
|
-
Canvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**,
|
|
158
|
-
**`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.
|
|
149
|
+
Canvas Kit applies these automatically on **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, and **`DeleteButton`**. **Do not duplicate them** in consuming code.
|
|
159
150
|
|
|
160
151
|
**ARIA and DOM** (_applied by button components_):
|
|
161
152
|
|
|
162
|
-
- **Variant buttons**: Render a native `<button type="button"
|
|
163
|
-
|
|
164
|
-
-
|
|
165
|
-
|
|
166
|
-
-
|
|
167
|
-
`role="presentation"` and `focusable="false"`, so icons beside visible text are not announced
|
|
168
|
-
separately.
|
|
169
|
-
- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab
|
|
170
|
-
order.
|
|
171
|
-
- **Focus**: Visible focus styling uses `:focus-visible` (and a `.focus` class twin for visual
|
|
172
|
-
testing).
|
|
153
|
+
- **Variant buttons**: Render a native `<button>` (via **`BaseButton`**) with default **`type="button"`**. A passed **`type`** prop overrides that default—use **`type="submit"`** only when the button submits its form.
|
|
154
|
+
- **Visible label**: Button text is rendered in **`BaseButton.Label`** (`<span>`) inside the `<button>` so its text contributes to the accessible name.
|
|
155
|
+
- **`icon`**: Renders **`BaseButton.Icon`** (`SystemIcon`). Canvas Kit icon SVG markup uses `role="presentation"` and `focusable="false"`, so icons beside visible text are not announced separately.
|
|
156
|
+
- **`disabled`**: Maps to the native `disabled` attribute; disabled buttons are skipped in the tab order.
|
|
157
|
+
- **Focus**: Visible focus styling uses `:focus-visible`.
|
|
173
158
|
- **`ref`**: Forwards to the underlying `<button>`.
|
|
174
|
-
- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`,
|
|
175
|
-
|
|
176
|
-
**`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle
|
|
177
|
-
design.
|
|
178
|
-
- **Menus**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`.
|
|
179
|
-
**`Menu.Target`** (and related Menu APIs) apply those when a menu is attached.
|
|
159
|
+
- **Native button attributes**: Standard props (for example `aria-label`, `aria-pressed`, `aria-expanded`, `id`, `onClick`) pass through to the `<button>` unless you change the element with **`as`**. Variant buttons do not set **`aria-pressed`** unless you pass it for a deliberate toggle design.
|
|
160
|
+
- **Popup triggers**: Variant buttons do **not** set `aria-haspopup` or `aria-expanded`. `Menu.Target`, `Expandable.Target`, and `Dialog.Target` own those per their docs.
|
|
180
161
|
|
|
181
162
|
**Keyboard** (_native `<button>` behavior_):
|
|
182
163
|
|
|
183
|
-
Variant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd>
|
|
184
|
-
for focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate. Do not replace the
|
|
185
|
-
`<button>` with a non-focusable element or suppress activation keys.
|
|
164
|
+
Variant buttons use native button keyboard support: <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> for focus order, and <kbd>Enter</kbd> or <kbd>Space</kbd> to activate.
|
|
186
165
|
|
|
187
166
|
**Screen reader expectations** (_when built-in behaviors are used as intended_):
|
|
188
167
|
|
|
189
|
-
- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and
|
|
190
|
-
role (for example, "Save, button").
|
|
168
|
+
- On focus, assistive technology announces the button name (visible text and/or `aria-label`) and role (for example, "Save, button").
|
|
191
169
|
- Icons rendered with **`icon`** next to visible text are not announced as separate images.
|
|
192
170
|
- Disabled buttons are announced as unavailable and are not in the tab order.
|
|
193
|
-
- When
|
|
194
|
-
|
|
171
|
+
- When a variant button has `aria-pressed` and a stable visible label, assistive technology announces the name, “toggle button,” and pressed or not pressed (for example, “Bold, toggle button, pressed”).
|
|
172
|
+
- When a variant button is a popup **`*.Target`**, assistive technology follows that component’s documented popup and expanded behavior.
|
|
195
173
|
|
|
196
174
|
### Accessibility Requirements
|
|
197
175
|
|
|
198
|
-
Required in application code for an accessible button. Rows marked _(conditional)_ apply only when the
|
|
199
|
-
situation matches—otherwise omit.
|
|
176
|
+
Required in application code for an accessible button. Rows marked _(conditional)_ apply only when the situation matches—otherwise omit.
|
|
200
177
|
|
|
201
|
-
**If no design spec is provided:** use
|
|
202
|
-
with non-empty visible text. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom
|
|
203
|
-
**`id`**, **`as`**, and a **`ref`** unless the spec requires them.
|
|
178
|
+
**If no design spec is provided:** use **`PrimaryButton`** with non-empty visible text and default **`type="button"`**. Omit **`icon`**, **`disabled`**, **`Tooltip`**, **`aria-label`**, custom **`id`**, **`as`**, **`type="submit"`**, and a **`ref`** unless the spec requires them.
|
|
204
179
|
|
|
205
|
-
| Requirement
|
|
180
|
+
| Requirement | How to satisfy |
|
|
206
181
|
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
207
|
-
| Accessible name
|
|
208
|
-
| Icon-only name _(conditional)_ | **`Tooltip`** with `type="label"` and **`title`** (
|
|
209
|
-
| Variant choice | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions
|
|
210
|
-
| Decorative icon _(conditional)_ | **`icon`** with visible text—
|
|
211
|
-
|
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
|
|
|
217
|
-
|
|
|
182
|
+
| Accessible name | Non-empty visible text inside the variant button |
|
|
183
|
+
| Icon-only name _(conditional)_ | **`Tooltip`** with `type="label"` and **`title`** on icon-only buttons (see [PrimaryButton](#primarybutton)), or **`aria-label`** when the spec explicitly says not to use a tooltip |
|
|
184
|
+
| Variant choice | **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** per design; **`DeleteButton`** only for destructive actions |
|
|
185
|
+
| Decorative icon _(conditional)_ | **`icon`** with visible text—meaning comes from button text |
|
|
186
|
+
| Form submit _(conditional)_ | **`type="submit"`** on the variant button inside a form that should submit when activated; omit **`type="submit"`** otherwise (default **`type="button"`**) |
|
|
187
|
+
| Mutually exclusive group _(conditional)_ | [Segmented Control](/components/buttons/segmented-control/) for two or more in-page mutually exclusive options—not a single variant button or lone on/off control; use [Radio](/preview/inputs/radio/) when the selection is a form value |
|
|
188
|
+
| Toggle pressed state _(conditional)_ | On/off controls: use **`aria-pressed`** only when the visible label stays stable while state changes (not Mute/Unmute-style labels); set **`aria-pressed`** in both states and include or ask the user for visual styling for pressed state—variant buttons do not provide default pressed visuals. Omit for one-shot actions (Save, Delete, Open). For a toolbar toggle, use **`ToolbarIconButton`**—see [Toolbar](/components/buttons/toolbar/) |
|
|
189
|
+
| Menu trigger _(conditional)_ | Compose **`Menu`** with **`Menu.Target as={PrimaryButton}`** (**`Menu.Target`** defaults to **`SecondaryButton`**). Context menus: **`Menu.ContextTarget`**. See [Menu accessibility](/components/popups/menu/#accessibility) and **Menu trigger composition** below |
|
|
190
|
+
| Related button groups _(conditional)_ | Semantic grouping (`<ul>` / `<li>` or `<fieldset>` / `<legend>`) when several buttons share one question or legend; each control still needs its own accessible name |
|
|
191
|
+
| Disabled _(conditional)_ | Native **`disabled`** on the variant button when the spec marks the action unavailable |
|
|
192
|
+
| Navigation _(conditional)_ | [Hyperlink](/components/hyperlink/) instead of a variant button when the action is navigation |
|
|
193
|
+
| Programmatic focus _(conditional)_ | `ref` on the variant button and `focus()` only when the product must move focus after an action—omit by default |
|
|
194
|
+
|
|
195
|
+
**Menu trigger composition** _(conditional)_:
|
|
196
|
+
|
|
197
|
+
**`Menu.Target`** renders the trigger—do not nest a variant button inside it. Use **`as`** for a different variant. Add **`Menu.Popper`**, **`Menu.Card`**, and **`Menu.List`** per [Menu accessibility](/components/popups/menu/#accessibility).
|
|
198
|
+
|
|
199
|
+
```tsx
|
|
200
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
201
|
+
import {Menu} from '@workday/canvas-kit-react/menu';
|
|
202
|
+
|
|
203
|
+
<Menu>
|
|
204
|
+
<Menu.Target as={PrimaryButton}>Open</Menu.Target>
|
|
205
|
+
{/* Menu.Popper, Menu.Card, Menu.List — see Menu accessibility */}
|
|
206
|
+
</Menu>;
|
|
207
|
+
```
|
|
218
208
|
|
|
219
209
|
**Summary for code generation:**
|
|
220
210
|
|
|
221
|
-
- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for
|
|
222
|
-
|
|
223
|
-
to use a tooltip)
|
|
224
|
-
- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`aria-pressed`** for toggle
|
|
225
|
-
specs; **`Menu`** for menus; **`Hyperlink`** for navigation; grouping markup; programmatic focus
|
|
226
|
-
via `ref`
|
|
211
|
+
- **REQUIRED:** variant button with a non-empty accessible name (visible text for text buttons; for icon-only, **`Tooltip`** with `type="label"` preferred, or **`aria-label`** when the spec says not to use a tooltip)
|
|
212
|
+
- **CONDITIONAL:** **`icon`**; icon-only naming; **`disabled`**; **`type="submit"`**; **`Menu`** composition with **`Menu.Target as={…}`**; **`ToolbarIconButton`** / **`aria-pressed`** per toggle row; **`Hyperlink`** for navigation; grouping markup; programmatic focus via `ref`
|
|
227
213
|
|
|
228
214
|
### Anti-Patterns
|
|
229
215
|
|
|
230
216
|
Do **not** generate code that does the following (see **Accessibility Requirements** above for what
|
|
231
217
|
to supply instead):
|
|
232
218
|
|
|
233
|
-
- Use a `<div
|
|
234
|
-
-
|
|
235
|
-
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
-
|
|
239
|
-
|
|
240
|
-
- Use **`Tooltip`** with `type="muted"` on icon-only buttons—muted tooltips do not set an accessible
|
|
241
|
-
name
|
|
242
|
-
- Use **`aria-label`** on icon-only buttons when the spec allows tooltips—prefer **`Tooltip`** with
|
|
243
|
-
`type="label"` unless the spec explicitly says not to use a tooltip
|
|
244
|
-
- Set `aria-haspopup` or `aria-expanded` on a variant button without **`Menu`**—use
|
|
245
|
-
**`Menu.Target`** so open state stays in sync with the menu model
|
|
246
|
-
- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open)—see **Toggle pressed state** in the
|
|
247
|
-
requirements table
|
|
248
|
-
- Use **`SegmentedControl`** for a single option or a lone on/off control—see **Mutually exclusive
|
|
249
|
-
group** in the requirements table
|
|
250
|
-
- Add `aria-hidden` or change the **`role`** on **`icon`** when visible button text already conveys
|
|
251
|
-
meaning—Canvas Kit icons are presentational.
|
|
252
|
-
- Use **`aria-disabled`** instead of **`disabled`**—variant buttons map unavailability to the
|
|
253
|
-
native **`disabled`** attribute
|
|
254
|
-
- Duplicate menu ARIA that **`Menu.Target`** already applies
|
|
219
|
+
- Use a `<div>`, `<span>`, `role="button"`, or other non-`<button>` with `onClick`, or suppress <kbd>Enter</kbd> / <kbd>Space</kbd> on a control that should act as a button—use **`PrimaryButton`**, **`SecondaryButton`**, **`TertiaryButton`**, or **`DeleteButton`** for native keyboard and assistive technology behavior
|
|
220
|
+
- Use a variant button when the action is URL navigation—use [Hyperlink](/components/hyperlink/)
|
|
221
|
+
- Leave icon-only buttons unnamed, rely on the icon alone, use **`Tooltip`** with `type="muted"`, or use **`aria-label`** when the spec allows **`Tooltip`** with `type="label"`—see **Icon-only name**
|
|
222
|
+
- Nest a variant button inside **`Menu.Target`**, or hand-set **`aria-haspopup`** or **`aria-expanded`** when **`Menu.Target`**, **`Expandable.Target`**, or **`Dialog.Target`** owns that state—use **`Menu.Target as={…}`** (and the matching popup docs) instead
|
|
223
|
+
- Set **`aria-pressed`** on one-shot actions (Save, Delete, Open) or on buttons whose visible label changes with state (for example Mute/Unmute)—see **Toggle pressed state**
|
|
224
|
+
- Use **`SegmentedControl`** for a single option or a lone on/off control—see **Mutually exclusive group**
|
|
225
|
+
- Use **`aria-disabled`** instead of native **`disabled`** on variant buttons
|
|
255
226
|
|
|
256
227
|
## Component API
|
|
257
228
|
|
|
@@ -4,6 +4,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
|
4
4
|
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
5
5
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import {Heading} from '@workday/canvas-kit-react/text';
|
|
7
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
7
8
|
import {createStyles} from '@workday/canvas-kit-styling';
|
|
8
9
|
import {
|
|
9
10
|
caretDownIcon,
|
|
@@ -48,7 +49,9 @@ export default () => (
|
|
|
48
49
|
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
49
50
|
Primary
|
|
50
51
|
</PrimaryButton>
|
|
51
|
-
<
|
|
52
|
+
<Tooltip title="Related Actions">
|
|
53
|
+
<PrimaryButton icon={relatedActionsVerticalIcon} />
|
|
54
|
+
</Tooltip>
|
|
52
55
|
</Flex>
|
|
53
56
|
</CanvasProvider>
|
|
54
57
|
<Heading size="medium" as="h3">
|
|
@@ -63,7 +66,9 @@ export default () => (
|
|
|
63
66
|
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
64
67
|
Primary
|
|
65
68
|
</PrimaryButton>
|
|
66
|
-
<
|
|
69
|
+
<Tooltip title="Related Actions">
|
|
70
|
+
<PrimaryButton icon={relatedActionsVerticalIcon} />
|
|
71
|
+
</Tooltip>
|
|
67
72
|
</Flex>
|
|
68
73
|
</div>
|
|
69
74
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.1.
|
|
3
|
+
"version": "16.1.11",
|
|
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.1.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.1.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.1.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.1.11",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.1.11",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.1.11",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.1.11",
|
|
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": "72499aa0a5ca64faf0c912c1570ac72f5b7c8d3b"
|
|
67
67
|
}
|