@workday/canvas-kit-docs 13.0.0-alpha.950-next.0 → 13.0.0-alpha.996-next.0

package/dist/es6/mdx/versionsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B,eAAO,MAAM,YAAY,yBAgCxB,CAAC"}
+{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsE1B,eAAO,MAAM,YAAY,yBAgCxB,CAAC"}

package/dist/es6/mdx/versionsTable.js

@@ -9,6 +9,10 @@ const allVersions = [
         versionNumber: version,
         documentation: 'https://github.com/Workday/canvas-kit',
     },
+    {
+        versionNumber: 11,
+        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v11/?path=/docs/welcome--page',
+    },
     {
         versionNumber: 10,
         documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',

package/dist/es6/mdx/welcomePage.js

@@ -34,7 +34,7 @@ export const WelcomePage = () => {
                 React.createElement(Card.Heading, null, "Getting Started"),
                 React.createElement(Card.Body, null,
                     React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
-                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--page" },
+                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" },
                     ' ',
                     "Getting Started Guide")),
             React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },

package/dist/mdx/10.0-UPGRADE-GUIDE.mdx

@@ -48,7 +48,7 @@ If you're using Canvas Kit and not directly using this package, there is nothing
 end. The Canvas Kit packages are using the static compilation as part of the build process. If you
 want to use this package for your own styles, you don't need to do anything special to use in
 development; just reference our
-[documentation](https://workday.github.io/canvas-kit/?path=/story/features-styling-welcome--page) on
+[documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs) on
 how to get started.
 
 For more information on why this package was introduced, please reference our

package/dist/mdx/11.0-UPGRADE-GUIDE.mdx

@@ -1,8 +1,8 @@
-import {Table} from '@workday/canvas-kit-react/table';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cssVar} from '@workday/canvas-kit-styling';
-import {Box} from '@workday/canvas-kit-react/layout';
+import { Table } from '@workday/canvas-kit-react/table';
+import { base, brand, system } from '@workday/canvas-tokens-web';
+import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
+import { cssVar } from '@workday/canvas-kit-styling';
+import { Box } from '@workday/canvas-kit-react/layout';
 
 
 # Canvas Kit 11.0 Upgrade Guide
@@ -850,7 +850,7 @@ previously in [Main](#main) (for reference, see
 in [Main](#main) from v9).
 
 `Table` is a
-[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page)
+[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs)
 which provides a flexible API and access to its internals via its subcomponents.
 
 > **Note**: `rowState` prop is no longer a part of the `Table` component.

package/dist/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -1,8 +1,8 @@
-import {Table} from '@workday/canvas-kit-react/table';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {cssVar} from '@workday/canvas-kit-styling';
-import {Box} from '@workday/canvas-kit-react/layout';
+import { Table } from '@workday/canvas-kit-react/table';
+import { base, brand, system } from '@workday/canvas-tokens-web';
+import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
+import { cssVar } from '@workday/canvas-kit-styling';
+import { Box } from '@workday/canvas-kit-react/layout';
 
 
 # Canvas Kit 12.0 Upgrade Guide
@@ -361,7 +361,7 @@ made to provide more flexibility and better explicit components when using input
 ##### Breaking API Change
 
 The newly promoted `FormField` is a
-[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--page).
+[compound component](https://workday.github.io/canvas-kit/?path=/docs/guides-compound-components--docs).
 Due to the different APIs of the component, this change is **not codemodable**. The following shows
 an example of how to **update** your code to match the new compound component API.
 

package/dist/mdx/CONTRIBUTING.mdx

@@ -155,7 +155,7 @@ Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your
 ### Releases
 
 - Releases are prepared by updating package versions with `lerna version`, and updating the
-  [changelog](/docs/changelog--page)
+  [changelog](/docs/changelog--docs)
 - A PR is created for the above updates
 - After the release PR is approved and merged, we create a release in GitHub with the contents of
   the changelog updates.

package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx

@@ -7,12 +7,43 @@ document to learn about what a compound component is.
 This document will go through building a simplified Disclosure component to help solidify the
 concepts. We will cover:
 
+- [Non Coordinated Components](#non-coordinated-components)
 - [Models](#models)
 - [Container Components](#disclosure-component)
 - [Sub-components](#disclosuretarget-component)
 - [Model Composition](#model-composition)
 - [Behavior hooks](#behavior-hooks)
 
+## Non Coordinated Components
+
+In most cases you'll create compound components that have a model and share information across subcomponents. However, in the case where information doesn't need to be shared, you can create a non
+coordinated component. These components often represent some styled element with no associated role
+or behavior and don't rely on state and events such as a `Card`, `Flex` or `Button` components. Use
+`createComponent` factory function in these scenarios.
+
+### `createComponent`
+
+Use `createComponent` when you want to create a rendered element with _no behavior_. This is useful
+for elements that you want to use for styling purposes like container elements, or subcomponents
+that are simple rendered elements. This utility function will wrap your component in a
+`React.ForwardRef` and allow you to add subcomponents as well.
+
+```tsx
+export const Card = createComponent('div')({
+  displayName: 'Card',
+  subComponents: {
+    Heading: CardHeading, // this is also using createComponent
+  },
+  Component: ({children, ...elemProps}: CardProps, ref, Element) => {
+    return (
+      <Box as={Element} {...elemProps} ref={ref}>
+        {children}
+      </Box>
+    );
+  },
+});
+```
+
 ## Models
 
 A model is composed of state and events. The shape of the model used by components looks like this:

package/dist/mdx/preview-react/InformationHighlight/InformationHighlight.mdx

@@ -0,0 +1,109 @@
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+} from '@workday/canvas-kit-docs';
+
+import * as InformationHighlight from './InformationHighlight.stories.ts';
+import Basic from './examples/Basic';
+import Body from './examples/Body';
+import Heading from './examples/Heading';
+import Informational from './examples/Informational';
+import Caution from './examples/Caution';
+import Critical from './examples/Critical';
+import IconCritical from './examples/CustomIconCritical';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Information Highlight
+
+A container to call out important information on a page or a section of a page that the user should be aware of.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+`InformationHighlight` should be used to call out important information to the user and are paired with a meaningful
+ icon and color to differentiate information type. It should not be removed from the interface until some system or admin level action has been taken to do so.
+
+You can use an `InformationHighlight` to:
+- Prevent unwanted consequences from destructive actions
+- Reassure users in their next steps
+- Provide detail into information on the page
+- Show changes in page content
+
+### When to Consider Something Else
+- Consider a [Banner](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-banner--docs) if the message is about system-wide errors or alerts, or if the message appears in response to user action.
+- Consider a [Dialog](https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog--docs) if the message is critical and requires user action or decision before proceeding
+- Consider a [Toast](https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast--docs) if the message is timely, such as communicating updates on the process of an application.
+### Basic Example
+<ExampleCodeBlock code={Basic} />
+
+
+## Variants
+`InformationHighlight` has three variants and each `variant` has two types of `emphasis`.
+
+
+Variants: `informational`, `caution`, `critical`
+
+Emphasis: `low`, `high`
+
+
+The variants have different icons and colors to convey severity and the emphasis changes the background color to have a
+ lower or higher contrast. If no `variant` or `emphasis` is selected the layout will default to
+  `Variant: informational, Emphasis: low`.
+
+
+The following examples will show the `low` and `high` emphasis of the three variants.
+`low` Emphasis will be shown first and should be used when there is other more important information on the page.
+`high` Emphasis will be shown second, and should be used when the highlight is not competing with other, more important information.
+
+### Informational
+The informational variant is for _nice to have_ information, such as related features or opportunities.
+<ExampleCodeBlock code={Informational} />
+
+### Caution
+The caution variant is for _important to know_ information, such as the potential consequences of specific actions.
+
+<ExampleCodeBlock code={Caution} />
+
+
+### Critical
+The critical variant is for _must know_ information that could otherwise cause failure if the user is unaware
+
+<ExampleCodeBlock code={Critical} />
+
+
+### RTL Example
+ Information Highlight also supports RTL Languages. To enable RTL, add a custom theme with direction set to 'ContentDirection.RTL'
+<ExampleCodeBlock code={RTL} />
+
+## Partial and Custom Information Highlights
+
+`InformationHighlight` can use custom icons or be designed to only use some of its components.
+
+### Custom Icon: Critical
+<ExampleCodeBlock code={IconCritical} />
+
+### Body Only Example
+<ExampleCodeBlock code={Body} />
+
+### Heading Only Example
+<ExampleCodeBlock code={Heading} />
+
+### Accessible Use of the `as` Prop
+Like many of our components, `InformationHighlight` and it's subcomponents accept an `as` prop, which lets you change
+the underlying semantic element. For `InformationHighlight.Heading`, you can change the heading level if you were
+needing to define a different level of importance. This should be done with caution to ensure the best accessibility.
+
+## Component API
+
+<SymbolDoc name="InformationHighlight" fileName="/preview-react/" />
+
+## Specifications
+
+<Specifications file="InformationHighlight.spec.tsx" name="InformationHighlight" />

package/dist/mdx/preview-react/InformationHighlight/examples/Basic.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Icon />
+      <InformationHighlight.Heading>Information Highlight</InformationHighlight.Heading>
+      <InformationHighlight.Body>
+        {' '}
+        This is what an information highlight would look like with with the default settings and
+        every field filled in{' '}
+      </InformationHighlight.Body>
+      <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Body.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Body>
+        Only the body of an information highlight
+      </InformationHighlight.Body>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Caution.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'caution'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below, nothing will happen
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'caution'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Caution: Highlight Something </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below, nothing will happen
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Critical.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'critical'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading>
+          {' '}
+          Attention! Highlight Something{' '}
+        </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'critical'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading>
+          {' '}
+          Attention! Highlight Something{' '}
+        </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/CustomIconCritical.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {chartIcon} from '@workday/canvas-system-icons-web';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'critical'} emphasis={'low'}>
+        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          A custom Icon can be added to the Information Highlight component
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'critical'} emphasis={'high'}>
+        <InformationHighlight.Icon icon={chartIcon} />
+        <InformationHighlight.Heading> Attention! Custom Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          A custom Icon can be added to the Information Highlight component
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Heading.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+
+export default () => {
+  return (
+    <InformationHighlight>
+      <InformationHighlight.Heading> Only Heading </InformationHighlight.Heading>
+    </InformationHighlight>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/Informational.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <InformationHighlight variant={'informational'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+      <InformationHighlight variant={'informational'} emphasis={'high'}>
+        <InformationHighlight.Icon />
+        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
+        <InformationHighlight.Body>
+          If you select the link below it will just reroute you back to this page
+        </InformationHighlight.Body>
+        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
+      </InformationHighlight>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/InformationHighlight/examples/RTL.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <Flex flexDirection={'column'} gap={system.space.x2}>
+      <CanvasProvider theme={theme}>
+        <InformationHighlight variant={'caution'} emphasis={'low'}>
+          <InformationHighlight.Icon />
+          <InformationHighlight.Heading>
+            {' '}
+            انتباه! من اليمين إلى اليسار{' '}
+          </InformationHighlight.Heading>
+          <InformationHighlight.Body>
+            نحن ندعم اللغات من اليمين إلى اليسار
+          </InformationHighlight.Body>
+          <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
+        </InformationHighlight>
+      </CanvasProvider>
+      <CanvasProvider theme={theme}>
+        <InformationHighlight variant={'caution'} emphasis={'high'}>
+          <InformationHighlight.Icon />
+          <InformationHighlight.Heading>
+            {' '}
+            انتباه! من اليمين إلى اليسار{' '}
+          </InformationHighlight.Heading>
+          <InformationHighlight.Body>
+            نحن ندعم اللغات من اليمين إلى اليسار
+          </InformationHighlight.Body>
+          <InformationHighlight.Link href="#hyperlink">وثائق</InformationHighlight.Link>
+        </InformationHighlight>
+      </CanvasProvider>
+    </Flex>
+  );
+};

package/dist/mdx/preview-react/radio/Radio.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 Alert from './examples/Alert';
@@ -139,7 +139,7 @@ how to use `RadioGroup` with React Hook Form.
 
 Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
 our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/preview-react/select/examples/Top Label/Alert.tsx

@@ -7,7 +7,7 @@ import {controlComponent} from '../../../../../../utils/storybook';
 
 export default () => {
   return (
-    <FormField id="select-alert" error="error">
+    <FormField id="select-alert" error="alert">
       <FormField.Label>Label</FormField.Label>
       <FormField.Field>
         {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}

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 Emphasis from './examples/Emphasis';
@@ -75,7 +75,7 @@ The background color dictated by the `variant` will be dark or light based on th
 
 Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
 information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
 
 ## Component API
 

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -0,0 +1,36 @@
+import Basic from './examples/GlobalHeader';
+
+
+# GlobalHeader Example
+
+Developers building internal Workday applications will likely not need to create this component.
+However, if you're building components to be used outside of Workday, this is a helpful reference
+for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />
+
+## Tooltip usage
+
+- The `default` variant Tooltip is used on all of the icon buttons, which will automatically set the
+  Tooltip's text to the accessible name. (`aria-label`)
+- The `describe` variant Tooltip is used instead on the "MENU" button because this is a text button.
+  The Tooltip's text "Global Navigation" will instead be assigned to the accessible description to
+  ensure that the visible button text "MENU" is not overriden.
+
+## Count badge usage
+
+When `<CountBadge>` is used as a sibling component for button, the `aria-describedby` property is
+set on the button referencing the `id` value of the `<CountBadge>`. This practice helps support
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- When the `<CountBadge>` is updated, then screen readers can automatically describe (in real-time)
+  the name of the live region, "Notifications" and the text updated inside of it, "1 new".

package/dist/mdx/react/_examples/mdx/CompoundComponent.mdx

@@ -1,4 +1,4 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import { ExampleCodeBlock } from '@workday/canvas-kit-docs';
 
 import Template from './examples/compoundComponent/CustomCard';
 
@@ -11,6 +11,6 @@ Component component utilites are a great way to wrap and extend exisitng Canvas
 can dramatically simplify state handling and gives you easy access to things like ref forwarding.
 
 For more complex examples,
-[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--page).
+[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--docs).
 
 <ExampleCodeBlock code={Template} />

package/dist/mdx/react/_examples/mdx/Headers.mdx

@@ -12,6 +12,32 @@ Developers building internal Workday applications will likely not need to create
 However, if you're building components to be used outside of Workday, this is a helpful reference
 for building a global navigation header that looks like our internal `GlobalHeader`.
 
+## Tooltip usage
+
+- The `default` variant Tooltip is used on all of the icon buttons, which will automatically set the
+  Tooltip's text to the accessible name. (`aria-label`)
+- The `describe` variant Tooltip is used instead on the "MENU" button because this is a text button.
+  The Tooltip's text "Global Navigation" will instead be assigned to the accessible description to
+  ensure that the visible button text "MENU" is not overriden.
+
+## Count badge usage
+
+When `<CountBadge>` is used as a sibling component for button, the `aria-describedby` property is
+set on the button referencing the `id` value of the `<CountBadge>`. This practice helps support
+users depending on screen readers to describe both the name of the button and the value of the
+`<CountBadge>`.
+
+When a web app dynamically updates count badges in real-time, consider the following accessibility
+enhancements to support live, real-time announcements for screen readers:
+
+- The `<CountBadge>` component is rendered as a child of the `<AriaLiveRegion>` container.
+- The `<AriaLiveRegion>` container is assigned a name by using `aria-labelledby` to reference the
+  name of the icon button `"Notifications"`.
+- The `<AccessibleHide>` component is used following the `<CountBadge>` to render a hidden word
+  "new" that only screen reader users can access.
+- When the `<CountBadge>` is updated, then screen readers can automatically describe (in real-time)
+  the name of the live region, "Notifications" and the text updated inside of it, "1 new".
+
 <ExampleCodeBlock code={GlobalHeaderBasic} />
 
 ## Page Header