@workday/canvas-kit-docs 14.0.7 → 14.0.8

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": "14.0.7",
-    "@workday/canvas-kit-preview-react": "14.0.7",
-    "@workday/canvas-kit-react": "14.0.7",
-    "@workday/canvas-kit-react-fonts": "^14.0.7",
-    "@workday/canvas-kit-styling": "14.0.7",
+    "@workday/canvas-kit-labs-react": "14.0.8",
+    "@workday/canvas-kit-preview-react": "14.0.8",
+    "@workday/canvas-kit-react": "14.0.8",
+    "@workday/canvas-kit-react-fonts": "^14.0.8",
+    "@workday/canvas-kit-styling": "14.0.8",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

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

@@ -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": "14.0.7",
-    "@workday/canvas-kit-preview-react": "14.0.7",
-    "@workday/canvas-kit-react": "14.0.7",
-    "@workday/canvas-kit-react-fonts": "^14.0.7",
-    "@workday/canvas-kit-styling": "14.0.7",
+    "@workday/canvas-kit-labs-react": "14.0.8",
+    "@workday/canvas-kit-preview-react": "14.0.8",
+    "@workday/canvas-kit-react": "14.0.8",
+    "@workday/canvas-kit-react-fonts": "^14.0.8",
+    "@workday/canvas-kit-styling": "14.0.8",
     "@workday/canvas-system-icons-web": "3.0.36",
     "@workday/canvas-tokens-web": "3.1.2"
   },

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -36,11 +36,35 @@ one button can be active at a time.
 
 <ExampleCodeBlock code={Basic} />
 
-Note that you must provide `SegmentedControl.List` with an `aria-label` prop for accessibility
-reasons.
-
 We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
 
+### Accessibility
+
+Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
+wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
+`<fieldset>` element, and useful for screen readers to describe the relationship between the
+buttons.
+
+- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
+  state to screen readers.
+- Providing your own `aria-label`string to `SegmentedControl.List` is recommended for describing the
+  purpose of the component.
+
+#### Screen Reader Experience
+
+When users interact with a `SegmentedControl` using screen readers:
+
+- The group context is announced (e.g., "View options, group" when using
+  `aria-label="View options"`)
+- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
+  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
+- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
+  state
+- When a button is activated, screen readers should announce the new state
+
+Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
+accessibility of these components.
+
 ### Variations
 
 `SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -69,6 +69,16 @@ You can change it from the default of 3 to any number greater than 1 and less th
 
 <ExampleCodeBlock code={OverflowActionBarCustomButtonCount} />
 
+## Accessibility
+
+Grouping the actions into an HTML `<section>` element with an `aria-label` string is recommended.
+This can be useful for helping screen reader users quickly jump down to the actions at the bottom of
+a page.
+
+Refer to [Button](?path=/docs/components-buttons--docs#accessibility) and
+[Menus](?path=/docs/components-popups-menu--docs#accessibility) for more information about
+accessibiliy of these components in the Action Bar.
+
 ## Component API
 
 <SymbolDoc name="ActionBar" fileName="/react/" />

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -4,7 +4,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 export default () => {
   return (
     <ActionBar>
-      <ActionBar.List position="relative" as="section" aria-label="Basic example actions">
+      <ActionBar.List position="relative" as="section" aria-label="Action Bar">
         <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
           First Action
         </ActionBar.Item>

package/dist/mdx/react/action-bar/examples/DeleteAction.tsx

@@ -4,7 +4,7 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
 export default () => {
   return (
     <ActionBar>
-      <ActionBar.List position="relative" as="section" aria-label="Delete actions example">
+      <ActionBar.List position="relative" as="section" aria-label="Action Bar">
         <ActionBar.Item as={DeleteButton}>Delete Action</ActionBar.Item>
         <ActionBar.Item>Second Action</ActionBar.Item>
       </ActionBar.List>

package/dist/mdx/react/action-bar/examples/Icons.tsx

@@ -5,7 +5,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 export default () => {
   return (
     <ActionBar>
-      <ActionBar.List position="relative" as="section" aria-label="Icons example actions">
+      <ActionBar.List position="relative" as="section" aria-label="Action Bar">
         <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>
           First Action
         </ActionBar.Item>

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -29,7 +29,7 @@ export default () => {
           <ActionBar.List
             position="relative"
             as="section"
-            aria-label="Overflow example actions"
+            aria-label="Action Bar"
             overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}
           >
             {(item: MyActionItem, index) => (

package/dist/mdx/react/button/button/Button.mdx

@@ -4,8 +4,6 @@ import {
   SymbolDoc,
   SymbolDescription,
 } from '@workday/canvas-kit-docs';
-import {Pill} from '@workday/canvas-kit-preview-react/pill';
-import {accessibilityIcon} from '@workday/canvas-system-icons-web';
 
 import Primary from './examples/Primary';
 import PrimaryInverse from './examples/PrimaryInverse';
@@ -110,22 +108,48 @@ tokens with the fallback being `brand.primary.**`.
 
 ## Accessibility
 
-<Pill className="sb-unstyled">
-  <Pill.Icon icon={accessibilityIcon} />
-  <Pill.Label>WAI-ARIA Reference</Pill.Label>
-</Pill>
+Our button components render semantic HTML `<button>` elements to the browser DOM. This means that
+ARIA roles won't be necessary in most cases, and `onClick` listeners will automatically support the
+Enter and Space keys for keyboard interactions.
 
-### Accessible Use of the `as` Prop
+[Button Pattern | APG | WAI | W3C](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
 
-Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
-semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
-best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
-should be used for navigation.
+- An `aria-label` is only necessary for icon-only buttons in most cases. Using
+  [Canvas Kit's tooltip component](?path=/docs/components-popups-tooltip--docs) will handle this for
+  you, and all users will be able to see the label for the button.
+- When button designs have 2 toggle states, an `aria-pressed={true | false}` property is required
+  for screen reader support. For example, see Canvas Kit's
+  [Segmented Control component](?path=/docs/preview-segmented-control--docs).
+- When buttons have an attached menu, an `aria-haspopup=”true”` property is required. Using
+  [Canvas Kit's Menu component](?path=/docs/components-menus-menu--docs) will handle this for you.
+- The icons used in text buttons are decorative in most cases and include ARIA `role="presentation"`
+  and `focusable="false"`. In some special cases where an icon does add meaning, you may be required
+  to change the `role` and add an `aria-label` to the icon for equivalent screen reader support.
 
-### Role
+### Disabled Buttons
 
-By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form,
-the role should be set to type `submit`.
+- Disabled buttons use the `disabled` attribute, removing them from the tab order.
+- Disabled styling is exempt from WCAG contrast requirements.
+
+### Screen Reader Experience
+
+- Button text content is announced along with the button role (e.g., "Primary, button").
+- Icon-only buttons announce the `aria-label` value along with the button role.
+- Toggle buttons announce their pressed/unpressed state (e.g., "Activity Stream, toggle button,
+  pressed" and check out the
+  [Segmented Control component](?path=/docs/preview-segmented-control--docs)).
+
+### Touch Target Size
+
+- All buttons meet the minimum 24px by 24px touch target size requirement for mobile accessibility.
+- Button padding ensures adequate spacing between interactive elements to prevent accidental
+  activation.
+
+### Button Groups
+
+- Related buttons can be grouped together with HTML unordered list elements or with `<fieldset>` and
+  `<legend>` elements. This can help give additional context to screen readers about the purpose of
+  the group.
 
 ## Component API
 

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -46,10 +46,40 @@ This variant can also be used with the `ExternalHyperlink` component.
 
 #### In Body Text
 
-In most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to link to another page or part of the document. By default they will wrap to a new line.
+In most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence where you need to
+link to another page or part of the document. By default they will wrap to a new line.
 
 <ExampleCodeBlock code={InBodyText} />
 
+> **Accessibility Note:** Underlining links is not required in most cases. However, the example
+> above is one such exception. When hyperlinked text appears inline with static text, a text
+> decoration is required to avoid failing WCAG v2.2 success criterion 1.4.1 Use of Color.
+>
+> [Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision](https://www.w3.org/WAI/WCAG22/Techniques/failures/F73)
+
+### Accessibility
+
+Our link components render semantic HTML `<a>` elements to the browser DOM. This means that ARIA
+roles won't be necessary in most cases. The `href` prop is required for accessibility. Activation
+links with the Enter key is standard expected behavior, while Space is only expected for buttons.
+
+#### When to Use Links vs Buttons
+
+- **Use Hyperlinks when:** Navigating to different pages or sections, or changing the browser's
+  location
+- **Use Buttons when:** Performing actions like submitting forms, opening modals, or triggering
+  functions without navigation
+- **Why This Matters:** Screen reader users expect different behaviors from links vs buttons. Users
+  navigate between links using different keyboard shortcuts than buttons. Browser behaviors like
+  "Open in new tab" only work with proper links.
+
+#### Common Mistakes to Avoid
+
+- Using buttons styled as links for navigation (breaks right-click context menus)
+- Using links for actions like "Delete" or "Save" (confuses user expectations)
+- Missing `href` attributes on navigation elements (breaks keyboard accessibility)
+- Using `href="#"` with `onClick` handlers instead of proper buttons
+
 ### Component API
 
 <SymbolDoc name="Hyperlink" fileName="/react/" hideDescription hideHeading headingStart={4} />
@@ -57,8 +87,11 @@ In most cases use `HyperLink` and `ExternalHyperlink` in body text of a sentence
 ### ExternalHyperlink
 
 If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
-users know about the behavior by adding an icon, `extLinkIcon`. To ensure proper accessibility, you **must* provide a label to the icon via the `iconLabel` prop.
-This override will be needed for translations.
+users know about the behavior by adding an icon, `extLinkIcon`.
+
+> **Accessibility Note:** Providing a label to the icon via the `iconLabel` prop is required for
+> accessibility because the icon adds meaning to the link text. We recommend keeping the alt text as
+> concise as possible, such as "Opens new window". This override will be needed for translations.
 
 <ExampleCodeBlock code={ExternalLink} />
 
@@ -77,13 +110,6 @@ link on a dark or colorful background.
   headingStart={4}
 />
 
-### Accessible Use of the `as` Prop
-
-Like many of our components, `Hyperlink` and `ExternalHyperlink` accept an `as` prop, which lets you
-change the underlying semantic element - usually an `<a>`, or a `<button>`. This should be done with
-caution to ensure the best accessibility. Generally, `<button>` elements should be used for actions,
-and `<a>` elements should be used for navigation.
-
 ## Specifications
 
 <Specifications file="Hyperlink.spec.ts" name="Hyperlink" />

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

@@ -3,6 +3,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
 import {trashIcon} from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -18,6 +19,8 @@ export default () => (
     <DeleteButton icon={trashIcon} iconPosition="end">
       Delete
     </DeleteButton>
-    <DeleteButton aria-label="trash" icon={trashIcon} />
+    <Tooltip title="Delete">
+      <DeleteButton icon={trashIcon} />
+    </Tooltip>
   </Flex>
 );

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

@@ -1,7 +1,7 @@
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ExternalHyperlink href="https://workday.com" iconLabel="Opens link in new window">
+  <ExternalHyperlink href="https://workday.com" iconLabel="Opens new window">
     External Hyperlink
   </ExternalHyperlink>
 );

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

@@ -24,7 +24,7 @@ export default () => (
     <ExternalHyperlink
       href="https://workday.com"
       variant="standaloneInverse"
-      iconLabel="Opens link in new window"
+      iconLabel="Opens new window"
     >
       Hyperlink
     </ExternalHyperlink>

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

@@ -1,4 +1,4 @@
-import {ExternalHyperlink, Hyperlink} from '@workday/canvas-kit-react/button';
+import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 export default () => (
   <p>
@@ -6,9 +6,7 @@ export default () => (
     <Hyperlink href="#hyperlink">tempor incididunt</Hyperlink> ut labore et dolore magna aliqua. Ut
     enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in
-    <ExternalHyperlink href="#hyperlink">
-      voluptate velit esse cillum dolore eu fugiat
-    </ExternalHyperlink>
+    <Hyperlink href="#hyperlink">voluptate velit esse cillum dolore eu fugiat</Hyperlink>
     nulla pariatur.
   </p>
 );

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

@@ -7,6 +7,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -22,6 +23,8 @@ export default () => (
     <PrimaryButton icon={caretDownIcon} iconPosition="end">
       Primary
     </PrimaryButton>
-    <PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
+    <Tooltip title="Related Actions">
+      <PrimaryButton icon={relatedActionsVerticalIcon} />
+    </Tooltip>
   </Flex>
 );

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

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -25,6 +26,8 @@ export default () => (
     <PrimaryButton icon={caretDownIcon} iconPosition="end" variant="inverse">
       Primary
     </PrimaryButton>
-    <PrimaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    <Tooltip title="Related Actions">
+      <PrimaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    </Tooltip>
   </Flex>
 );

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

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -24,6 +25,8 @@ export default () => (
     <SecondaryButton icon={caretDownIcon} iconPosition="end">
       Secondary
     </SecondaryButton>
-    <SecondaryButton icon={relatedActionsVerticalIcon} />
+    <Tooltip title="Related Actions">
+      <SecondaryButton icon={relatedActionsVerticalIcon} />
+    </Tooltip>
   </Flex>
 );

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

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -25,6 +26,8 @@ export default () => (
     <SecondaryButton icon={caretDownIcon} variant="inverse" iconPosition="end">
       Secondary
     </SecondaryButton>
-    <SecondaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    <Tooltip title="Related Actions">
+      <SecondaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    </Tooltip>
   </Flex>
 );

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

@@ -12,7 +12,11 @@ export default () => (
     <Hyperlink variant="standalone" href="#standalone-hyperlink">
       Standalone Hyperlink
     </Hyperlink>
-    <ExternalHyperlink variant="standalone" href="#standalone-external-hyperlink">
+    <ExternalHyperlink
+      variant="standalone"
+      href="#standalone-external-hyperlink"
+      iconLabel="Opens new window"
+    >
       Standalone External Hyperlink
     </ExternalHyperlink>
   </div>

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

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -24,6 +25,8 @@ export default () => (
     <TertiaryButton icon={caretDownIcon} iconPosition="end">
       Tertiary
     </TertiaryButton>
-    <TertiaryButton icon={relatedActionsVerticalIcon} />
+    <Tooltip title="Related Actions">
+      <TertiaryButton icon={relatedActionsVerticalIcon} />
+    </Tooltip>
   </Flex>
 );

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

@@ -9,6 +9,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 
 const parentContainerStyles = createStyles({
   gap: system.space.x4,
@@ -25,6 +26,8 @@ export default () => (
     <TertiaryButton icon={caretDownIcon} iconPosition="end" variant="inverse">
       Tertiary
     </TertiaryButton>
-    <TertiaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    <Tooltip title="Related Actions">
+      <TertiaryButton icon={relatedActionsVerticalIcon} variant="inverse" />
+    </Tooltip>
   </Flex>
 );

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

@@ -104,6 +104,10 @@ submenus.
 
 <ExampleCodeBlock code={NestedDynamic} />
 
+## Accessibility
+
+This content is coming soon!
+
 ## Component API
 
 <SymbolDoc name="Menu" fileName="/react/" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.7",
+  "version": "14.0.8",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.7",
-    "@workday/canvas-kit-preview-react": "^14.0.7",
-    "@workday/canvas-kit-react": "^14.0.7",
-    "@workday/canvas-kit-styling": "^14.0.7",
+    "@workday/canvas-kit-labs-react": "^14.0.8",
+    "@workday/canvas-kit-preview-react": "^14.0.8",
+    "@workday/canvas-kit-react": "^14.0.8",
+    "@workday/canvas-kit-styling": "^14.0.8",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "^3.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "1362528f8969a50b9f0e34b13e1c32fef5aa1040"
+  "gitHead": "450a5e2578f82e81445111c06744fab9387fce14"
 }