@workday/canvas-kit-docs 14.2.2 → 14.2.4

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

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

@@ -255,7 +255,7 @@ the target and popup to `4px`.
 **PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
 
 We've converted `Select` into a
-[compound component](/getting-started/for-developers/resources/compound-components/) which provides
+[compound component](/get-started/for-developers/documentation/compound-components/) which provides
 a flexible API and access to its internals via its subcomponents.
 
 ```tsx

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

@@ -867,7 +867,7 @@ interface MyButtonProps extends ExtractProps<> {
 
 ### Card
 
-Card is now a [compound component](/getting-started/for-developers/resources/compound-components/)
+Card is now a [compound component](/get-started/for-developers/documentation/compound-components/)
 composed of a `Card.Body` and an optional `Card.Heading`. This allows direct access to the heading
 and body elements.
 
@@ -1058,7 +1058,7 @@ There is no codemod for this change.
 ### Popups
 
 Popup has transitioned to a
-[compound component](/getting-started/for-developers/resources/compound-components/), along with all
+[compound component](/get-started/for-developers/documentation/compound-components/), along with all
 Popup-based behavior hooks. What was a `Popup` in v4 is now a `Popup.Card` in v5. The target button
 and `Popper` components have also been converted to subcomponents of `Popup`.
 
@@ -1394,7 +1394,7 @@ const MyPopup = () => {
 ### Modal
 
 Modal has transitioned to a
-[compound component](/getting-started/for-developers/resources/compound-components/). What was
+[compound component](/get-started/for-developers/documentation/compound-components/). What was
 `Modal` in v4 is now `Modal.Card` in v5.
 
 #### v4

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

@@ -513,7 +513,7 @@ creating `ActionBar.List` subcomponent and replacing all `ActionBar` children to
 
 ### Banner
 
-Banner is now a [compound component](/getting-started/for-developers/resources/compound-components/)
+Banner is now a [compound component](/get-started/for-developers/documentation/compound-components/)
 composed of `Banner.Icon`, `Banner.Label`, and `Banner.ActionText`. This allows direct access to the
 icon, label, and text elements.
 
@@ -532,7 +532,7 @@ icon, label, and text elements.
 🤖 The codemod will rewrite your JSX to match the new API.
 
 Like all compound components, `Banner` is written using the
-[createComponent](/getting-started/for-developers/resources/creating-compound-components/#disclosurecontent-component)
+[createComponent](/get-started/for-developers/documentation/creating-compound-components/#disclosurecontent-component)
 utility from our
 [common](https://github.com/Workday/canvas-kit/blob/ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b/modules/react/common/lib/utils/components.ts#L167)
 module; it supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) and using the
@@ -741,7 +741,7 @@ buttons or other buttons that aren't supported by our standard button components
 
 We've updated `AccentIcon`, `AppletIcon`, `Graphic`, `Icon`, `Svg`, `SystemIcon`, and
 `SystemIconCircle` to use the
-[createComponent](/getting-started/for-developers/resources/creating-compound-components/#disclosurecontent-component)
+[createComponent](/get-started/for-developers/documentation/creating-compound-components/#disclosurecontent-component)
 utility from our
 [common](https://github.com/Workday/canvas-kit/blob/ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b/modules/react/common/lib/utils/components.ts#L167)
 module; they now support [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) and using
@@ -915,7 +915,7 @@ codemod.
 ### Segmented Control
 
 `SegmentedControl` is now a
-[compound component](/getting-started/for-developers/resources/compound-components/).
+[compound component](/get-started/for-developers/documentation/compound-components/).
 
 Given the [removal of `IconButton`](#removal-of-icon-button) in v7, you'll now need to use
 `SegmentedControl.Button` instead.

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

@@ -191,7 +191,7 @@ const Example = styled('div')(
 ### Responsive Styles
 
 We've added a set of
-[responsive utilities](/getting-started/for-developers/resources/responsive-styling/) to facilitate
+[responsive utilities](/get-started/for-developers/guides/responsive-styling/) to facilitate
 container-based and viewport-based responsive styling:
 
 - **useResponsiveContainerStyles**: A hook that allows developers to create container-based
@@ -253,7 +253,7 @@ return (
 We've added a new `@workday/canvas-kit-react/testing` slash import to house our testing utilities
 and components. You may find them useful for testing the different visual states of your components.
 
-View the [Testing](/utilities/testing/) documentation for more information. The example below
+View the [Testing](/get-started/for-developers/documentation/testing#visual-tests) documentation for more information. The example below
 creates a visual states table of our `DeleteButton`. Each row renders a different size of
 `DeleteButton` with each column representing different combinations of the `disabled`, `hover`, and
 `active` states.
@@ -365,7 +365,7 @@ text with built-in support for our Canvas type tokens.
 We've added a new version of
 [`SegmentedControl`](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control-react--basic)
 which has been redesigned as a
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `SegmentedControl` represents a linear group of multiple buttons allowing the selection of
 a specific value and is best used for switching between different views of the same content.
 
@@ -417,7 +417,7 @@ You may still use `SegmentedControl` in the Main package, but note that it will
 We've added a new version of
 [`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator-react--basic)
 which has been redesigned as a
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `StatusIndicator` is best used for helping the user quickly identify the status of a task,
 action, or page element.
 
@@ -671,7 +671,7 @@ const StyledBox = styled(Box)({
 ### Breadcrumbs
 
 `Breadcrumbs` has been promoted to the Main package. It now uses the list system from our
-[Collection API](/getting-started/for-developers/resources/collection-api/) which provides new
+[Collection API](/get-started/for-developers/guides/collection-api/) which provides new
 overflow behavior based on container width.
 
 The following code-moddable changes have been made to the `Breadcrumbs` API (see below for

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

@@ -98,7 +98,7 @@ finished.
 ### Table
 
 We've introduced a new `Table`
-[compound component](/getting-started/for-developers/resources/compound-components/) to the Preview
+[compound component](/get-started/for-developers/documentation/compound-components/) to the Preview
 package. `Table` is a compound component that is used to present information in a two-dimensional
 [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) comprised of rows and
 columns of cells containing data.
@@ -374,7 +374,7 @@ previously in [Main](#main) (for reference, see
 [`Toast`](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-popups-toast--error) in
 [Main](#main) from v8).
 
-`Toast` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+`Toast` is a [compound component](/get-started/for-developers/documentation/compound-components/)
 which provides a flexible API and access to its internals via its subcomponents. It supports a new
 `mode` prop which applies the proper accessibility features to the component based on the desired
 mode: `status`, `alert`, or `dialog`.

package/dist/mdx/CONTRIBUTING.mdx

@@ -148,7 +148,7 @@ dependencies, then it's required.
 Canvas Kit uses [Jest](https://jestjs.io/) and
 [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to unit test
 our React components. For more information about our testing strategy and how we write unit tests,
-visit our [Testing Readme](/getting-started/for-developers/resources/testing/).
+visit our [Testing Readme](/get-started/for-developers/documentation/testing/).
 
 Canvas Kit uses [Cypress](https://cypress.io) for UI tests. For info on why we chose Cypress, visit
 [Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md) For more
@@ -188,9 +188,9 @@ Upon commit, [lint-staged](https://github.com/okonet/lint-staged) will run your
 
 If creating a React module, a new compound component will be created. To find out more about
 Compound Components, refer to
-[Compound Components](/getting-started/for-developers/resources/compound-components/). To find out
+[Compound Components](/get-started/for-developers/documentation/compound-components/). To find out
 more about creating Compound Components, refer to
-[Creating Compound Components](/getting-started/for-developers/resources/creating-compound-components/).
+[Creating Compound Components](/get-started/for-developers/documentation/creating-compound-components/).
 
 ### Exporting a Module
 
@@ -214,7 +214,7 @@ This will start the unit tests.
 ### Code Style Guide
 
 Refer to the
-[API & Pattern Guidelines](/getting-started/for-developers/resources/api-pattern-guidelines/).
+[API & Pattern Guidelines](/get-started/for-developers/documentation/api-pattern-guidelines/).
 
 Rules are enforced using [ESLint](https://eslint.org) and code formatting is provided through
 [Prettier](https://prettier.io).

package/dist/mdx/CREATING_COMPOUND_COMPONENTS.mdx

@@ -1,7 +1,7 @@
 # Building a Compound Component
 
 Refer to the
-[Compound Component documentation](/getting-started/for-developers/resources/compound-components/)
+[Compound Component documentation](/get-started/for-developers/documentation/compound-components/)
 document to learn about what a compound component is.
 
 This document will go through building a simplified Disclosure component to help solidify the

package/dist/mdx/labs-react/side-panel/SidePanel.mdx

@@ -1,6 +1,11 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {
+  ExampleCodeBlock,
+  SymbolDoc,
+  Specifications,
+  StorybookStatusIndicator,
+} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
-import HiddenName from './examples/HiddenName';
+import Heading from './examples/Heading';
 import AlternatePanel from './examples/Variant';
 import ExternalControl from './examples/ExternalControl';
 import RightOrigin from './examples/RightOrigin';
@@ -23,7 +28,8 @@ yarn add @workday/canvas-kit-labs-react
 
 ## Migrating from Preview
 
-If you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API changes:
+If you're migrating from `@workday/canvas-kit-preview-react/side-panel`, here are the key API
+changes:
 
 ### Import Changes
 
@@ -37,27 +43,27 @@ import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-
 
 ### Hook API Changes
 
-| Preview (`useSidePanel`) | Labs (`useSidePanelModel`) |
-|--------------------------|----------------------------|
-| `initialExpanded: boolean` | `initialTransitionState: 'expanded' \| 'collapsed'` |
-| `origin: 'left' \| 'right'` | `origin: 'start' \| 'end'` |
-| Returns `expanded: boolean` | Returns `model.state.transitionState` |
-| Returns `setExpanded(bool)` | Use `model.events.expand()` / `model.events.collapse()` |
-| Returns `panelProps` to spread | Props applied automatically via `elemPropsHook` |
-| Returns `labelProps` to spread | Use `id={model.state.labelId}` on label element |
+| Preview (`useSidePanel`)         | Labs (`useSidePanelModel`)                              |
+| -------------------------------- | ------------------------------------------------------- |
+| `initialExpanded: boolean`       | `initialTransitionState: 'expanded' \| 'collapsed'`     |
+| `origin: 'left' \| 'right'`      | `origin: 'start' \| 'end'`                              |
+| Returns `expanded: boolean`      | Returns `model.state.transitionState`                   |
+| Returns `setExpanded(bool)`      | Use `model.events.expand()` / `model.events.collapse()` |
+| Returns `panelProps` to spread   | Props applied automatically via `elemPropsHook`         |
+| Returns `labelProps` to spread   | Use `id={model.state.labelId}` on label element         |
 | Returns `controlProps` to spread | Props applied automatically to `SidePanel.ToggleButton` |
 
 ### Component API Changes
 
-| Preview | Labs |
-|---------|------|
-| `<SidePanel {...panelProps}>` | `<SidePanel model={model}>` or just `<SidePanel>` |
-| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />` |
-| `<Heading {...labelProps}>` | `<Heading id={model.state.labelId}>` |
-| `expanded` prop on SidePanel | Managed by model's `transitionState` |
-| `touched` prop on SidePanel | Managed internally |
-| `onExpandedChange` callback | Use `onStateTransition` and derive expanded state |
-| `onStateTransition` on component | `onStateTransition` on model config |
+| Preview                                        | Labs                                              |
+| ---------------------------------------------- | ------------------------------------------------- |
+| `<SidePanel {...panelProps}>`                  | `<SidePanel model={model}>` or just `<SidePanel>` |
+| `<SidePanel.ToggleButton {...controlProps} />` | `<SidePanel.ToggleButton />`                      |
+| `<Heading {...labelProps}>`                    | `<Heading id={model.state.labelId}>`              |
+| `expanded` prop on SidePanel                   | Managed by model's `transitionState`              |
+| `touched` prop on SidePanel                    | Managed internally                                |
+| `onExpandedChange` callback                    | Use `onStateTransition` and derive expanded state |
+| `onStateTransition` on component               | `onStateTransition` on model config               |
 
 ### Code Migration Example
 
@@ -67,17 +73,17 @@ const {expanded, panelProps, labelProps, controlProps} = useSidePanel({
   initialExpanded: false,
 });
 
-<SidePanel {...panelProps} origin="right" onExpandedChange={(exp) => console.log(exp)}>
+<SidePanel {...panelProps} origin="right" onExpandedChange={exp => console.log(exp)}>
   <SidePanel.ToggleButton {...controlProps} />
   <Heading {...labelProps}>Panel Title</Heading>
   {expanded && <Content />}
-</SidePanel>
+</SidePanel>;
 
 // After (labs-react)
 const model = useSidePanelModel({
   initialTransitionState: 'collapsed',
   origin: 'end',
-  onStateTransition: (state) => {
+  onStateTransition: state => {
     const isExpanded = state === 'expanded' || state === 'expanding';
     console.log(isExpanded);
   },
@@ -87,21 +93,25 @@ const model = useSidePanelModel({
   <SidePanel.ToggleButton />
   <Heading id={model.state.labelId}>Panel Title</Heading>
   {model.state.transitionState === 'expanded' && <Content />}
-</SidePanel>
+</SidePanel>;
 ```
 
 ### Checking Expanded State
 
 ```tsx
 // Before (preview-react)
-if (expanded) { /* ... */ }
+if (expanded) {
+  /* ... */
+}
 
 // After (labs-react) - for exact state
-if (model.state.transitionState === 'expanded') { /* ... */ }
+if (model.state.transitionState === 'expanded') {
+  /* ... */
+}
 
 // After (labs-react) - including animation states
-const isExpanded = model.state.transitionState === 'expanded' ||
-                   model.state.transitionState === 'expanding';
+const isExpanded =
+  model.state.transitionState === 'expanded' || model.state.transitionState === 'expanding';
 ```
 
 ## Usage
@@ -111,14 +121,9 @@ const isExpanded = model.state.transitionState === 'expanded' ||
 `SidePanel` is composed of three parts:
 
 - The panel container (with an optional `model` prop)
-- An accessible name (using `model.state.labelId` on a visible or hidden element)
+- A heading (`SidePanel.Heading`) for the panel that is visually hidden when the panel is collapsed
 - A toggle button (`SidePanel.ToggleButton`) to control the expand / collapse states
 
-The component automatically handles:
-- ARIA attributes (`aria-labelledby`, `aria-controls`, `aria-expanded`)
-- Transition states (`expanding`, `expanded`, `collapsing`, `collapsed`)
-- CSS transitions for smooth animations
-
 Bidirectional support is built into `SidePanel`. As seen in the example below, CSS Flexbox flips the
 page layout and the panel's contents. `SidePanel` also has logic to flip the position and direction
 of the `ToggleButton` as well as the direction of the expand / collapse animation. If you're using
@@ -129,13 +134,12 @@ logic or styling for bidirectional support.
 
 ### Hidden Name
 
-`SidePanel` must always have an accessible label for both the HTML `<section>` container and the
-`ToggleButton`. The label element must have `id={model.state.labelId}` to properly connect it to
-the panel and toggle button via `aria-labelledby`. The label can be visually hidden using
-`AccessibleHide` which relies on CSS properties to hide text visually while keeping it available
-for screen readers.
+`SidePanel`'s `<section>` element container should always have an accessible name to help screen
+reader users understand the purpose of the panel. For this reason, we recommend using the
+`SidePanel.Heading` component and setting the `hidden` prop to `true`. This will visually hide the
+heading while keeping it accessible to screen readers.
 
-<ExampleCodeBlock code={HiddenName} />
+<ExampleCodeBlock code={Heading} />
 
 ### Alternate Variant
 
@@ -148,8 +152,8 @@ used (this case is covered in the Examples section).
 ### External Control
 
 Sometimes you'll want to control `SidePanel`'s expand / collapse behavior from outside the
-component. You can use the model's events (`model.events.expand()` and `model.events.collapse()`)
-to programmatically control the panel.
+component. You can use the model's events (`model.events.expand()` and `model.events.collapse()`) to
+programmatically control the panel.
 
 #### Notes about accessibility
 
@@ -168,9 +172,9 @@ state and call `model.events.expand()` or `model.events.collapse()` on click.
 ### Right Origin
 
 By default, `SidePanel` uses a `start` origin (left in LTR, right in RTL). This sets the
-`ToggleButton`'s position and direction as well as the direction of the animation. You can set
-the origin to `"end"` to flip these. The origin uses logical properties (`start`/`end`) for
-proper bidirectional support.
+`ToggleButton`'s position and direction as well as the direction of the animation. You can set the
+origin to `"end"` to flip these. The origin uses logical properties (`start`/`end`) for proper
+bidirectional support.
 
 <ExampleCodeBlock code={RightOrigin} />
 
@@ -183,26 +187,53 @@ If you do not need `SidePanel`'s expand / collapse behavior, you can simply omit
 ### Deriving Expanded State
 
 If you need a simple boolean `expanded` state (similar to the preview-react `onExpandedChange`
-callback), you can derive it from the `transitionState` using the `onStateTransition` callback
-on the model.
+callback), you can derive it from the `transitionState` using the `onStateTransition` callback on
+the model.
 
 ### onStateTransition
 
 The `onStateTransition` callback is called whenever the panel's transition state changes. This
-includes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass
-this callback directly to the `SidePanel` component or to the `useSidePanelModel` hook.
+includes all four states: `expanding`, `expanded`, `collapsing`, and `collapsed`. You can pass this
+callback directly to the `SidePanel` component or to the `useSidePanelModel` hook.
 
 The transition flow is:
+
 1. **Collapsing**: `expanded` → `collapsing` → `collapsed`
 2. **Expanding**: `collapsed` → `expanding` → `expanded`
 
 This is useful for:
+
 - Triggering side effects when the panel state changes
 - Syncing the panel state with external state management
 - Animating child components based on the transition state
 
 <ExampleCodeBlock code={OnStateTransition} />
 
+### Accessibility
+
+`SidePanel` renders a `<section>` element with an accessible name provided by `aria-labelledby`,
+which references the `SidePanel.Heading` component. This ensures screen reader users understand the
+purpose of the panel.
+
+#### Panel and Heading
+
+- The `SidePanel.Heading` provides the accessible name for the panel via `aria-labelledby`
+- When the panel is collapsed, the heading is automatically hidden visually but remains accessible
+  to screen readers
+- Use the `hidden` prop on `SidePanel.Heading` if you want the heading always visually hidden
+
+#### Toggle Button
+
+- `SidePanel.ToggleButton` automatically includes `aria-controls` (references the panel's `id`),
+  `aria-pressed` (indicates current state), and `aria-describedby` (references the panel's heading)
+- Developers must provide a static `aria-label` string on `SidePanel.ToggleButton` to describe the
+  button's purpose (e.g., "Collapse View"). Avoid using ambiguous terms like "Toggle" in the label.
+  Since `aria-pressed` communicates the state, avoid dynamically updating `aria-label`
+- The button includes a Tooltip with customizable text via `tooltipTextExpand` and
+  `tooltipTextCollapse` props (defaults: "Expand View" and "Collapse View")
+- For optimal keyboard navigation, place `SidePanel.ToggleButton` as the first focusable element in
+  the panel
+
 ## Component API
 
 <SymbolDoc name="SidePanel" fileName="/labs-react/" />
@@ -221,17 +252,17 @@ import {useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 const model = useSidePanelModel({
   initialTransitionState: 'collapsed',
   origin: 'end',
-  onStateTransition: (state) => console.log('State:', state),
+  onStateTransition: state => console.log('State:', state),
 });
 
 // Access state
 model.state.transitionState; // 'expanded' | 'expanding' | 'collapsed' | 'collapsing'
-model.state.panelId;         // unique ID for the panel
-model.state.labelId;         // unique ID for the label
+model.state.panelId; // unique ID for the panel
+model.state.labelId; // unique ID for the label
 
 // Trigger events
-model.events.expand();              // Set to expanded (no animation)
-model.events.collapse();            // Set to collapsed (no animation)
+model.events.expand(); // Set to expanded (no animation)
+model.events.collapse(); // Set to collapsed (no animation)
 model.events.handleAnimationStart(); // Start expand/collapse animation
 ```
 

package/dist/mdx/labs-react/side-panel/examples/AlwaysOpen.tsx

@@ -2,7 +2,7 @@ import {AccentIcon} from '@workday/canvas-kit-react/icon';
 import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -37,9 +37,9 @@ export default () => {
       <SidePanel model={model}>
         <Flex cs={stylesOverride.panelContainer}>
           <AccentIcon icon={rocketIcon} cs={stylesOverride.accentIcon} />
-          <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
+          <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
             Tasks Panel
-          </Heading>
+          </SidePanel.Heading>
         </Flex>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.mainContent}>

package/dist/mdx/labs-react/side-panel/examples/Basic.tsx

@@ -1,54 +1,34 @@
 import * as React from 'react';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
 import {AccentIcon} from '@workday/canvas-kit-react/icon';
-import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {rocketIcon} from '@workday/canvas-accent-icons-web';
 import {system} from '@workday/canvas-tokens-web';
 
-const stylesOverride = {
-  viewPortContainer: createStyles({
-    height: px2rem(320),
-  }),
-  panel: createStyles({
-    alignItems: 'center',
-    padding: system.space.x4,
-  }),
-  accentIcon: createStyles({
-    marginInlineEnd: system.space.x4,
-  }),
-  mainContent: createStyles({
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'column',
-    flex: 1,
-    flexBasis: 'auto',
-  }),
-};
+const flexHeadingStyles = createStyles({
+  alignItems: 'center',
+  gap: system.space.x2,
+});
+
+const viewPortStyles = createStyles({
+  height: px2rem(320),
+});
 
 export default () => {
   const model = useSidePanelModel();
 
   return (
-    <Flex cs={stylesOverride.viewPortContainer}>
+    <Flex cs={viewPortStyles}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <Flex cs={stylesOverride.panel}>
-          {model.state.transitionState === 'expanded' && (
-            <Flex cs={stylesOverride.accentIcon}>
-              <AccentIcon icon={rocketIcon} />
-            </Flex>
-          )}
-          <Heading
-            size="small"
-            id={model.state.labelId}
-            hidden={model.state.transitionState === 'collapsed' ? true : undefined}
-          >
+        <SidePanel.Heading size="small">
+          <Flex cs={flexHeadingStyles}>
+            <AccentIcon icon={rocketIcon} />
             Tasks Panel
-          </Heading>
-        </Flex>
+          </Flex>
+        </SidePanel.Heading>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
       </SidePanel>
     </Flex>
   );

package/dist/mdx/labs-react/side-panel/examples/ExternalControl.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {Text} from '@workday/canvas-kit-react/text';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
@@ -26,19 +26,6 @@ const stylesOverride = {
   }),
 };
 
-/*
- * NOTE TO DEV:
- * Spreading the `controlProps` onto an external control creates serious accessibility issues.
- * - `aria-labelledby` id reference is invalid when the SidePanel is collapsed
- * - `aria-labelledby` will change the name of "Toggle Side Panel" button to "Tasks Panel"
- * - `aria-expanded` won't make sense to screen reader users when the expanded SidePanel content isn't following the control
- * - `aria-controls` is unsupported by screen readers and will not allow users to navigate to the controlled content
- *
- * SOLUTION:
- * - Pass the `controlProps` click handler function down to the external control component.
- * - Add a toggle state to Button components with `aria-pressed` for screen readers,
- * - OR use a similar toggle input like Checkbox or Switch.
- */
 export default () => {
   const model = useSidePanelModel({
     initialTransitionState: 'collapsed',
@@ -48,13 +35,12 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading size="small" cs={stylesOverride.panelHeading}>
+          Task Panel
+        </SidePanel.Heading>
         {model.state.transitionState === 'expanded' && (
-          <Flex cs={stylesOverride.panel}>
-            <Heading size="small" cs={stylesOverride.panelHeading} id={model.state.labelId}>
-              Tasks Panel
-            </Heading>
-          </Flex>
+          <Flex cs={stylesOverride.panel}>Contents</Flex>
         )}
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>

package/dist/mdx/labs-react/side-panel/examples/{HiddenName.tsx → Heading.tsx}

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {AccessibleHide} from '@workday/canvas-kit-react/common';
 import {Text} from '@workday/canvas-kit-react/text';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
@@ -28,8 +27,10 @@ export default () => {
   return (
     <Flex cs={stylesOverride.viewport}>
       <SidePanel model={model}>
-        <SidePanel.ToggleButton />
-        <AccessibleHide id={model.state.labelId}>Hidden Title</AccessibleHide>
+        <SidePanel.ToggleButton aria-label="Collapse View" />
+        <SidePanel.Heading hidden size="small">
+          Tasks Panel
+        </SidePanel.Heading>
       </SidePanel>
       <Flex as="main" cs={stylesOverride.main}>
         <Text as="p" typeLevel="body.large">