@workday/canvas-kit-docs 12.0.0-alpha.903-next.0 → 12.0.0-alpha.906-next.0

package/dist/es6/lib/docs.js

@@ -127583,7 +127583,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "type": {
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
-      "elemPropsHook": "useFormFieldLabel",
       "displayName": "FormFieldGroup.Label",
       "props": [
         {
@@ -130558,6 +130557,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "tags": {},
             "declarations": []
           },
+          {
+            "kind": "property",
+            "name": "aria-labelledby",
+            "required": true,
+            "type": {
+              "kind": "union",
+              "value": [
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                {
+                  "kind": "primitive",
+                  "value": "undefined"
+                }
+              ]
+            },
+            "description": "",
+            "tags": {},
+            "declarations": []
+          },
           {
             "kind": "property",
             "name": "id",
@@ -130678,6 +130698,18 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "description": "",
             "tags": {},
             "declarations": []
+          },
+          {
+            "kind": "property",
+            "name": "id",
+            "required": true,
+            "type": {
+              "kind": "primitive",
+              "value": "string"
+            },
+            "description": "",
+            "tags": {},
+            "declarations": []
           }
         ]
       }
@@ -130781,7 +130813,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "orientation",
           "defaultValue": {
             "kind": "string",
-            "value": ""
+            "value": "vertical"
           },
           "type": {
             "kind": "union",
@@ -131031,7 +131063,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           "name": "orientation",
           "defaultValue": {
             "kind": "string",
-            "value": ""
+            "value": "vertical"
           },
           "type": {
             "kind": "union",
@@ -274244,6 +274276,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "kind": "typeParameter",
           "name": "M",
+          "defaultValue": {
+            "kind": "object",
+            "properties": []
+          },
           "constraint": {
             "kind": "symbol",
             "name": "StencilModifierConfig",
@@ -274255,17 +274291,21 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ],
             "value": "StencilModifierConfig<V, E>"
           },
-          "required": true
+          "required": false
         },
         {
           "kind": "typeParameter",
           "name": "V",
+          "defaultValue": {
+            "kind": "object",
+            "properties": []
+          },
           "constraint": {
             "kind": "symbol",
             "name": "DefaultedVarsShape",
             "value": "DefaultedVarsShape"
           },
-          "required": true
+          "required": false
         },
         {
           "kind": "typeParameter",
@@ -274590,6 +274630,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "kind": "typeParameter",
           "name": "M",
+          "defaultValue": {
+            "kind": "object",
+            "properties": []
+          },
           "constraint": {
             "kind": "symbol",
             "name": "StencilModifierConfig",
@@ -274605,17 +274649,21 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             ],
             "value": "StencilModifierConfig<V, E>"
           },
-          "required": true
+          "required": false
         },
         {
           "kind": "typeParameter",
           "name": "V",
+          "defaultValue": {
+            "kind": "object",
+            "properties": []
+          },
           "constraint": {
             "kind": "symbol",
             "name": "DefaultedVarsShape",
             "value": "DefaultedVarsShape"
           },
-          "required": true
+          "required": false
         },
         {
           "kind": "typeParameter",

package/dist/mdx/react/button/button/examples/CustomStyles.tsx

@@ -34,8 +34,8 @@ const myButtonStencil = createStencil({
 });
 
 const MyCustomButton = createComponent('button')({
-  Component: ({children, ...elemProps}: PrimaryButtonProps, ref, Element) => (
-    <PrimaryButton as={Element} ref={ref} {...handleCsProp(elemProps, myButtonStencil())}>
+  Component: ({children, cs, ...elemProps}: PrimaryButtonProps, ref, Element) => (
+    <PrimaryButton as={Element} ref={ref} cs={[myButtonStencil(), cs]} {...elemProps}>
       {children}
     </PrimaryButton>
   ),

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -24,6 +24,6 @@ export default () => (
     <PrimaryButton icon={caretDownIcon} iconPosition="end">
       Primary
     </PrimaryButton>
-    <PrimaryButton aria-label="related-actions" icon={relatedActionsVerticalIcon} />
+    <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
   </Flex>
 );

package/dist/mdx/react/form-field/FormField.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Alert from './examples/Alert';
 import Error from './examples/Error';
@@ -27,6 +27,43 @@ by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `Fo
 yarn add @workday/canvas-kit-react
 ```
 
+## Accessibility
+
+The `FormField` adds a `for` attribute to the `FormField.Label` (`<label>` element) element that
+matches the `id` attribute of the `FormField.Input` which is usually a `input` element. This both
+labels the input for screen readers and other assitive technology as well as will focus on the input
+when the user clicks on the label. If your form field input component is more complicated, the
+`FormField` will also add an `id` to the `FormField.Label` and an `aria-labelledby` to the
+`FormField.Input` component. You can then forward the `aria-labelledby` to whatever elements you
+need for the proper accessibility.
+
+For example, the DOM will look something like this:
+
+```html
+<div>
+  <label id="label-abc" for="input-abc">First Name</label>
+  <input id="input-abc" aria-labelledby="label-abc" />
+</div>
+```
+
+Some components, like `MultiSelect`, have an additional `role=listbox` element that also needs to
+link to the `label` element. The resulting DOM will look something like:
+
+```html
+<div>
+  <label id="label-abc" for="input-abc">States you've lived in</label>
+  <input id="input-abc" aria-labelledby="label-abc" role="combobox" ... />
+  <ul role="listbox" aria-labelledby="label-abc">
+    <li>Texas</li>
+    <li>California</li>
+  </ul>
+</div>
+```
+
+The `MultiSelect` component gets the `aria-labelledby` from the `FormField.Input` and forwards it to
+both the `input[role=combobox]` element and the `ul[role=listbox]` element so the screen reader
+knows the label for both is "States you've lived in".
+
 ## Usage
 
 ### Basic
@@ -161,4 +198,8 @@ check our
 
 ## Component API
 
-<SymbolDoc name="FormField" fileName="/preview-react/" />
+<SymbolDoc name="FormField" fileName="/preview-react/" />
+
+## Specifications
+
+<Specifications file="FormField.spec.tsx" name="FormField" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.903-next.0",
+  "version": "12.0.0-alpha.906-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.903-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.903-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.903-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.903-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.906-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.906-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.906-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.906-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.9"
   },
-  "gitHead": "06b35f786069a81a2aba5fbd42b46ec88857e5a8"
+  "gitHead": "b796b56840b04395e0b4f4d643cad66be4103936"
 }