@workday/canvas-kit-docs 16.2.0 → 16.2.3

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.
Files changed (9) hide show
  1. package/dist/es6/lib/docs.js +2 -2
  2. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
  3. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
  4. package/dist/mdx/preview-react/radio/Radio.mdx +133 -18
  5. package/dist/mdx/preview-react/radio/examples/Required.tsx +0 -1
  6. package/dist/mdx/preview-react/switch/Switch.mdx +119 -0
  7. package/dist/mdx/preview-react/switch/examples/Basic.tsx +1 -1
  8. package/dist/mdx/react/action-bar/ActionBar.mdx +89 -71
  9. package/package.json +6 -6
package/dist/es6/lib/docs.js CHANGED
@@ -94223,7 +94223,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
94223
94223
  ]
94224
94224
  },
94225
94225
  "required": false,
94226
- "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n error=\"caution\"\n hintId=\"hint-alert\"\n hintText=\"Deep dish is an extra $2.99\"\n label=\"Choose Your Pizza Crust\"\n useFieldset={true}\n >\n <RadioGroup\n name=\"crust\"\n onChange={handleChange}\n initialValue={value}\n aria-describedby=\"hint-alert\"\n >\n <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n </RadioGroup>\n</FormField>\n```",
94226
+ "description": "The id of hint or error text associated with each radio.\n\nDo not set this when radios are wrapped in `FormFieldGroup.Input`. `FormFieldGroup.Input`\nwrites `aria-describedby=\"hint-{id}\"` on each radio, and that value overrides\n`aria-describedby` set on `RadioGroup`. Put the message in `FormFieldGroup.Hint`.\n\n```tsx\n<FormFieldGroup error=\"caution\">\n <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\n <FormFieldGroup.Field>\n <FormFieldGroup.List as={RadioGroup} name=\"crust\" value={value} onChange={handleChange}>\n <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\"deep-dish\">\n Deep dish\n </FormFieldGroup.Input>\n <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\"thin\">\n Thin\n </FormFieldGroup.Input>\n </FormFieldGroup.List>\n <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>\n </FormFieldGroup.Field>\n</FormFieldGroup>\n```",
94227
94227
  "declarations": [
94228
94228
  {
94229
94229
  "name": "aria-describedby",
@@ -94574,7 +94574,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
94574
94574
  ]
94575
94575
  },
94576
94576
  "required": false,
94577
- "description": "Use this attribute when you have a `FormField` that is in an `Alert` | `Error` or `Required` state. This will add attach an `aria-describedby` to each radio input so that screen readers can read out the message attached to the form field.\nThe value of this attribute needs to match the value passed to `hintId` on the `FormField`.\n\n```tsx\n<FormField\n error=\"caution\"\n hintId=\"hint-alert\"\n hintText=\"Deep dish is an extra $2.99\"\n label=\"Choose Your Pizza Crust\"\n useFieldset={true}\n >\n <RadioGroup\n name=\"crust\"\n onChange={handleChange}\n initialValue={value}\n aria-describedby=\"hint-alert\"\n >\n <RadioGroup.RadioButton value=\"deep-dish\">Deep dish</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"thin\">Thin</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"gluten-free\">Gluten free</RadioGroup.RadioButton>\n <RadioGroup.RadioButton value=\"cauliflower\">Cauliflower</RadioGroup.RadioButton>\n </RadioGroup>\n</FormField>\n```",
94577
+ "description": "The id of hint or error text associated with each radio.\n\nDo not set this when radios are wrapped in `FormFieldGroup.Input`. `FormFieldGroup.Input`\nwrites `aria-describedby=\"hint-{id}\"` on each radio, and that value overrides\n`aria-describedby` set on `RadioGroup`. Put the message in `FormFieldGroup.Hint`.\n\n```tsx\n<FormFieldGroup error=\"caution\">\n <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>\n <FormFieldGroup.Field>\n <FormFieldGroup.List as={RadioGroup} name=\"crust\" value={value} onChange={handleChange}>\n <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\"deep-dish\">\n Deep dish\n </FormFieldGroup.Input>\n <FormFieldGroup.Input as={RadioGroup.RadioButton} value=\"thin\">\n Thin\n </FormFieldGroup.Input>\n </FormFieldGroup.List>\n <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>\n </FormFieldGroup.Field>\n</FormFieldGroup>\n```",
94578
94578
  "declarations": [
94579
94579
  {
94580
94580
  "name": "aria-describedby",
package/dist/es6/lib/stackblitzFiles/packageJSONFile.js CHANGED
@@ -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.0",
22
- "@workday/canvas-kit-preview-react": "16.2.0",
23
- "@workday/canvas-kit-react": "16.2.0",
24
- "@workday/canvas-kit-react-fonts": "^16.2.0",
25
- "@workday/canvas-kit-styling": "16.2.0",
21
+ "@workday/canvas-kit-labs-react": "16.2.3",
22
+ "@workday/canvas-kit-preview-react": "16.2.3",
23
+ "@workday/canvas-kit-react": "16.2.3",
24
+ "@workday/canvas-kit-react-fonts": "^16.2.3",
25
+ "@workday/canvas-kit-styling": "16.2.3",
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"
package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts CHANGED
@@ -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.0",
23
- "@workday/canvas-kit-preview-react": "16.2.0",
24
- "@workday/canvas-kit-react": "16.2.0",
25
- "@workday/canvas-kit-react-fonts": "^16.2.0",
26
- "@workday/canvas-kit-styling": "16.2.0",
22
+ "@workday/canvas-kit-labs-react": "16.2.3",
23
+ "@workday/canvas-kit-preview-react": "16.2.3",
24
+ "@workday/canvas-kit-react": "16.2.3",
25
+ "@workday/canvas-kit-react-fonts": "^16.2.3",
26
+ "@workday/canvas-kit-styling": "16.2.3",
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"
package/dist/mdx/preview-react/radio/Radio.mdx CHANGED
@@ -2,14 +2,14 @@ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
 
3
3
  import Basic from './examples/Basic';
4
4
  import Caution from './examples/Caution';
5
+ import Custom from './examples/Custom';
6
+ import Disabled from './examples/Disabled';
5
7
  import Error from './examples/Error';
6
8
  import Inverse from './examples/Inverse';
7
9
  import LabelPosition from './examples/LabelPosition';
8
10
  import NoValue from './examples/NoValue';
9
11
  import RefForwarding from './examples/RefForwarding';
10
- import Disabled from './examples/Disabled';
11
12
  import Required from './examples/Required';
12
- import Custom from './examples/Custom';
13
13
  import StandaloneRadio from './examples/StandaloneRadio';
14
14
 
15
15
 
@@ -32,22 +32,20 @@ yarn add @workday/canvas-kit-preview-react
32
32
  Our radio component includes a `RadioGroup` container and `RadioGroup.RadioButton`, which renders an
33
33
  individual radio button. Nest related `RadioGroup.RadioButton` buttons within a `RadioGroup` and
34
34
  provide a `name` prop to the `RadioGroup` to group the radio buttons together. Each
35
- `RadioGroup.Radio` must have a unique `value`. This value is used in conjunction with the `value`
36
- prop set on the `RadioGroup` to determine which radio button is selected. To tie it all together,
37
- provide an `onChange` handler to the `RadioGroup` to track the selected value as it changes.
35
+ `RadioGroup.RadioButton` must have a unique `value`. This value is used in conjunction with the
36
+ `value` prop set on the `RadioGroup` to determine which radio button is selected. To tie it all
37
+ together, provide an `onChange` handler to the `RadioGroup` to track the selected value as it
38
+ changes.
38
39
 
39
- `RadioGroup` should be used in tandem with [Form Field](/components/inputs/form-field/) where the
40
- `useFieldset` prop is set to `true` to meet accessibility standards. This ensures the `label` text
41
- from `FormField` is attached to the `RadioGroup` and read out as a group for voiceover.
40
+ `RadioGroup` should be used in tandem with
41
+ [FormFieldGroup](/components/inputs/form-field/#accessibility). `FormFieldGroup.Label` names the
42
+ group, and `FormFieldGroup.Input` associates hint, error, and required state with each radio.
42
43
 
43
44
  <ExampleCodeBlock code={Basic} />
44
45
 
45
46
  Our example uses [React state](<(https://react.dev/learn/state-a-components-memory)>) to track the
46
47
  value of the `RadioGroup`.
47
48
 
48
- `RadioGroup` and `RadioGroup.Radio` support keyboard navigation through the proper use of WAI-ARIA
49
- [properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role#associated_wai-aria_roles_states_and_properties).
50
-
51
49
  ### Inverse
52
50
 
53
51
  Set the `variant` prop of `RadioGroup.RadioButton` to `inverse` to ensure proper contrast on dark
@@ -78,7 +76,7 @@ input component. By default, the orientation will be set to `vertical`.
78
76
 
79
77
  ### Required
80
78
 
81
- Set the `required` prop of the wrapping `FormField` to `true` to indicate that the field is
79
+ Set the `isRequired` prop of the wrapping `FormFieldGroup` to `true` to indicate that the field is
82
80
  required. Labels for required fields are suffixed by a red asterisk.
83
81
 
84
82
  <ExampleCodeBlock code={Required} />
@@ -110,12 +108,9 @@ some behavior handled for you.
110
108
 
111
109
  ### Error States
112
110
 
113
- Set the `error` prop of the wrapping `FormField` to `"caution"` or
114
- `"error"` to set the `RadioGroup` to the alert or error state, respectively. You
115
- will also need to set the `hintId` and `hintText` props on the `FormField` to meet accessibility
116
- standards. You must set an `aria-describedby` attribute on the `RadioGroup` element that matches the
117
- value of `hintId` set on the `FormField` element. These attributes ensure that the alert message is
118
- associated to the `RadioGroup` and read out by voiceover.
111
+ Set the `error` prop of the wrapping `FormFieldGroup` to `"caution"` or `"error"` to set the group
112
+ to the alert or error state. Put the message in `FormFieldGroup.Hint`. `FormFieldGroup.Input`
113
+ associates that text with each radio.
119
114
 
120
115
  #### Caution
121
116
 
@@ -141,6 +136,126 @@ Radio and its subcomponents support custom styling via the `cs` prop. For more i
141
136
  our
142
137
  ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
143
138
 
139
+ ## Accessibility
140
+
141
+ The primary accessibility goal is to ensure users can identify the radio group and each option,
142
+ determine which option is selected, and hear associated hints, errors, and required state when a
143
+ radio receives focus. Use **Radio** when the user must choose one option from a list. For
144
+ independent options, use
145
+ [**Checkbox**](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-checkbox--docs)
146
+ instead.
147
+
148
+ ### Minimum Accessible Structure
149
+
150
+ The following matches the [Basic Example](#basic-example): a **`FormFieldGroup`** with
151
+ **`FormFieldGroup.List as={RadioGroup}`**, and two or more
152
+ **`FormFieldGroup.Input as={RadioGroup.RadioButton}`** options.
153
+
154
+ ```tsx
155
+ import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
156
+ import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
157
+
158
+ <FormFieldGroup>
159
+ <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
160
+ <FormFieldGroup.Field>
161
+ <FormFieldGroup.List as={RadioGroup}>
162
+ <FormFieldGroup.Input as={RadioGroup.RadioButton}>Deep dish</FormFieldGroup.Input>
163
+ <FormFieldGroup.Input as={RadioGroup.RadioButton}>Thin</FormFieldGroup.Input>
164
+ </FormFieldGroup.List>
165
+ </FormFieldGroup.Field>
166
+ </FormFieldGroup>;
167
+ ```
168
+
169
+ Each option needs visible text. See the [Basic Example](#basic-example) for selection behavior.
170
+
171
+ ### Built-in Behaviors
172
+
173
+ Canvas Kit applies these automatically when you compose **`FormFieldGroup`** with **`RadioGroup`**.
174
+ **Do not duplicate them** in consuming code.
175
+
176
+ **ARIA and DOM** (_applied by `RadioGroup` and `FormFieldGroup`_):
177
+
178
+ - **`RadioGroup`**: Renders a `div`. It does not set `role="radiogroup"`.
179
+ - **`RadioGroup.RadioButton`**: Renders a `<label>` around `<input type="radio">` and the visible
180
+ text. The wrapping `<label>` is the association, so an `htmlFor` pairing is not needed. That text
181
+ is the option's accessible name, and clicking it selects the radio.
182
+
183
+ **Keyboard** (_native radio behavior_):
184
+
185
+ **`RadioGroup`** uses native radio keyboard behavior. <kbd>Tab</kbd> moves to the selected radio, or
186
+ to the first radio when none is selected, and then leaves the group. Arrow keys move and select
187
+ within the group.
188
+
189
+ **Screen reader expectations** (_when built-in behaviors are used as intended_):
190
+
191
+ - On focus, assistive technology announces the group name from **`FormFieldGroup.Label`**, along
192
+ with the option name, radio role, and checked state.
193
+ - When applicable, it also announces required state, invalid state (`error="error"`), and hint or
194
+ error text. Caution does not set `aria-invalid`.
195
+ - Disabled radios are announced as unavailable.
196
+
197
+ For group, hint, error, and required association, see
198
+ [FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).
199
+
200
+ ### Accessibility Requirements
201
+
202
+ Required in application code for an accessible Radio group. Rows marked _(conditional)_ apply only
203
+ when the situation matches—otherwise omit.
204
+
205
+ **If no design spec is provided:** use a visible **`FormFieldGroup.Label`**. On
206
+ **`FormFieldGroup.List as={RadioGroup}`**, set a shared **`name`** and render two or more
207
+ **`RadioGroup.RadioButton`** options with visible text and their own **`value`**. Omit **`error`**,
208
+ **`isRequired`**, **`FormFieldGroup.Hint`**, **`disabled`**, **`aria-describedby`** on
209
+ **`RadioGroup`**, **`error`** on **`RadioGroup`**, a **`ref`**, and **`StyledRadioButton`** unless
210
+ the spec requires them.
211
+
212
+ **Programmatic focus** _(conditional — omit by default)_:
213
+
214
+ Attach a **`ref`** only when the product must move focus to a radio after an action. Do not attach a
215
+ **`ref`** or call `focus()` unless the design or developer asks for it. See
216
+ [Ref Forwarding](#ref-forwarding).
217
+
218
+ | Requirement | How to satisfy |
219
+ | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
220
+ | Group and option names | Use **`FormFieldGroup`** with a visible **`FormFieldGroup.Label`**. Render **`FormFieldGroup.List as={RadioGroup}`** with a shared **`name`**, and give every **`FormFieldGroup.Input as={RadioGroup.RadioButton}`** visible text and its own **`value`**. The shared **`name`** groups the inputs, and each option **`value`** is what the selected state matches. See [Basic Example](#basic-example). |
221
+ | Error state _(conditional)_ | When the selection is invalid, set `error="error"` on **`FormFieldGroup`** and prefix **`FormFieldGroup.Hint`** with "Error:". See [Error States](#error-states). |
222
+ | Hint, caution, or required _(conditional)_ | On **`FormFieldGroup`**, use **`FormFieldGroup.Hint`** for hint text, `error="caution"` for caution, and **`isRequired`** for required state, only when the spec includes that state. See [Required](#required) and [FormField accessibility](/components/inputs/form-field/#accessibility). |
223
+ | Disabled _(conditional)_ | Set **`disabled`** on an unavailable **`RadioGroup.RadioButton`**. Never disable the selected radio. See [Disabled](#disabled). |
224
+
225
+ **Summary for code generation:**
226
+
227
+ - **REQUIRED:** **`FormFieldGroup`**, visible **`FormFieldGroup.Label`**,
228
+ **`FormFieldGroup.List as={RadioGroup}`** with a shared **`name`**, and two or more
229
+ **`RadioGroup.RadioButton`** options, each with visible text and its own **`value`**
230
+ - **CONDITIONAL:** when the selection is invalid, `error="error"` on **`FormFieldGroup`** and
231
+ **`FormFieldGroup.Hint`** prefixed with "Error:". Hint text, `error="caution"`, and
232
+ **`isRequired`** only when the spec includes that state. Also **`disabled`** (not on the selected
233
+ radio). See [FormField accessibility](/components/inputs/form-field/#accessibility) for group
234
+ hint, caution, and required.
235
+
236
+ ### Anti-Patterns
237
+
238
+ Do **not** generate code that does the following (see **Accessibility Requirements** above for what
239
+ to supply instead):
240
+
241
+ - Add `role="radiogroup"` to **`RadioGroup`** — **`FormFieldGroup`** provides the group semantics
242
+ - Manually set `aria-checked`, `aria-invalid`, `aria-required`, or `aria-describedby` —
243
+ **`RadioGroup`** and **`FormFieldGroup.Input`** wire these attributes
244
+ - Use **`FormField`** with `useFieldset`, or set `hintId` and `hintText` — group radios with
245
+ **`FormFieldGroup`** and put the message in **`FormFieldGroup.Hint`**
246
+ - Wrap radios in **`FormField.Input`** — use **`FormFieldGroup.Input as={RadioGroup.RadioButton}`**
247
+ - Use **`StyledRadioButton`** unless the spec requires a radio outside **`RadioGroup`**. In that
248
+ case supply accessible option and group names and the necessary behavior. See
249
+ [Standalone Radio Button](#standalone-radio-button)
250
+ - Intercept <kbd>Tab</kbd> or arrow keys — native radio behavior moves and selects within the group
251
+ - Set **`disabled`** on the selected radio — that removes the group's tab stop, so keyboard users
252
+ cannot move within the group. See [Disabled](#disabled)
253
+ - Set **`error`** on **`RadioGroup`** — set it on **`FormFieldGroup`** so Canvas Kit provides both
254
+ the visual and accessible error state. See [Error States](#error-states)
255
+ - Rely on color alone for an error or caution — include **`FormFieldGroup.Hint`**. Use
256
+ `error="error"` when the selection is invalid so `aria-invalid` is set. See
257
+ [Error States](#error-states)
258
+
144
259
  ## Component API
145
260
 
146
261
  <SymbolDoc name="RadioGroup" fileName="/preview-react/" />
package/dist/mdx/preview-react/radio/examples/Required.tsx CHANGED
@@ -20,7 +20,6 @@ export default () => {
20
20
  name="crust-required"
21
21
  onChange={handleChange}
22
22
  value={value}
23
- aria-describedby="choose-crust"
24
23
  >
25
24
  <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
26
25
  Deep dish
package/dist/mdx/preview-react/switch/Switch.mdx CHANGED
@@ -75,6 +75,125 @@ Switch supports right-to-left languages when specified in the CanvasProvider the
75
75
  Switch supports custom styling via the `cs` prop. For more information, check our
76
76
  ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
77
77
 
78
+ ## Accessibility
79
+
80
+ The primary accessibility goal is a visible, programmatically determinable name and an on or off
81
+ state that assistive technology can expose. Use **Switch** for a single setting that takes effect
82
+ immediately when toggled (for example, "Dark Mode"). When the user selects one or more options that
83
+ are applied on form submission, use [**Checkbox**](/components/inputs/checkbox/) instead. **Switch**
84
+ does not render its own `<label>`, so it relies on **`FormField`** for its name, hint, error, and
85
+ required wiring — see [FormField's accessibility documentation](/components/inputs/form-field/#accessibility).
86
+
87
+ ### Minimum Accessible Structure
88
+
89
+ The following matches the [Basic Example](#basic-example). Every **Switch** needs **`FormField`**, a
90
+ visible **`FormField.Label`**, and **`FormField.Input as={Switch}`** inside **`FormField.Field`**.
91
+
92
+ ```tsx
93
+ import React from 'react';
94
+
95
+ import {Switch} from '@workday/canvas-kit-preview-react/switch';
96
+ import {FormField} from '@workday/canvas-kit-react/form-field';
97
+
98
+ const Example = () => {
99
+
100
+ return (
101
+ <FormField>
102
+ <FormField.Label>Dark Mode</FormField.Label>
103
+ <FormField.Field>
104
+ <FormField.Input as={Switch} />
105
+ </FormField.Field>
106
+ </FormField>
107
+ );
108
+ };
109
+ ```
110
+
111
+ ### Built-in Behaviors
112
+
113
+ Canvas Kit applies these automatically when you compose **Switch** with **`FormField`**
114
+ subcomponents. **Do not duplicate them** in consuming code.
115
+
116
+ **ARIA and DOM** (_applied by Switch and FormField_):
117
+
118
+ - **`Switch`**: Renders a native `<input type="checkbox">` with `role="switch"`. The native `checked`
119
+ state is exposed to assistive technology as on or off, so no `aria-checked` is needed. Canvas Kit
120
+ assigns an `id` with `useUniqueId` unless you pass **`id`**.
121
+ - **Track, thumb, and check/x icon**: Purely visual. The icon is a Canvas Kit **`SystemIcon`**, whose
122
+ SVG markup sets `role="presentation"` and `focusable="false"`, so it is not announced.
123
+ - **`disabled`**: Maps to the native `disabled` attribute.
124
+
125
+ **Keyboard** (_native checkbox behavior_):
126
+
127
+ **`Switch`** uses native `<input type="checkbox">` keyboard behavior (tab order and Space to
128
+ toggle). Do not intercept <kbd>Space</kbd> or otherwise prevent the native toggle.
129
+
130
+ **Screen reader expectations** (_when built-in behaviors are used as intended_):
131
+
132
+ - On focus, assistive technology announces the **`FormField.Label`** text, the "switch" role, and
133
+ the on or off state; when applicable, required state, invalid state (`error="error"`), and
134
+ **`FormField.Hint`** text via `aria-describedby`
135
+ - Toggling announces the new on or off state
136
+ - The Caution state is visual only — `aria-invalid` is **not** set for `error="caution"`
137
+ - Disabled switches are skipped in the tab order and may be announced as unavailable
138
+
139
+ For label, hint, and error association details, see
140
+ [FormField's Built-in Behaviors](/components/inputs/form-field/#built-in-behaviors).
141
+
142
+ ### Accessibility Requirements
143
+
144
+ Required in application code for an accessible **Switch**. Rows marked _(conditional)_ apply only
145
+ when the situation matches—otherwise omit.
146
+
147
+ **If no design spec is provided:** use a visible **`FormField.Label`**, wrap the control with
148
+ **`FormField.Input as={Switch}`** inside **`FormField.Field`**, and control it with **`checked`** and
149
+ **`onChange`**. Omit **`isRequired`**, **`error`**, **`FormField.Hint`**, **`disabled`**,
150
+ **`isHidden`**, a custom **`id`**, and a **`ref`** unless the spec requires them.
151
+
152
+ **Programmatic focus** _(conditional — omit by default)_:
153
+
154
+ Attach a `ref` only when the product must move focus to the Switch after an action. Do not attach a
155
+ `ref` or call `focus()` unless the design or developer asks for it. See
156
+ [Ref Forwarding](#ref-forwarding) under Usage for a complete Storybook example.
157
+
158
+ | Requirement | How to satisfy |
159
+ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
160
+ | Accessible name | Visible, non-empty **`FormField.Label`** describing the setting (for example, "Dark Mode"), not the state ("On"/"Off"). Use **`FormField.Label isHidden`** only when an equally clear visible alternative exists |
161
+ | Input wiring | **`FormField.Input as={Switch}`** inside **`FormField.Field`**. See [FormField accessibility](/components/inputs/form-field/#accessibility) for label, hint, error, and required wiring |
162
+ | Required state _(conditional)_ | `isRequired` on **`FormField`** only when the form cannot be submitted unless the Switch is on — native `required` on a checkbox means it must be checked |
163
+ | Disabled _(conditional)_ | `disabled` on **`FormField.Input`** when the spec marks the setting unavailable. See [Disabled](#disabled) |
164
+ | Programmatic focus _(conditional)_ | `ref` on **`FormField.Input`** and call `focus()` when the product requires it — omit by default (see **Programmatic focus** above and [Ref Forwarding](#ref-forwarding)) |
165
+
166
+ **Summary for code generation:**
167
+
168
+ - **REQUIRED:** **`FormField`** + visible **`FormField.Label`** + **`FormField.Input as={Switch}`**
169
+ inside **`FormField.Field`**
170
+ - **CONDITIONAL:** `isRequired` only when the Switch must be on; `disabled`; programmatic focus via
171
+ `ref`. See [FormField accessibility](/components/inputs/form-field/#accessibility) for shared
172
+ FormField conditionals (hint, error, and caution).
173
+
174
+ ### Anti-Patterns
175
+
176
+ Do **not** generate code that does the following (see **Accessibility Requirements** above for what
177
+ to supply instead):
178
+
179
+ - Render **Switch** without **`FormField`** and **`FormField.Label`** — **Switch** has no built-in
180
+ label. For shared FormField anti-patterns (manual ARIA wiring, color-only errors, broken ID
181
+ references), see [FormField Anti-Patterns](/components/inputs/form-field/#anti-patterns)
182
+ - Manually set `role`, `aria-checked`, `aria-labelledby`, `aria-describedby`, `aria-invalid`, or
183
+ `id` on **Switch** — Canvas Kit wires these from the native checkbox and **`FormField`**
184
+ - Nest **`FormField`** inside **`FormField`** instead of using **`FormField.Field`** — the inner
185
+ **`FormField`** breaks the label association
186
+ - Put the state in the label (for example, "Dark Mode: On") or add a visually hidden "on"/"off"
187
+ string — the state is already announced from `role="switch"` and `checked`
188
+ - Set **`error`** directly on **Switch** inside **`FormField`** — set it on **`FormField`** so
189
+ `aria-invalid` and the visual ring stay in sync. Setting **`error`** on a Switch outside
190
+ **`FormField`** is visual only and does not set `aria-invalid`
191
+ - Use **`isRequired`** for a setting that can validly be off
192
+ - Use **Switch** for selections that only apply on form submission, or for multiple related
193
+ options — use [**Checkbox**](/components/inputs/checkbox/) instead
194
+ - Use **`aria-disabled`** instead of **`disabled`** — **Switch** maps unavailability to the native
195
+ **`disabled`** attribute
196
+
78
197
  ## Component API
79
198
 
80
199
  <SymbolDoc name="Switch" fileName="/react/" />
package/dist/mdx/preview-react/switch/examples/Basic.tsx CHANGED
@@ -11,7 +11,7 @@ export default () => {
11
11
  };
12
12
 
13
13
  return (
14
- <FormField isRequired>
14
+ <FormField>
15
15
  <FormField.Label>Dark Mode</FormField.Label>
16
16
  <FormField.Field>
17
17
  <FormField.Input as={Switch} checked={checked} onChange={handleChange} />
package/dist/mdx/react/action-bar/ActionBar.mdx CHANGED
@@ -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 contains `ActionBar.Item`.
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 posible to change it to another element,
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
- See the [Menu Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/), the
84
- [Button pattern (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/button/), and the Canvas Kit
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="Page actions">
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`**: Does not render an element. It creates the model and wraps its children in
117
- **`Menu`** so the overflow menu shares state.
118
- - **`ActionBar.List`**: Renders a `div` by default. It has no role of its own—use `as="section"`
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`**: Is the standard [Menu](/components/popups/menu/#accessibility).
131
- **`ActionBar.Menu.List`** has `role="menu"` labelled by the overflow button, and
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
- - Opening the overflow menu moves focus to its first item.
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
- **Keyboard**:
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
- | Key | Behavior |
143
- | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
144
- | <kbd>Tab</kbd> / <kbd>Shift</kbd>+<kbd>Tab</kbd> | Moves between each visible **`ActionBar.Item`** and the overflow button. Every visible item is its own tab stop; Action Bar does not use roving tabindex |
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, "Page
154
- actions, region").
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`** → **`ActionBar.List`** with `as="section"`
167
- and a translated **`aria-label`**, one primary **`ActionBar.Item`** first, followed by secondary
168
- **`ActionBar.Item`** components with visible text. Omit `icon`, `disabled`, the overflow API, custom
169
- `maximumVisible`, and custom `data-id` unless the spec requires them.
170
-
171
- | Requirement | How to satisfy |
172
- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
173
- | Group label | `as="section"` and a translated **`aria-label`** on **`ActionBar.List`** that is unique among landmarks on the page |
174
- | Item accessible name | Non-empty visible text as the child of every **`ActionBar.Item`** |
175
- | Composition order | **`ActionBar`** → **`ActionBar.List`** → **`ActionBar.Item`**; add **`ActionBar.Menu`** as a sibling of **`ActionBar.List`** for overflow |
176
- | Primary action _(conditional)_ | **`as={PrimaryButton}`** on only the first **`ActionBar.Item`**; secondary actions use the default; do not use **`TertiaryButton`** |
177
- | Destructive action _(conditional)_ | **`as={DeleteButton}`** only for destructive actions, per design |
178
- | Decorative icon _(conditional)_ | **`icon`** on **`ActionBar.Item`** with visible text—no extra ARIA on the icon |
179
- | Overflow button name _(conditional)_ | Translated **`aria-label`** on **`ActionBar.OverflowButton`** (required by its type), passed through **`overflowButton`** on **`ActionBar.List`** |
180
- | Overflow menu _(conditional)_ | Dynamic API: `items` on **`useActionBarModel`**, render props on both **`ActionBar.List`** and **`ActionBar.Menu.List`**, and **`ActionBar.Menu.Popper`** → **`Card`** → **`List`** → **`Item`** with the same item text |
181
- | Menu item activation _(conditional)_ | The same `onClick` handler on **`ActionBar.Item`** and its **`ActionBar.Menu.Item`** counterpart so an action behaves the same wherever it renders |
182
- | Fixed placement _(conditional)_ | **`ActionBar.List`** is `position: fixed` at the bottom of the viewport. Reserve space so page content and focused controls are not hidden behind it, or pass `position="relative"` when the bar sits in the page flow |
183
- | Disabled action _(conditional)_ | Native **`disabled`** on **`ActionBar.Item`** when the spec marks the action unavailable |
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; one primary action first
189
- - **CONDITIONAL:** **`icon`**; **`DeleteButton`**; **`overflowButton`** with an **`aria-label`**;
190
- matching **`ActionBar.Menu`** items and handlers; `position="relative"`; **`disabled`**
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`**, which leaves the group
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`**—each item must be a separate tab stop
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
- - Set `aria-haspopup`, `aria-expanded`, or `aria-hidden` on **`ActionBar.OverflowButton`** or
206
- **`ActionBar.Item`**—the model sets them
207
- - Hide overflowing items with CSS, `hidden`, or conditional rendering—use the dynamic API
208
- and `maximumVisible`
209
- - Use the overflow behavior with static children—it requires `items` on the model and render props
210
- - Provide an overflow menu whose items differ in text or behavior from the action bar items
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.0",
3
+ "version": "16.2.3",
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.0",
51
- "@workday/canvas-kit-preview-react": "^16.2.0",
52
- "@workday/canvas-kit-react": "^16.2.0",
53
- "@workday/canvas-kit-styling": "^16.2.0",
50
+ "@workday/canvas-kit-labs-react": "^16.2.3",
51
+ "@workday/canvas-kit-preview-react": "^16.2.3",
52
+ "@workday/canvas-kit-react": "^16.2.3",
53
+ "@workday/canvas-kit-styling": "^16.2.3",
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": "a7c1bdb67a1a12d2f50e97472e776473a9eba228"
66
+ "gitHead": "dd5a27ab062642ac115722808e063150f7866115"
67
67
  }