@workday/canvas-kit-docs 12.0.0-alpha.905-next.0 → 12.0.0-alpha.907-next.0

package/dist/es6/lib/docs.js

@@ -121486,7 +121486,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     "type": {
       "kind": "symbol",
       "name": "useResizeObserverOriginal",
-      "value": "<T extends Element>(opts?: { ref?: T | RefObject<T> | null | undefined; onResize?: ResizeHandler | undefined; box?: ResizeObserverBoxOptions | undefined; round?: RoundingFunction | undefined; } | undefined) => HookResponse<...>"
+      "value": "<T extends HTMLElement>(opts?: { ref?: T | RefObject<T> | null | undefined; onResize?: ResizeHandler | undefined; } | undefined) => HookResponse<T>"
     }
   },
   {
@@ -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": []
           }
         ]
       }

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.905-next.0",
+  "version": "12.0.0-alpha.907-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.905-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.905-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.905-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.905-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.907-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.907-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.907-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.907-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": "b8e7a8e20dd9087fc67684a51f1eb844bc9743db"
+  "gitHead": "3646c0ae53ba740d9e626c7f011925707644da84"
 }