From 4692dee24a55a55e163c599e4dacc55bb854af62 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 15:46:53 -0500
Subject: [PATCH 01/26] docs: Create markdown file

---
 .../react/_examples/stories/examples/AriaLiveRegions.stories.mdx  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx

diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx
new file mode 100644
index 0000000000..e69de29bb2

From b025520c95b8662087b5f0eb3595bec5e508b958 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 15:55:52 -0500
Subject: [PATCH 02/26] docs: Adding FilterListWithLiveStatus example

---
 .../common/FilterListWithLiveStatus.tsx       | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
new file mode 100644
index 0000000000..e1e559031b
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -0,0 +1,57 @@
+import React, {useState} from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+const fruits = [
+  'Apples',
+  'Oranges',
+  'Bananas',
+  'Lemons',
+  'Limes',
+  'Strawberries',
+  'Raspberries',
+  'Blackberries',
+];
+
+const liveRegionStyle = {
+  border: `1px solid ${colors.cantaloupe400}`,
+  backgroundColor: colors.cantaloupe100,
+  padding: '0.5rem',
+};
+
+let filteredFruits = fruits;
+
+export default function App() {
+  const [filter, setFilter] = useState('');
+  function handleFilter(e) {
+    filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
+    setFilter(e.target.value);
+  }
+
+  return (
+    <>
+      <Flex gap="1rem">
+        <Heading size="small">Fruits</Heading>
+        <AriaLiveRegion>
+          <BodyText size="small" style={liveRegionStyle}>
+            {`Showing ${filteredFruits.length} of ${fruits.length}`}
+          </BodyText>
+        </AriaLiveRegion>
+      </Flex>
+      <TextInput orientation="vertical">
+        <TextInput.Label>Filter Items:</TextInput.Label>
+        <TextInput.Field value={filter} onChange={handleFilter} />
+      </TextInput>
+      <ul>
+        {filteredFruits.map(i => (
+          <BodyText as="li" size="small" key={i}>
+            {i}
+          </BodyText>
+        ))}
+      </ul>
+    </>
+  );
+}

From ddf39a3c3c3f7335378af84016f18d3a80be4c14 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 16:04:16 -0500
Subject: [PATCH 03/26] docs: Writing storybook markdown file

---
 .../react/_examples/stories/AriaLiveRegions.stories.mdx  | 9 +++++++++
 .../stories/examples/AriaLiveRegions.stories.mdx         | 0
 .../stories/examples/common/FilterListWithLiveStatus.tsx | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 modules/react/_examples/stories/AriaLiveRegions.stories.mdx
 delete mode 100644 modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
new file mode 100644
index 0000000000..1cfa4f5d08
--- /dev/null
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -0,0 +1,9 @@
+import {FilterListWithLiveStatus} from './examples/FilterListWithLiveStatus';
+
+<Meta title="Examples/AriaLiveRegion" />
+
+# ARIA Live Regions
+
+## Filtering lists with a live status
+
+<ExampleCodeBlock code={FilterListWithLiveStatus} />
diff --git a/modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/examples/AriaLiveRegions.stories.mdx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index e1e559031b..47640aeb96 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -24,7 +24,7 @@ const liveRegionStyle = {
 
 let filteredFruits = fruits;
 
-export default function App() {
+export default function FilterListWithLiveStatus() {
   const [filter, setFilter] = useState('');
   function handleFilter(e) {
     filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);

From ded42c06acdfde74c8c37fa74f9440397f8500f2 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 16:11:19 -0500
Subject: [PATCH 04/26] docs: Fixed import file path

---
 modules/react/_examples/stories/AriaLiveRegions.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index 1cfa4f5d08..def052159b 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -1,4 +1,4 @@
-import {FilterListWithLiveStatus} from './examples/FilterListWithLiveStatus';
+import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 
 <Meta title="Examples/AriaLiveRegion" />
 

From 8f814da7844d17b7deeafe7aacd2e5177e4ec237 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 16:23:28 -0500
Subject: [PATCH 05/26] docs: Importing AriaLiveRegion component

---
 modules/react/_examples/stories/AriaLiveRegions.stories.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index def052159b..aee9bf2daf 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -1,6 +1,7 @@
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 
-<Meta title="Examples/AriaLiveRegion" />
+<Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
 # ARIA Live Regions
 

From aca8023611955c3ce53c8380d1791ffbe1b7f63a Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 16:37:09 -0500
Subject: [PATCH 06/26] docs: Fixing syntax

---
 .../stories/examples/common/FilterListWithLiveStatus.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index 47640aeb96..f2f0742670 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -24,7 +24,7 @@ const liveRegionStyle = {
 
 let filteredFruits = fruits;
 
-export default function FilterListWithLiveStatus() {
+export const FilterListWithLiveStatus = () => {
   const [filter, setFilter] = useState('');
   function handleFilter(e) {
     filteredFruits = fruits.filter(i => i.toUpperCase().indexOf(e.target.value.toUpperCase()) >= 0);
@@ -54,4 +54,4 @@ export default function FilterListWithLiveStatus() {
       </ul>
     </>
   );
-}
+};

From 8f40435c26440ab5033c81dffe70b3961adb247b Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 12 Feb 2024 20:40:14 -0500
Subject: [PATCH 07/26] docs: Formatting the list

---
 .../common/FilterListWithLiveStatus.tsx        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index f2f0742670..406a52f5fe 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -4,6 +4,7 @@ import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {colors} from '@workday/canvas-kit-react/tokens';
+import {createStyles} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -16,11 +17,18 @@ const fruits = [
   'Blackberries',
 ];
 
-const liveRegionStyle = {
+const liveRegionStyle = createStyles({
   border: `1px solid ${colors.cantaloupe400}`,
   backgroundColor: colors.cantaloupe100,
   padding: '0.5rem',
-};
+});
+
+const listStyles = {paddingLeft: '0px'};
+
+const listItemStyles = createStyles({
+  listStyle: 'none',
+  paddingLeft: '0px',
+});
 
 let filteredFruits = fruits;
 
@@ -36,7 +44,7 @@ export const FilterListWithLiveStatus = () => {
       <Flex gap="1rem">
         <Heading size="small">Fruits</Heading>
         <AriaLiveRegion>
-          <BodyText size="small" style={liveRegionStyle}>
+          <BodyText size="small" cs={liveRegionStyle}>
             {`Showing ${filteredFruits.length} of ${fruits.length}`}
           </BodyText>
         </AriaLiveRegion>
@@ -45,9 +53,9 @@ export const FilterListWithLiveStatus = () => {
         <TextInput.Label>Filter Items:</TextInput.Label>
         <TextInput.Field value={filter} onChange={handleFilter} />
       </TextInput>
-      <ul>
+      <ul style={listStyles}>
         {filteredFruits.map(i => (
-          <BodyText as="li" size="small" key={i}>
+          <BodyText size="small" as="li" cs={listItemStyles} key={i}>
             {i}
           </BodyText>
         ))}

From 676ce50fee377207c7f985deb52e1761d9f6aeb0 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Fri, 16 Feb 2024 15:01:11 -0500
Subject: [PATCH 08/26] docs: Adding visible live region example

---
 .../stories/AriaLiveRegions.stories.mdx       |  5 +++
 .../examples/common/VisibleLiveRegion.tsx     | 37 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index aee9bf2daf..30633491c1 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -1,10 +1,15 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
+import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
 # ARIA Live Regions
 
+## Visible Live Regions
+
+<ExampleCodeBlock code={VisibleLiveRegion} />
+
 ## Filtering lists with a live status
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
diff --git a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
new file mode 100644
index 0000000000..8eb7f94ae3
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
@@ -0,0 +1,37 @@
+import React, {useState, useRef} from 'react';
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+const liveRegionStyle = {
+  border: `1px solid ${colors.cantaloupe400}`,
+  backgroundColor: colors.cantaloupe100,
+  padding: space.s,
+};
+
+export const VisibleLiveRegion = () => {
+  const [message, setMessage] = useState('This is an ARIA Live Region!');
+  const inputRef = useRef();
+  function handleSendMessage() {
+    setMessage(inputRef.current.value);
+    inputRef.current.value = '';
+  }
+
+  return (
+    <>
+      <AriaLiveRegion style={liveRegionStyle}>
+        <Text>{message}</Text>
+      </AriaLiveRegion>
+      <Flex margin={`${space.s} 0`} gap={space.s} alignItems="flex-end">
+        <TextInput orientation="vertical">
+          <TextInput.Label>Type your message:</TextInput.Label>
+          <TextInput.Field ref={inputRef} />
+        </TextInput>
+        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
+      </Flex>
+    </>
+  );
+};

From f3b69981eb6a69aa6b3ea6c15a31711f84348465 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Fri, 16 Feb 2024 15:26:04 -0500
Subject: [PATCH 09/26] docs: Adding hidden aria live region example

---
 .../stories/AriaLiveRegions.stories.mdx       |  5 ++++
 .../examples/common/HiddenLiveRegion.tsx      | 30 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index 30633491c1..56299e9bd2 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -1,6 +1,7 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
+import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
@@ -10,6 +11,10 @@ import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
 
 <ExampleCodeBlock code={VisibleLiveRegion} />
 
+## Hidden Live Regions
+
+<ExampleCodeBlock code={HiddenLiveRegion} />
+
 ## Filtering lists with a live status
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
diff --git a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
new file mode 100644
index 0000000000..e1152b5fa4
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
@@ -0,0 +1,30 @@
+import React, {useState, useRef} from 'react';
+import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+export const HiddenLiveRegion = () => {
+  const [message, setMessage] = useState('This is an ARIA Live Region!');
+  const inputRef = useRef();
+  function handleSendMessage() {
+    setMessage(inputRef.current.value);
+    inputRef.current.value = '';
+  }
+
+  return (
+    <>
+      <Flex margin={`${space.s} 0`} gap={space.s} alignItems="flex-end">
+        <TextInput orientation="vertical">
+          <TextInput.Label>Type your message:</TextInput.Label>
+          <TextInput.Field ref={inputRef} />
+        </TextInput>
+        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <AccessibleHide>{message}</AccessibleHide>
+      </AriaLiveRegion>
+    </>
+  );
+};

From 3a657c35fd5a45e8c08a20c13484ecb902978f0c Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Sun, 18 Feb 2024 20:40:38 -0500
Subject: [PATCH 10/26] docs: Adding global header example with live badge

---
 .../stories/AriaLiveRegions.stories.mdx       |   5 +
 .../common/GlobalHeaderWithLiveBadge.tsx      | 104 ++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index 56299e9bd2..d1c3bf50c1 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -2,6 +2,7 @@ import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
 import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
+import {GlobalHeaderWithLiveBadge} from './examples/common/GlobalHeaderWithLiveBadge';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
@@ -18,3 +19,7 @@ import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
 ## Filtering lists with a live status
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
+
+## Global header with live badge
+
+<ExampleCodeBlock code={GlobalHeaderWithLiveBadge} />
diff --git a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
new file mode 100644
index 0000000000..087eab331f
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
@@ -0,0 +1,104 @@
+import React, {useState} from 'react';
+import {
+  styled,
+  createComponent,
+  dubLogoBlue,
+  AccessibleHide,
+  AriaLiveRegion,
+  useUniqueId,
+} from '@workday/canvas-kit-react/common';
+import {
+  notificationsIcon,
+  inboxIcon,
+  justifyIcon,
+  assistantIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+
+interface HeaderItemProps extends FlexProps {}
+
+export const GlobalHeaderWithLiveBadge = () => {
+  const badgeID = useUniqueId();
+  const myTasksID = useUniqueId();
+  const [counter, setCounter] = useState(0);
+
+  const handleClick = () => {
+    setCounter(prev => prev + 1);
+  };
+
+  return (
+    <>
+      <GlobalHeader>
+        <GlobalHeader.Item>
+          <Tooltip title="Menu">
+            <TertiaryButton icon={justifyIcon} />
+          </Tooltip>
+          <Tooltip title="Workday Home">
+            <TertiaryButton>
+              <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
+            </TertiaryButton>
+          </Tooltip>
+        </GlobalHeader.Item>
+        <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
+          <SearchForm onSubmit={() => 1} />
+        </GlobalHeader.Item>
+        <GlobalHeader.Item>
+          <Tooltip title="Workday Assistant">
+            <TertiaryButton icon={assistantIcon} />
+          </Tooltip>
+          <Tooltip title="Notifications">
+            <TertiaryButton icon={notificationsIcon} />
+          </Tooltip>
+          <Tooltip title="My Tasks">
+            <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
+              <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
+                <CountBadge count={counter} />
+                <AccessibleHide>New</AccessibleHide>
+              </AriaLiveRegion>
+            </TertiaryButton>
+          </Tooltip>
+          <Tooltip title="Profile">
+            <TertiaryButton icon={userIcon} />
+          </Tooltip>
+        </GlobalHeader.Item>
+      </GlobalHeader>
+      <Flex padding={space.s} as="main">
+        <SecondaryButton onClick={handleClick}>Add an item to My Tasks</SecondaryButton>
+      </Flex>
+    </>
+  );
+};
+
+const GlobalHeaderItem = createComponent('div')({
+  displayName: 'GlobalHeader.Item',
+  Component: ({gap = 's', ...props}: HeaderItemProps, ref) => (
+    <Flex gap={gap} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+  ),
+});
+
+const GlobalHeader = createComponent('header')({
+  displayName: 'GlobalHeader',
+  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  subComponents: {Item: GlobalHeaderItem},
+});
+
+const HeaderWrapper = styled('header')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  ...type.levels.subtext.large,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  backgroundColor: colors.frenchVanilla100,
+  ...depth[1],
+  padding: space.xxs,
+});
+
+const WorkdayLogo = styled('span')({lineHeight: 0});

From 1ae9cef0cabcb9f68aec291df7becb065d3b56a4 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Wed, 21 Feb 2024 16:53:52 -0500
Subject: [PATCH 11/26] docs: Refactoring example

Making smaller components for MyTasksLiveBadge and NotificationsBadge.
---
 .../common/GlobalHeaderWithLiveBadge.tsx      | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
index 087eab331f..96617c195f 100644
--- a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
+++ b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
@@ -32,6 +32,37 @@ export const GlobalHeaderWithLiveBadge = () => {
     setCounter(prev => prev + 1);
   };
 
+  // use tooltip to assign name,
+  // use AriaLiveRegion inside button,
+  // assign name to live region referencing the button,
+  // use BadgeCount inside live region,
+  // use AccessibleHide to create invisible word "new" after badge
+  // use aria-describedby on button, referencing live region container to set description
+  // :( isn't working well in Firefox
+  // :( isn't working at all in Safari
+  const MyTasksLiveBadge = () => (
+    <Tooltip title="My Tasks">
+      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
+        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
+          <CountBadge count={counter} />
+          <AccessibleHide>New</AccessibleHide>
+        </AriaLiveRegion>
+      </TertiaryButton>
+    </Tooltip>
+  );
+
+  const NotificationsLiveBadge = () => (
+    <Tooltip title="Notifications">
+      <TertiaryButton icon={notificationsIcon} />
+    </Tooltip>
+  );
+
+  const MainContent = () => (
+    <Flex padding={space.s} as="main">
+      <SecondaryButton onClick={handleClick}>Add an item to My Tasks</SecondaryButton>
+    </Flex>
+  );
+
   return (
     <>
       <GlobalHeader>
@@ -52,25 +83,14 @@ export const GlobalHeaderWithLiveBadge = () => {
           <Tooltip title="Workday Assistant">
             <TertiaryButton icon={assistantIcon} />
           </Tooltip>
-          <Tooltip title="Notifications">
-            <TertiaryButton icon={notificationsIcon} />
-          </Tooltip>
-          <Tooltip title="My Tasks">
-            <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
-              <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-                <CountBadge count={counter} />
-                <AccessibleHide>New</AccessibleHide>
-              </AriaLiveRegion>
-            </TertiaryButton>
-          </Tooltip>
+          <NotificationsLiveBadge />
+          <MyTasksLiveBadge />
           <Tooltip title="Profile">
             <TertiaryButton icon={userIcon} />
           </Tooltip>
         </GlobalHeader.Item>
       </GlobalHeader>
-      <Flex padding={space.s} as="main">
-        <SecondaryButton onClick={handleClick}>Add an item to My Tasks</SecondaryButton>
-      </Flex>
+      <MainContent />
     </>
   );
 };

From cd95aef8b6f0145a8ab6edaafe13c9a4d77b0d98 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Thu, 22 Feb 2024 17:53:49 -0500
Subject: [PATCH 12/26] docs: Adding live notifications badge

---
 .../common/GlobalHeaderWithLiveBadge.tsx      | 66 ++++++++++++-------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
index 96617c195f..27181693a2 100644
--- a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
+++ b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
@@ -23,45 +23,63 @@ import {CountBadge} from '@workday/canvas-kit-react/badge';
 
 interface HeaderItemProps extends FlexProps {}
 
-export const GlobalHeaderWithLiveBadge = () => {
-  const badgeID = useUniqueId();
-  const myTasksID = useUniqueId();
-  const [counter, setCounter] = useState(0);
-
-  const handleClick = () => {
-    setCounter(prev => prev + 1);
-  };
-
+const MyTasksLiveBadge = ({cnt}) => {
   // use tooltip to assign name,
   // use AriaLiveRegion inside button,
   // assign name to live region referencing the button,
   // use BadgeCount inside live region,
   // use AccessibleHide to create invisible word "new" after badge
   // use aria-describedby on button, referencing live region container to set description
-  // :( isn't working well in Firefox
   // :( isn't working at all in Safari
-  const MyTasksLiveBadge = () => (
+  // :( isn't working well in Firefox
+  const badgeID = useUniqueId();
+  const myTasksID = useUniqueId();
+
+  return (
     <Tooltip title="My Tasks">
       <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
         <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-          <CountBadge count={counter} />
+          <CountBadge count={cnt} />
           <AccessibleHide>New</AccessibleHide>
         </AriaLiveRegion>
       </TertiaryButton>
     </Tooltip>
   );
+};
 
-  const NotificationsLiveBadge = () => (
-    <Tooltip title="Notifications">
-      <TertiaryButton icon={notificationsIcon} />
+// use AriaLiveRegion around the button,
+// use Tooltip to assign the name of the button,
+// make sure Tooltip title string includes count value
+// Chrome + VO => Announces name "notifications X new" and innerText 'X'
+// Safari + VO => Works nicely :) announces button name
+const NotificationsLiveBadge = ({cnt}) => (
+  <AriaLiveRegion>
+    <Tooltip title={`Notifications ${cnt} new`}>
+      <TertiaryButton icon={notificationsIcon}>
+        <CountBadge count={cnt} />
+      </TertiaryButton>
     </Tooltip>
-  );
+  </AriaLiveRegion>
+);
 
-  const MainContent = () => (
-    <Flex padding={space.s} as="main">
-      <SecondaryButton onClick={handleClick}>Add an item to My Tasks</SecondaryButton>
-    </Flex>
-  );
+const MainContent = ({onAddTask, onAddNotification}) => (
+  <Flex padding={space.s} gap={space.s} as="main">
+    <SecondaryButton onClick={onAddTask}>Add an item to My Tasks</SecondaryButton>
+    <SecondaryButton onClick={onAddNotification}>Add a Notification</SecondaryButton>
+  </Flex>
+);
+
+export const GlobalHeaderWithLiveBadge = () => {
+  const [counter, setCounter] = useState(0);
+  const [notifications, setNotifications] = useState(0);
+
+  const handleClick = () => {
+    setCounter(prev => prev + 1);
+  };
+
+  const handleAddNotification = () => {
+    setNotifications(prev => prev + 1);
+  };
 
   return (
     <>
@@ -83,14 +101,14 @@ export const GlobalHeaderWithLiveBadge = () => {
           <Tooltip title="Workday Assistant">
             <TertiaryButton icon={assistantIcon} />
           </Tooltip>
-          <NotificationsLiveBadge />
-          <MyTasksLiveBadge />
+          <NotificationsLiveBadge cnt={notifications} />
+          <MyTasksLiveBadge cnt={counter} />
           <Tooltip title="Profile">
             <TertiaryButton icon={userIcon} />
           </Tooltip>
         </GlobalHeader.Item>
       </GlobalHeader>
-      <MainContent />
+      <MainContent onAddTask={handleClick} onAddNotification={handleAddNotification} />
     </>
   );
 };

From 0d37b690b111582974eabb12ae4de9c48a8b55ab Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Thu, 22 Feb 2024 20:02:14 -0500
Subject: [PATCH 13/26] docs: Refactoring away from GlobalHeader example

Focus more on the live badges of the icon buttons. GlobalHeader is just a distraction.
---
 .../stories/AriaLiveRegions.stories.mdx       |   4 +-
 .../common/GlobalHeaderWithLiveBadge.tsx      | 142 ------------------
 .../common/IconButtonsWithLiveBadges.tsx      |  84 +++++++++++
 3 files changed, 86 insertions(+), 144 deletions(-)
 delete mode 100644 modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
 create mode 100644 modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index d1c3bf50c1..044d5fe40a 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -2,7 +2,7 @@ import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
 import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
-import {GlobalHeaderWithLiveBadge} from './examples/common/GlobalHeaderWithLiveBadge';
+import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBadges';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
 
@@ -22,4 +22,4 @@ import {GlobalHeaderWithLiveBadge} from './examples/common/GlobalHeaderWithLiveB
 
 ## Global header with live badge
 
-<ExampleCodeBlock code={GlobalHeaderWithLiveBadge} />
+<ExampleCodeBlock code={IconButtonsWithLiveBadges} />
diff --git a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx b/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
deleted file mode 100644
index 27181693a2..0000000000
--- a/modules/react/_examples/stories/examples/common/GlobalHeaderWithLiveBadge.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, {useState} from 'react';
-import {
-  styled,
-  createComponent,
-  dubLogoBlue,
-  AccessibleHide,
-  AriaLiveRegion,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
-import {
-  notificationsIcon,
-  inboxIcon,
-  justifyIcon,
-  assistantIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
-import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
-import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {CountBadge} from '@workday/canvas-kit-react/badge';
-
-interface HeaderItemProps extends FlexProps {}
-
-const MyTasksLiveBadge = ({cnt}) => {
-  // use tooltip to assign name,
-  // use AriaLiveRegion inside button,
-  // assign name to live region referencing the button,
-  // use BadgeCount inside live region,
-  // use AccessibleHide to create invisible word "new" after badge
-  // use aria-describedby on button, referencing live region container to set description
-  // :( isn't working at all in Safari
-  // :( isn't working well in Firefox
-  const badgeID = useUniqueId();
-  const myTasksID = useUniqueId();
-
-  return (
-    <Tooltip title="My Tasks">
-      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
-        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
-          <CountBadge count={cnt} />
-          <AccessibleHide>New</AccessibleHide>
-        </AriaLiveRegion>
-      </TertiaryButton>
-    </Tooltip>
-  );
-};
-
-// use AriaLiveRegion around the button,
-// use Tooltip to assign the name of the button,
-// make sure Tooltip title string includes count value
-// Chrome + VO => Announces name "notifications X new" and innerText 'X'
-// Safari + VO => Works nicely :) announces button name
-const NotificationsLiveBadge = ({cnt}) => (
-  <AriaLiveRegion>
-    <Tooltip title={`Notifications ${cnt} new`}>
-      <TertiaryButton icon={notificationsIcon}>
-        <CountBadge count={cnt} />
-      </TertiaryButton>
-    </Tooltip>
-  </AriaLiveRegion>
-);
-
-const MainContent = ({onAddTask, onAddNotification}) => (
-  <Flex padding={space.s} gap={space.s} as="main">
-    <SecondaryButton onClick={onAddTask}>Add an item to My Tasks</SecondaryButton>
-    <SecondaryButton onClick={onAddNotification}>Add a Notification</SecondaryButton>
-  </Flex>
-);
-
-export const GlobalHeaderWithLiveBadge = () => {
-  const [counter, setCounter] = useState(0);
-  const [notifications, setNotifications] = useState(0);
-
-  const handleClick = () => {
-    setCounter(prev => prev + 1);
-  };
-
-  const handleAddNotification = () => {
-    setNotifications(prev => prev + 1);
-  };
-
-  return (
-    <>
-      <GlobalHeader>
-        <GlobalHeader.Item>
-          <Tooltip title="Menu">
-            <TertiaryButton icon={justifyIcon} />
-          </Tooltip>
-          <Tooltip title="Workday Home">
-            <TertiaryButton>
-              <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
-            </TertiaryButton>
-          </Tooltip>
-        </GlobalHeader.Item>
-        <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
-          <SearchForm onSubmit={() => 1} />
-        </GlobalHeader.Item>
-        <GlobalHeader.Item>
-          <Tooltip title="Workday Assistant">
-            <TertiaryButton icon={assistantIcon} />
-          </Tooltip>
-          <NotificationsLiveBadge cnt={notifications} />
-          <MyTasksLiveBadge cnt={counter} />
-          <Tooltip title="Profile">
-            <TertiaryButton icon={userIcon} />
-          </Tooltip>
-        </GlobalHeader.Item>
-      </GlobalHeader>
-      <MainContent onAddTask={handleClick} onAddNotification={handleAddNotification} />
-    </>
-  );
-};
-
-const GlobalHeaderItem = createComponent('div')({
-  displayName: 'GlobalHeader.Item',
-  Component: ({gap = 's', ...props}: HeaderItemProps, ref) => (
-    <Flex gap={gap} alignItems="center" marginX={space.xs} ref={ref} {...props} />
-  ),
-});
-
-const GlobalHeader = createComponent('header')({
-  displayName: 'GlobalHeader',
-  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
-  subComponents: {Item: GlobalHeaderItem},
-});
-
-const HeaderWrapper = styled('header')({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  boxSizing: 'border-box',
-  ...type.levels.subtext.large,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  backgroundColor: colors.frenchVanilla100,
-  ...depth[1],
-  padding: space.xxs,
-});
-
-const WorkdayLogo = styled('span')({lineHeight: 0});
diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
new file mode 100644
index 0000000000..3093acbd4b
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
@@ -0,0 +1,84 @@
+import React, {useState} from 'react';
+import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
+import {
+  notificationsIcon,
+  inboxIcon,
+  assistantIcon,
+  userIcon,
+} from '@workday/canvas-system-icons-web';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {CountBadge} from '@workday/canvas-kit-react/badge';
+
+const MyTasksLiveBadge = ({cnt}) => {
+  // use tooltip to assign name,
+  // use AriaLiveRegion inside button,
+  // assign name to live region referencing the button,
+  // use BadgeCount inside live region,
+  // use AccessibleHide to create invisible word "new" after badge
+  // use aria-describedby on button, referencing live region container to set description
+  // :( isn't working at all in Safari
+  // :( isn't working well in Firefox
+  const badgeID = useUniqueId();
+  const myTasksID = useUniqueId();
+
+  return (
+    <Tooltip title="My Tasks">
+      <TertiaryButton icon={inboxIcon} id={myTasksID} aria-describedby={badgeID}>
+        <AriaLiveRegion id={badgeID} aria-labelledby={myTasksID}>
+          <CountBadge count={cnt} />
+          <AccessibleHide>New</AccessibleHide>
+        </AriaLiveRegion>
+      </TertiaryButton>
+    </Tooltip>
+  );
+};
+
+// use AriaLiveRegion around the button,
+// use Tooltip to assign the name of the button,
+// make sure Tooltip title string includes count value
+// Chrome + VO => Announces name "notifications X new" and innerText 'X'
+// Safari + VO => Works nicely :) announces button name
+const NotificationsLiveBadge = ({cnt}) => (
+  <AriaLiveRegion>
+    <Tooltip title={`Notifications ${cnt} new`}>
+      <TertiaryButton icon={notificationsIcon}>
+        <CountBadge count={cnt} />
+      </TertiaryButton>
+    </Tooltip>
+  </AriaLiveRegion>
+);
+
+export const IconButtonsWithLiveBadges = () => {
+  const [counter, setCounter] = useState(0);
+  const [notifications, setNotifications] = useState(0);
+
+  const handleAddTask = () => {
+    setCounter(prev => prev + 1);
+  };
+
+  const handleAddNotification = () => {
+    setNotifications(prev => prev + 1);
+  };
+
+  return (
+    <>
+      <Flex as="header" gap={space.s}>
+        <Tooltip title="Workday Assistant">
+          <TertiaryButton icon={assistantIcon} />
+        </Tooltip>
+        <NotificationsLiveBadge cnt={notifications} />
+        <MyTasksLiveBadge cnt={counter} />
+        <Tooltip title="Profile">
+          <TertiaryButton icon={userIcon} />
+        </Tooltip>
+      </Flex>
+      <Flex padding={space.s} gap={space.s} as="main">
+        <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
+        <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
+      </Flex>
+    </>
+  );
+};

From 636c7681d5cd1f5595662331b5582c0b58c154bd Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Sat, 24 Feb 2024 18:54:17 -0500
Subject: [PATCH 14/26] docs: Commenting support levels

On the 2 different versions of live badges.
---
 .../examples/common/IconButtonsWithLiveBadges.tsx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
index 3093acbd4b..648a7633fc 100644
--- a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
+++ b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
@@ -19,8 +19,10 @@ const MyTasksLiveBadge = ({cnt}) => {
   // use BadgeCount inside live region,
   // use AccessibleHide to create invisible word "new" after badge
   // use aria-describedby on button, referencing live region container to set description
-  // :( isn't working at all in Safari
-  // :( isn't working well in Firefox
+  // Safari + VO => not working at all
+  // JAWS 2024 + Chrome / Edge => works as expected :)
+  // NVDA + Chrome / Edge => works as expected :)
+  // Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
   const badgeID = useUniqueId();
   const myTasksID = useUniqueId();
 
@@ -40,7 +42,10 @@ const MyTasksLiveBadge = ({cnt}) => {
 // use Tooltip to assign the name of the button,
 // make sure Tooltip title string includes count value
 // Chrome + VO => Announces name "notifications X new" and innerText 'X'
-// Safari + VO => Works nicely :) announces button name
+// Safari + VO => Works as expected :)
+// JAWS 2024 => Announces full button name twice (previous state, then new state)
+// JAWS 2024 + Firefox => Works as expected :)
+// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
 const NotificationsLiveBadge = ({cnt}) => (
   <AriaLiveRegion>
     <Tooltip title={`Notifications ${cnt} new`}>
@@ -65,7 +70,7 @@ export const IconButtonsWithLiveBadges = () => {
 
   return (
     <>
-      <Flex as="header" gap={space.s}>
+      <Flex padding={space.s} gap={space.s} as="header">
         <Tooltip title="Workday Assistant">
           <TertiaryButton icon={assistantIcon} />
         </Tooltip>

From b9e62a05534657a6f3eb4a237eb24cfe7cdb6578 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 26 Feb 2024 08:05:21 -0500
Subject: [PATCH 15/26] docs: Refactoring Assistant icon button

---
 .../common/IconButtonsWithLiveBadges.tsx      | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
index 648a7633fc..c2dbc66983 100644
--- a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
+++ b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
@@ -56,24 +56,40 @@ const NotificationsLiveBadge = ({cnt}) => (
   </AriaLiveRegion>
 );
 
+const AssistantLiveBadge = ({cnt}) => {
+  // use AriaLiveRegion around the button
+  // use muted type Tooltip (avoid using aria-label to name button)
+  // use AccessibleHide inside of button to compose name
+  // Chrome + VO => announces twice
+  // Safari + VO => works as expected :)
+  const lbl = 'Workday Assistant';
+
+  return (
+    <AriaLiveRegion>
+      <Tooltip title={lbl} type="muted">
+        <TertiaryButton icon={assistantIcon}>
+          <AccessibleHide>{lbl}</AccessibleHide>
+          <CountBadge count={cnt} />
+          <AccessibleHide>New</AccessibleHide>
+        </TertiaryButton>
+      </Tooltip>
+    </AriaLiveRegion>
+  );
+};
+
 export const IconButtonsWithLiveBadges = () => {
   const [counter, setCounter] = useState(0);
   const [notifications, setNotifications] = useState(0);
+  const [assistant, setAssistant] = useState(0);
 
-  const handleAddTask = () => {
-    setCounter(prev => prev + 1);
-  };
-
-  const handleAddNotification = () => {
-    setNotifications(prev => prev + 1);
-  };
+  const handleAddTask = () => setCounter(prev => prev + 1);
+  const handleAddNotification = () => setNotifications(prev => prev + 1);
+  const handleAssistant = () => setAssistant(prev => prev + 1);
 
   return (
     <>
       <Flex padding={space.s} gap={space.s} as="header">
-        <Tooltip title="Workday Assistant">
-          <TertiaryButton icon={assistantIcon} />
-        </Tooltip>
+        <AssistantLiveBadge cnt={assistant} />
         <NotificationsLiveBadge cnt={notifications} />
         <MyTasksLiveBadge cnt={counter} />
         <Tooltip title="Profile">
@@ -81,6 +97,7 @@ export const IconButtonsWithLiveBadges = () => {
         </Tooltip>
       </Flex>
       <Flex padding={space.s} gap={space.s} as="main">
+        <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>
         <SecondaryButton onClick={handleAddNotification}>Add a Notification</SecondaryButton>
         <SecondaryButton onClick={handleAddTask}>Add an item to My Tasks</SecondaryButton>
       </Flex>

From d2e70afd3e62cc2be3db00483cbfb63982f81fe2 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Sat, 2 Mar 2024 12:55:18 -0500
Subject: [PATCH 16/26] docs: Adding text input with live error

---
 .../stories/AriaLiveRegions.stories.mdx       |  5 ++++
 .../common/TextInputWithLiveError.tsx         | 25 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index 044d5fe40a..e4ae2d2cf0 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -2,6 +2,7 @@ import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {FilterListWithLiveStatus} from './examples/common/FilterListWithLiveStatus';
 import {VisibleLiveRegion} from './examples/common/VisibleLiveRegion';
 import {HiddenLiveRegion} from './examples/common/HiddenLiveRegion';
+import {TextInputWithLiveError} from './examples/common/TextInputWithLiveError';
 import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBadges';
 
 <Meta title="Examples/AriaLiveRegion" component={AriaLiveRegion} />
@@ -20,6 +21,10 @@ import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBa
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
+## Text input with live inline error
+
+<ExampleCodeBlock code={TextInputWithLiveError} />
+
 ## Global header with live badge
 
 <ExampleCodeBlock code={IconButtonsWithLiveBadges} />
diff --git a/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx b/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx
new file mode 100644
index 0000000000..fb50e44385
--- /dev/null
+++ b/modules/react/_examples/stories/examples/common/TextInputWithLiveError.tsx
@@ -0,0 +1,25 @@
+import React, {useState, useRef} from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export const TextInputWithLiveError = () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = useState(false);
+  const inputRef = useRef();
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
+        <TextInput.Label>First Name:</TextInput.Label>
+        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
+        <TextInput.Hint height={'16px'}>
+          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
+        </TextInput.Hint>
+      </TextInput>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};

From 0fad095af57e46098205e6da75c7d2e18dd5f61a Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Sat, 2 Mar 2024 14:12:44 -0500
Subject: [PATCH 17/26] docs: Drafting content in markdown file

---
 .../stories/AriaLiveRegions.stories.mdx       | 45 ++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index e4ae2d2cf0..e36a7be322 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -9,22 +9,65 @@ import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBa
 
 # ARIA Live Regions
 
+These examples are provided to demonstrate a variety of different use cases for the `AriaLiveRegion`
+component. For the full experience, get started by first turning on your favorite screen reading
+software. On Windows, we recommend the open source NVDA (Non-Visual Desktop Access) software, or
+JAWS (Job Access With Speech) if you have purchased a license. MacOS and iOS include VoiceOver,
+which can be turned on in your settings.
+
+Live regions work by designating specific DOM nodes for screen readers to monitor for any content
+updates inside the node. When an update occurs, screen readers will announce the update to users in
+real time, based on a few rules:
+
+1. `polite` will “politely” wait for users to finish what they are doing before announcing an update
+2. `assertive` will interrupt what users are doing (or reading) by immediately announcing an update
+
+### CAUTION: Don't get carried away
+
+Key things to understand about live regions:
+
+1. A live region update will only be announced once. Users are unable to repeat them or re-examine
+   them if the announcement was not understood.
+2. Users may be able to pause a live region announcement, but they cannot prevent a live region
+   announcement from occurring. Sending frequent, repetitive, or simply too much information to a
+   live region can be very disruptive to users.
+3. Users cannot act on, or navigate to, a live region. Live regions must only contain plain text.
+   (No images, links, buttons, or other input.)
+4. Support for live regions is limited across platforms, browsers, and screen reader software. Real
+   time announcements may not be perfectly reliable.
+
 ## Visible Live Regions
 
+Live regions can be applied to dynamic text on the UI. When the dynamic text is updated, screen
+readers can describe the text update in live time as it occurs. In the example below, type text into
+the input field and activate the "Send Message" button. Listen and observe the screen reader
+automatically announce the text update.
+
 <ExampleCodeBlock code={VisibleLiveRegion} />
 
 ## Hidden Live Regions
 
+Live regions don't need to be visible UI text, they can be used to assist the non-visual listening
+experience when moving the keyboard focus to a new element on screen isn't feasible.
+
 <ExampleCodeBlock code={HiddenLiveRegion} />
 
 ## Filtering lists with a live status
 
+In this example, a live region is applied to a short UI text describing the number of items shown in
+the list. As you type characters into the input, listen for the screen reader to automatically
+describe how many items in the list or shown.
+
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
 ## Text input with live inline error
 
+In this example, a live region is applied to the inline error message that will appear below the
+text input. Listen for the screen reader to automatically describe the error message as you leave
+the input field blank.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />
 
-## Global header with live badge
+## Icon buttons with live badge
 
 <ExampleCodeBlock code={IconButtonsWithLiveBadges} />

From ba49ceb1e3bfe157e86bcd8a57b260f398265abb Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Mon, 4 Mar 2024 10:01:17 -0500
Subject: [PATCH 18/26] docs: Adding hyperlinks to screen readers

Also removed the icon buttons with live badges from the storybook.
---
 .../_examples/stories/AriaLiveRegions.stories.mdx     | 11 ++++-------
 .../examples/common/IconButtonsWithLiveBadges.tsx     | 10 +---------
 2 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index e36a7be322..f24a5eec77 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -11,9 +11,10 @@ import {IconButtonsWithLiveBadges} from './examples/common/IconButtonsWithLiveBa
 
 These examples are provided to demonstrate a variety of different use cases for the `AriaLiveRegion`
 component. For the full experience, get started by first turning on your favorite screen reading
-software. On Windows, we recommend the open source NVDA (Non-Visual Desktop Access) software, or
-JAWS (Job Access With Speech) if you have purchased a license. MacOS and iOS include VoiceOver,
-which can be turned on in your settings.
+software. On Windows, we recommend the open source
+[NVDA (Non-Visual Desktop Access)](https://www.nvaccess.org/download/) software, or
+[JAWS (Job Access With Speech)](https://support.freedomscientific.com/Downloads/JAWS) if you have
+purchased a license. MacOS and iOS include VoiceOver, which can be turned on in your settings.
 
 Live regions work by designating specific DOM nodes for screen readers to monitor for any content
 updates inside the node. When an update occurs, screen readers will announce the update to users in
@@ -67,7 +68,3 @@ text input. Listen for the screen reader to automatically describe the error mes
 the input field blank.
 
 <ExampleCodeBlock code={TextInputWithLiveError} />
-
-## Icon buttons with live badge
-
-<ExampleCodeBlock code={IconButtonsWithLiveBadges} />
diff --git a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
index c2dbc66983..4f326d7660 100644
--- a/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
+++ b/modules/react/_examples/stories/examples/common/IconButtonsWithLiveBadges.tsx
@@ -1,11 +1,6 @@
 import React, {useState} from 'react';
 import {AccessibleHide, AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
-import {
-  notificationsIcon,
-  inboxIcon,
-  assistantIcon,
-  userIcon,
-} from '@workday/canvas-system-icons-web';
+import {notificationsIcon, inboxIcon, assistantIcon} from '@workday/canvas-system-icons-web';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Flex} from '@workday/canvas-kit-react/layout';
@@ -92,9 +87,6 @@ export const IconButtonsWithLiveBadges = () => {
         <AssistantLiveBadge cnt={assistant} />
         <NotificationsLiveBadge cnt={notifications} />
         <MyTasksLiveBadge cnt={counter} />
-        <Tooltip title="Profile">
-          <TertiaryButton icon={userIcon} />
-        </Tooltip>
       </Flex>
       <Flex padding={space.s} gap={space.s} as="main">
         <SecondaryButton onClick={handleAssistant}>Add a Message</SecondaryButton>

From 20d12f9e1ee6d9b4556ef015d66fde41d3ab3ffe Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Thu, 4 Apr 2024 10:31:58 -0400
Subject: [PATCH 19/26] docs: Adding note under the live inline error example

---
 modules/react/_examples/stories/AriaLiveRegions.stories.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
index f24a5eec77..446b9881f4 100644
--- a/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
+++ b/modules/react/_examples/stories/AriaLiveRegions.stories.mdx
@@ -67,4 +67,10 @@ In this example, a live region is applied to the inline error message that will
 text input. Listen for the screen reader to automatically describe the error message as you leave
 the input field blank.
 
+**Note:** Use this example with discretion. Using live regions for automatically announcing form
+errors to screen reader users can be a nice experience for simple forms with a very limited number
+of error conditions. As forms increase in complexity, live regions on each error message can become
+increasingly distracting and disruptive to the experience, especially if users are trying to first
+understand the information that is required of them to complete the task.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />

From bfdb49d0db010d395008ae3525a484fdf7995f55 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+williamjstanton@users.noreply.github.com>
Date: Wed, 10 Apr 2024 06:30:24 -0700
Subject: [PATCH 20/26] docs: Accepting suggestions for tokens

Co-authored-by: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>
---
 .../stories/examples/common/FilterListWithLiveStatus.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index 406a52f5fe..8542a9a1d3 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -18,7 +18,7 @@ const fruits = [
 ];
 
 const liveRegionStyle = createStyles({
-  border: `1px solid ${colors.cantaloupe400}`,
+  border: `{px2rem(1)} solid ${colors.cantaloupe400}`,
   backgroundColor: colors.cantaloupe100,
   padding: '0.5rem',
 });

From 69c989c3bc118c1b9b4bf5871b19ed7b3f26a314 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+williamjstanton@users.noreply.github.com>
Date: Wed, 10 Apr 2024 06:32:16 -0700
Subject: [PATCH 21/26] docs: Accepting suggestion tokens in List example

Co-authored-by: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>
---
 .../stories/examples/common/FilterListWithLiveStatus.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index 8542a9a1d3..ff604882f5 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -20,7 +20,7 @@ const fruits = [
 const liveRegionStyle = createStyles({
   border: `{px2rem(1)} solid ${colors.cantaloupe400}`,
   backgroundColor: colors.cantaloupe100,
-  padding: '0.5rem',
+  padding: {system.space.x2},
 });
 
 const listStyles = {paddingLeft: '0px'};

From ee355ec705d218d333a5184607a56be00132ae61 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+williamjstanton@users.noreply.github.com>
Date: Wed, 10 Apr 2024 06:33:57 -0700
Subject: [PATCH 22/26] docs: Accepting suggestion for space token in List
 example

Co-authored-by: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>
---
 .../stories/examples/common/FilterListWithLiveStatus.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index ff604882f5..62a8791c13 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -27,7 +27,7 @@ const listStyles = {paddingLeft: '0px'};
 
 const listItemStyles = createStyles({
   listStyle: 'none',
-  paddingLeft: '0px',
+  paddingLeft: {system.space.zero},
 });
 
 let filteredFruits = fruits;

From 7e85b33097f178c3b01769a5e486401920930d85 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Wed, 10 Apr 2024 16:20:56 -0400
Subject: [PATCH 23/26] docs: Adding imports and correcting syntax in filter
 list

---
 .../examples/common/FilterListWithLiveStatus.tsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
index 62a8791c13..2568bfdf48 100644
--- a/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
+++ b/modules/react/_examples/stories/examples/common/FilterListWithLiveStatus.tsx
@@ -3,8 +3,8 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createStyles} from '@workday/canvas-kit-styling';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -18,16 +18,16 @@ const fruits = [
 ];
 
 const liveRegionStyle = createStyles({
-  border: `{px2rem(1)} solid ${colors.cantaloupe400}`,
-  backgroundColor: colors.cantaloupe100,
-  padding: {system.space.x2},
+  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
+  backgroundColor: base.cantaloupe100,
+  padding: system.space.x2,
 });
 
 const listStyles = {paddingLeft: '0px'};
 
 const listItemStyles = createStyles({
   listStyle: 'none',
-  paddingLeft: {system.space.zero},
+  paddingLeft: system.space.zero,
 });
 
 let filteredFruits = fruits;

From 088ced49227640682170e4938f53b7da096fe97e Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Wed, 10 Apr 2024 16:30:05 -0400
Subject: [PATCH 24/26] docs: Using new token package in hidden live region
 example

---
 .../_examples/stories/examples/common/HiddenLiveRegion.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
index e1152b5fa4..a1595b5174 100644
--- a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
+++ b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
@@ -3,7 +3,7 @@ import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {system, base} from '@workday/canvas-tokens-web';
 
 export const HiddenLiveRegion = () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
@@ -15,7 +15,7 @@ export const HiddenLiveRegion = () => {
 
   return (
     <>
-      <Flex margin={`${space.s} 0`} gap={space.s} alignItems="flex-end">
+      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
         <TextInput orientation="vertical">
           <TextInput.Label>Type your message:</TextInput.Label>
           <TextInput.Field ref={inputRef} />

From 91020c6336855aaea93e50dd8a38ed19c35929bd Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Wed, 10 Apr 2024 18:32:57 -0400
Subject: [PATCH 25/26] docs: Adding new token package to visible live region
 example

---
 .../examples/common/HiddenLiveRegion.tsx      |  2 +-
 .../examples/common/VisibleLiveRegion.tsx     | 19 ++++++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
index a1595b5174..355a621546 100644
--- a/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
+++ b/modules/react/_examples/stories/examples/common/HiddenLiveRegion.tsx
@@ -3,7 +3,7 @@ import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
-import {system, base} from '@workday/canvas-tokens-web';
+import {system} from '@workday/canvas-tokens-web';
 
 export const HiddenLiveRegion = () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
diff --git a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
index 8eb7f94ae3..09f0e643b7 100644
--- a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
+++ b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
@@ -4,13 +4,14 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Text} from '@workday/canvas-kit-react/text';
-import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
 
-const liveRegionStyle = {
-  border: `1px solid ${colors.cantaloupe400}`,
-  backgroundColor: colors.cantaloupe100,
-  padding: space.s,
-};
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${base.cantaloupe400}`,
+  backgroundColor: base.cantaloupe100,
+  padding: system.space.x4,
+});
 
 export const VisibleLiveRegion = () => {
   const [message, setMessage] = useState('This is an ARIA Live Region!');
@@ -22,10 +23,10 @@ export const VisibleLiveRegion = () => {
 
   return (
     <>
-      <AriaLiveRegion style={liveRegionStyle}>
-        <Text>{message}</Text>
+      <AriaLiveRegion>
+        <Text cs={liveRegionStyle}>{message}</Text>
       </AriaLiveRegion>
-      <Flex margin={`${space.s} 0`} gap={space.s} alignItems="flex-end">
+      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
         <TextInput orientation="vertical">
           <TextInput.Label>Type your message:</TextInput.Label>
           <TextInput.Field ref={inputRef} />

From ab8af16a0ea44ffd378a655e86fa6fccf18cf8a7 Mon Sep 17 00:00:00 2001
From: William Stanton <william.stanton@workday.com>
Date: Wed, 10 Apr 2024 18:51:28 -0400
Subject: [PATCH 26/26] docs: Fixing styles in visible live region example

---
 .../_examples/stories/examples/common/VisibleLiveRegion.tsx     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
index 09f0e643b7..0ec7bee9f5 100644
--- a/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
+++ b/modules/react/_examples/stories/examples/common/VisibleLiveRegion.tsx
@@ -11,6 +11,8 @@ const liveRegionStyle = createStyles({
   border: `${px2rem(1)} solid ${base.cantaloupe400}`,
   backgroundColor: base.cantaloupe100,
   padding: system.space.x4,
+  display: 'block',
+  margin: system.space.x4 + ' 0',
 });
 
 export const VisibleLiveRegion = () => {