@workday/canvas-kit-docs 15.1.7 → 15.1.10

package/dist/es6/lib/specs.js

@@ -1759,6 +1759,20 @@ module.exports = {specifications: [
                       }
                     ]
                   },
+                  {
+                    "type": "describe",
+                    "name": "when a disabled item has focus and the menu is closed and reopened",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should move focus to the first item instead of the disabled item"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should not leave focus on the disabled item"
+                      }
+                    ]
+                  },
                   {
                     "type": "describe",
                     "name": "when the enter key is pressed",
@@ -1781,6 +1795,112 @@ module.exports = {specifications: [
               }
             ]
           },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Menu, NestedSiblings] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the \"Second Item\" submenu is opened by hovering",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should set aria-expanded to true on \"Second Item\""
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the sibling \"Third Item\" is then hovered",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should close the \"Second Item\" submenu"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should set aria-expanded to false on \"Second Item\""
+                      },
+                      {
+                        "type": "it",
+                        "name": "should leave only the root menu and one submenu open"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the original \"Second Item\" is hovered again",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should close the \"Third Item\" submenu"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should leave only the root menu and one submenu open"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when a submenu is opened with the right arrow key",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the submenu"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should keep the submenu open and move focus into it"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the left arrow key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should close the submenu"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should return focus to the \"Second Item\" target"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Menu, NestedDynamic] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when hovering deeper into a chain of nested submenus",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should keep the ancestor submenu open"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should keep every menu in the open chain visible"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when hovering back onto the ancestor item in the open trail",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should keep the open trail intact"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
           {
             "type": "describe",
             "name": "given the [Testing/Popups/Menu, MenuWithFallbackPlacements] example is rendered",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.1.7",
-    "@workday/canvas-kit-preview-react": "15.1.7",
-    "@workday/canvas-kit-react": "15.1.7",
-    "@workday/canvas-kit-react-fonts": "^15.1.7",
-    "@workday/canvas-kit-styling": "15.1.7",
+    "@workday/canvas-kit-labs-react": "15.1.10",
+    "@workday/canvas-kit-preview-react": "15.1.10",
+    "@workday/canvas-kit-react": "15.1.10",
+    "@workday/canvas-kit-react-fonts": "^15.1.10",
+    "@workday/canvas-kit-styling": "15.1.10",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -19,11 +19,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "15.1.7",
-    "@workday/canvas-kit-preview-react": "15.1.7",
-    "@workday/canvas-kit-react": "15.1.7",
-    "@workday/canvas-kit-react-fonts": "^15.1.7",
-    "@workday/canvas-kit-styling": "15.1.7",
+    "@workday/canvas-kit-labs-react": "15.1.10",
+    "@workday/canvas-kit-preview-react": "15.1.10",
+    "@workday/canvas-kit-react": "15.1.10",
+    "@workday/canvas-kit-react-fonts": "^15.1.10",
+    "@workday/canvas-kit-styling": "15.1.10",
     "@workday/canvas-system-icons-web": "4.0.2",
     "@workday/canvas-expressive-icons-web": "1.0.1",
     "@workday/canvas-tokens-web": "4.2.0"

package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx

@@ -1,4 +1,4 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
 import Custom from './examples/Custom';
@@ -46,6 +46,10 @@ position of the icon may be adjusted depending on where you place it in the mark
 
 <ExampleCodeBlock code={Icon} />
 
+> **Accessibility Note**: In this example, the icon is used as a decoration and is intentionally
+> hidden from screen readers. If you're using icons to convey additional information, add
+> `role="img"` and a translated `aria-label` string to `StatusIndicator.Icon`.
+
 ### Overflow
 
 We **strongly** discourage using text in a `StatusIndicator` which will cause it to exceed its
@@ -61,14 +65,16 @@ of `StatusIndicator` via [style props](/get-started/for-developers/documentation
 Set the `variant` prop of `StatusIndicator` to adjust its background color. `variant` accepts the
 following values:
 
-- `gray`
-- `orange`
-- `blue`
-- `green`
-- `red`
+- `neutral` (default; `gray` is a deprecated alias)
+- `caution` (`orange` is a deprecated alias)
+- `info` (`blue` is a deprecated alias)
+- `positive` (`green` is a deprecated alias)
+- `critical` (`red` is a deprecated alias)
 - `transparent`
 
 The background color dictated by the `variant` will be dark or light based on the `emphasis`.
+`variant` and `emphasis` change color only—they do not change the accessible name. Put the status
+meaning in **`StatusIndicator.Label`**.
 
 <ExampleCodeBlock code={Variants} />
 
@@ -84,6 +90,113 @@ Status Indicator and its subcomponents support custom styling via the `cs` prop.
 information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
+## Accessibility
+
+`StatusIndicator` is a compact, **non-interactive** status label. The accessibility goal is that
+assistive technology users get the same status meaning as sighted users from
+**`StatusIndicator.Label`** text—not from color, emphasis, or a decorative icon.
+
+### Minimum Accessible Structure
+
+The following matches the [Basic Example](#basic-example): a container and a visible label. Icon is
+optional.
+
+```tsx
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+
+<StatusIndicator>
+  <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
+</StatusIndicator>;
+```
+
+Always include **`StatusIndicator.Label`** with concise text that names the status. Do not rely on
+**`variant`**, **`emphasis`**, or **`StatusIndicator.Icon`** as the only indicator of meaning.
+
+### Built-in Behaviors
+
+Canvas Kit applies visual layout and color through `statusIndicatorStencil` when you compose
+**`StatusIndicator`**, **`StatusIndicator.Label`**, and optionally **`StatusIndicator.Icon`**. It
+does **not** apply `role="img"` or an accessible name on the icon. **Do not duplicate them** in
+consuming code. Only add icon ARIA when the informative-icon requirement below applies.
+
+**ARIA and DOM** (_applied by subcomponents_):
+
+- **`StatusIndicator`**: renders a `div` (override with `as` if needed). Default `maxWidth` is
+  `200px`. Default `variant` is `neutral`; default `emphasis` is `low`. No ARIA role is set.
+- **`StatusIndicator.Label`**: renders a `span` with bold subtext, `white-space: nowrap`,
+  `overflow: hidden`, and `text-overflow: ellipsis`. Truncation is visual; the full text remains in
+  the accessibility tree.
+- **`StatusIndicator.Icon`**: renders `SystemIcon` at size `20`. It does **not** set `role="img"` or
+  `aria-label`. If `icon.type` is missing, the icon renders nothing.
+
+**Keyboard** (_not a control by default_):
+
+- **`StatusIndicator`** is not in the tab order. There is no built-in keyboard behavior.
+
+**Screen reader expectations** (_when built-in behaviors are used as intended_):
+
+- Assistive technology should announce the **`StatusIndicator.Label`** text as the content of the
+  indicator
+- `variant` and `emphasis` are **not** announced
+- A decorative **`StatusIndicator.Icon`** (no `role="img"`) should not add a separate accessible
+  name
+- [**OverflowTooltip**](https://workday.github.io/canvas-kit/?path=/docs/components-popups-tooltip--docs#tooltips-on-overflowing-content)
+  uses `type="muted"` and does not set `aria-label` on the target—the accessible name stays the
+  element's text content
+
+### Accessibility Requirements
+
+Required in application code for an accessible Status Indicator. Rows marked _(conditional)_ apply
+only when the situation matches—otherwise omit.
+
+**If no design spec is provided:** include a visible **`StatusIndicator.Label`**; keep the icon
+decorative (omit `role="img"` and `aria-label`); omit `tabIndex` and **`OverflowTooltip`**. Prefer
+short label text so truncation is unnecessary.
+
+| Requirement                      | How to satisfy                                                                                                                                                                                                                                         |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Visible status text              | **`StatusIndicator.Label`** with translated text that names the status (for example, "Unpublished", not color alone)                                                                                                                                   |
+| Color is not the only indicator  | Use **`variant`** / **`emphasis`** only as visual reinforcement of the label. See [Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only](https://www.w3.org/WAI/WCAG22/Techniques/failures/F81) |
+| Decorative icon _(conditional)_  | **`StatusIndicator.Icon`** with `icon={...}` and **no** `role="img"` when the icon only supports the label visually                                                                                                                                    |
+| Informative icon _(conditional)_ | On **`StatusIndicator.Icon`**, set `role="img"` and a translated `aria-label` that adds meaning **beyond** the label text                                                                                                                              |
+| Overflowed label _(conditional)_ | Avoid exceeding the `200px` max width. If truncation cannot be avoided, wrap **`StatusIndicator`** in **`OverflowTooltip`** and set `tabIndex={0}` so keyboard and mouse users can reveal the full text. See the [Overflow example](#overflow)         |
+
+**Informative icon** _(conditional)_:
+
+```tsx
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';
+
+<StatusIndicator>
+  <StatusIndicator.Icon role="img" aria-label="Waiting to sync" icon={cloudArrowUpIcon} />
+  <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
+</StatusIndicator>;
+```
+
+**Summary for code generation:**
+
+- **REQUIRED:** visible **`StatusIndicator.Label`** whose text conveys the status
+- **CONDITIONAL:** `role="img"` + translated `aria-label` on **`StatusIndicator.Icon`**,
+  **`OverflowTooltip`** + `tabIndex={0}`
+
+### Anti-Patterns
+
+Do **not** generate code that does the following (see **Accessibility Requirements** above for what
+to supply instead):
+
+- Omit **`StatusIndicator.Label`** or use an empty label, relying on `variant`, `emphasis`, or an
+  icon for meaning
+- Set `role="img"` on a decorative **`StatusIndicator.Icon`**, or set `role="img"` without a
+  translated `aria-label`—that can expose an unnamed image to assistive technology. See **Decorative
+  icon** and **Informative icon** in **Accessibility Requirements**
+- Duplicate the label text as `aria-label` on the icon when the icon adds no extra meaning
+- Add `role="status"`, `aria-live`, or `aria-label` on **`StatusIndicator`** by default—Canvas Kit
+  does not wire these, and they change how assistive technology treats a static label. If a design
+  requires announcing asynchronous updates, see
+  [ARIA Live Regions](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-aria-live-regions--docs)
+- Truncate label text without **`OverflowTooltip`** and `tabIndex={0}` when keyboard users must read
+  the overflow
+
 ## Component API
 
 <SymbolDoc name="StatusIndicator" fileName="/preview-react/" />

package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx

@@ -12,12 +12,12 @@ export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <StatusIndicator>
-        <StatusIndicator.Icon aria-label="unpublished" icon={cloudArrowUpIcon} />
+        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
         <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
       </StatusIndicator>
       <StatusIndicator variant="positive">
         <StatusIndicator.Label>published</StatusIndicator.Label>
-        <StatusIndicator.Icon aria-label="published" icon={cloudArrowUpIcon} />
+        <StatusIndicator.Icon icon={cloudArrowUpIcon} />
       </StatusIndicator>
     </Flex>
   );

package/dist/mdx/react/menu/Menu.mdx

@@ -33,6 +33,8 @@ yarn add @workday/canvas-kit-react
 `Menu` will automatically focus on the cursor item (first item by default). The `Menu` uses a menu
 model which composes a list model and a popup model and sets up accessibility features for you.
 
+> **Note:** When content exceeds `60vh`, the menu content is clipped and the menu becomes scrollable.
+
 ### Context Menu
 
 <ExampleCodeBlock code={ContextMenu} />

package/dist/mdx/react/menu/examples/NestedSiblings.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <Menu
+      id="first-menu"
+      onSelect={data => {
+        setSelected(data.id);
+      }}
+    >
+      <Menu.Target>Open Menu</Menu.Target>
+      <Menu.Popper>
+        <Menu.Card>
+          <Menu.List>
+            <Menu.Item data-id="first-item">First Item</Menu.Item>
+            <Menu.Submenu id="second-menu">
+              <Menu.Submenu.TargetItem data-id="second-item">Second Item</Menu.Submenu.TargetItem>
+              <Menu.Submenu.Popper>
+                <Menu.Submenu.Card>
+                  <Menu.Submenu.List>
+                    <Menu.Submenu.Item data-id="second-first-sub-item">
+                      Second: First Sub Item
+                    </Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="second-second-sub-item">
+                      Second: Second Sub Item
+                    </Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Submenu id="third-menu">
+              <Menu.Submenu.TargetItem data-id="third-item">Third Item</Menu.Submenu.TargetItem>
+              <Menu.Submenu.Popper>
+                <Menu.Submenu.Card>
+                  <Menu.Submenu.List>
+                    <Menu.Submenu.Item data-id="third-first-sub-item">
+                      Third: First Sub Item
+                    </Menu.Submenu.Item>
+                    <Menu.Submenu.Item data-id="third-second-sub-item">
+                      Third: Second Sub Item
+                    </Menu.Submenu.Item>
+                  </Menu.Submenu.List>
+                </Menu.Submenu.Card>
+              </Menu.Submenu.Popper>
+            </Menu.Submenu>
+            <Menu.Item data-id="fourth-item">Fourth Item</Menu.Item>
+          </Menu.List>
+        </Menu.Card>
+      </Menu.Popper>
+      <BodyText size="small" cs={{marginBlockStart: system.gap.md}}>
+        Selected: <span data-testid="output">{selected}</span>
+      </BodyText>
+    </Menu>
+  );
+};

package/dist/mdx/styling/mdx/Stencils.mdx

@@ -405,7 +405,9 @@ To style elements in the render function, we'll need to choose what elements to
 the example below, we're able to spread the parts directly to elements. The Stencil will generate
 the type and value most appropriate for the context the part is used. In the Stencil, the part is
 represented by a string that looks like `[data-part="{partValue}"]` and in the render function, it
-is an object that looks like `{'data-part': partValue}`.
+is an object that looks like `{'data-part': partValue}`. That object also has a non-enumerable
+`selector` property (`[data-part="{partValue}"]`) for targeting the part from another stencil's
+style object without writing the attribute selector by hand.
 
 ```jsx
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
@@ -444,6 +446,22 @@ const MyButton = ({children, ...elemProps}) => {
 };
 ```
 
+To target a part from another stencil, use `.selector`. Spreading the part onto an element still
+only applies `data-part`.
+
+```jsx
+const cardStencil = createStencil({
+  base: {
+    [`&:where(:has(${myButtonStencil.parts.icon.selector}))`]: {
+      paddingInlineStart: 0,
+    },
+    [`& ${myButtonStencil.parts.label.selector}`]: {
+      fontWeight: 700,
+    },
+  },
+});
+```
+
 As a reusable component, you can use component parts to style elements that are not exposed in the
 API. Consumers can also use the type safe Stencil to target that element to style it as well. As a
 general rule, a Stencil maps to a component. Multiple Stencils per component usually means nested

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.1.7",
+  "version": "15.1.10",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^15.1.7",
-    "@workday/canvas-kit-preview-react": "^15.1.7",
-    "@workday/canvas-kit-react": "^15.1.7",
-    "@workday/canvas-kit-styling": "^15.1.7",
+    "@workday/canvas-kit-labs-react": "^15.1.10",
+    "@workday/canvas-kit-preview-react": "^15.1.10",
+    "@workday/canvas-kit-react": "^15.1.10",
+    "@workday/canvas-kit-styling": "^15.1.10",
     "@workday/canvas-system-icons-web": "4.2.0",
     "@workday/canvas-tokens-web": "4.4.0",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "6137b93673be02b4e5f960abfbf70e862326feac"
+  "gitHead": "f901efa76097c95b05ec7872ea7b90e0555db9fd"
 }