From 1b69153efc5cbb8bb35b69cf2112647b33d58db0 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 03:36:44 -0300
Subject: [PATCH 1/9] feat: create vertical example

---
 .../src/stories/Toolbar/ToolbarVertical.stories.tsx  | 12 ++++++++++++
 .../src/stories/Toolbar/index.stories.tsx            |  1 +
 2 files changed, 13 insertions(+)
 create mode 100644 packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
new file mode 100644
index 00000000000000..101631b357e4e2
--- /dev/null
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
+import type { ToolbarProps } from '@fluentui/react-toolbar';
+
+export const Vertical = (props: Partial<ToolbarProps>) => (
+  <Toolbar vertical {...props}>
+    <ToolbarButton aria-label="Text option - Bold" icon={<TextBold24Regular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+  </Toolbar>
+);
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
index 396038d8975651..223870fdb66771 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/index.stories.tsx
@@ -12,6 +12,7 @@ export { Subtle } from './ToolbarSubtle.stories';
 export { ControlledToggleButton } from './ToolbarControlledToggleButton.stories';
 export { Radio } from './ToolbarRadio.stories';
 export { ControlledRadio } from './ToolbarRadioControlled.stories';
+export { Vertical } from './ToolbarVertical.stories';
 
 export default {
   title: 'Preview Components/Toolbar',

From 5be5c1d95a3d1b7feb7192e241df482f07ea3b06 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 03:42:19 -0300
Subject: [PATCH 2/9] chore: add navigation arrows for vertical scenario

---
 .../react-toolbar/src/components/Toolbar/useToolbar.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
index d688508a5b8592..e85b58e24dfb25 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -18,7 +18,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
 
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
-    axis: 'horizontal',
+    axis: vertical ? 'vertical' : 'horizontal',
   });
 
   const initialState: UninitializedToolbarState = {

From 28ca6aa40f732fc9398dfbb60970375f0179e294 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 03:49:44 -0300
Subject: [PATCH 3/9] chore: add labels for all toolbar stories

---
 .../ToolbarControlledToggleButton.stories.tsx | 14 +++++++++++--
 .../Toolbar/ToolbarDefault.stories.tsx        | 15 ++++++++-----
 .../stories/Toolbar/ToolbarRadio.stories.tsx  | 16 +++++++++++---
 .../ToolbarRadioControlled.stories.tsx        | 21 ++++++++++++++++---
 .../stories/Toolbar/ToolbarSmall.stories.tsx  | 13 ++++++++----
 .../stories/Toolbar/ToolbarSubtle.stories.tsx |  6 +++---
 .../Toolbar/ToolbarWithTooltip.stories.tsx    |  4 ++--
 7 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
index 32a8760dfdf383..07b011c4703265 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -14,8 +14,18 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarToggleButton icon={<TextBold24Regular />} name="textOptions" value="bold" />
-      <ToolbarToggleButton icon={<TextItalic24Regular />} name="textOptions" value="italic" />
+      <ToolbarToggleButton
+        aria-label="Text option - Bold"
+        icon={<TextBold24Regular />}
+        name="textOptions"
+        value="bold"
+      />
+      <ToolbarToggleButton
+        aria-label="Text option - Italic"
+        icon={<TextItalic24Regular />}
+        name="textOptions"
+        value="italic"
+      />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
index 18f853b8b17079..ed66c91780a718 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
@@ -12,14 +12,19 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton icon={<TextItalic24Regular />} />
-    <ToolbarButton icon={<TextUnderline24Regular />} />
+    <ToolbarButton aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
+    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
+    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
     <ToolbarDivider />
-    <ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze24Regular />} />
+    <ToolbarToggleButton
+      aria-label="Snooze Alert Option"
+      name="toggle"
+      value="toggle"
+      icon={<AlertSnooze24Regular />}
+    />
     <Menu>
       <MenuTrigger>
-        <ToolbarButton icon={<MoreHorizontal24Filled />} />
+        <ToolbarButton aria-label="More menu" icon={<MoreHorizontal24Filled />} />
       </MenuTrigger>
 
       <MenuPopover>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index bed44cfc6e0740..e0130803210587 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -5,8 +5,18 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Radio = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarRadioButton name="text-style" value="italic" icon={<TextItalic24Regular />} />
-    <ToolbarRadioButton name="text-style" value="bold" icon={<TextBold24Regular />} />
-    <ToolbarRadioButton name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+    <ToolbarRadioButton
+      aria-label="Radio Option - Italic"
+      name="text-style"
+      value="italic"
+      icon={<TextItalic24Regular />}
+    />
+    <ToolbarRadioButton aria-label="Radio Option - Bold" name="text-style" value="bold" icon={<TextBold24Regular />} />
+    <ToolbarRadioButton
+      aria-label="Radio Option - Underline"
+      name="text-style"
+      value="underline"
+      icon={<TextUnderline24Regular />}
+    />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index 587f4d8f697bd8..0bbbd2dea04bd7 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -16,9 +16,24 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarRadioButton name="text-style" value="italic" icon={<TextItalic24Regular />} />
-      <ToolbarRadioButton name="text-style" value="bold" icon={<TextBold24Regular />} />
-      <ToolbarRadioButton name="text-style" value="underline" icon={<TextUnderline24Regular />} />
+      <ToolbarRadioButton
+        aria-label="Radio Option - Italic"
+        name="text-style"
+        value="italic"
+        icon={<TextItalic24Regular />}
+      />
+      <ToolbarRadioButton
+        aria-label="Radio Option - Bold"
+        name="text-style"
+        value="bold"
+        icon={<TextBold24Regular />}
+      />
+      <ToolbarRadioButton
+        aria-label="Radio Option - Underline"
+        name="text-style"
+        value="underline"
+        icon={<TextUnderline24Regular />}
+      />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
index 5877cd0b39c2f6..ec7cffdaef4392 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
@@ -10,10 +10,15 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Small = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <ToolbarButton appearance="primary" icon={<TextBold16Regular />} />
-    <ToolbarButton icon={<TextItalic16Regular />} />
-    <ToolbarButton icon={<TextUnderline16Regular />} />
+    <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold16Regular />} />
+    <ToolbarButton aria-label="Text Options - Italic" icon={<TextItalic16Regular />} />
+    <ToolbarButton aria-label="Text Options - Underline" icon={<TextUnderline16Regular />} />
     <ToolbarDivider />
-    <ToolbarToggleButton name="toggle" value="toggle" icon={<AlertSnooze16Regular />} />
+    <ToolbarToggleButton
+      aria-label="Toggle Option - Alert Snooze"
+      name="toggle"
+      value="toggle"
+      icon={<AlertSnooze16Regular />}
+    />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
index fcd9f3dc4c5062..0cd05053107141 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
@@ -5,8 +5,8 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Subtle = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton appearance="subtle" icon={<TextBold24Regular />} />
-    <ToolbarButton appearance="subtle" icon={<TextItalic24Regular />} />
-    <ToolbarButton appearance="subtle" icon={<TextUnderline24Regular />} />
+    <ToolbarButton aria-label="Text Options - Bold" appearance="subtle" icon={<TextBold24Regular />} />
+    <ToolbarButton aria-label="Text Options - Italic" appearance="subtle" icon={<TextItalic24Regular />} />
+    <ToolbarButton aria-label="Text Options - Underline" appearance="subtle" icon={<TextUnderline24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
index 25d25c88d87323..52b4bfce9322fe 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
@@ -7,11 +7,11 @@ import { CalendarMonthRegular, TextBold24Regular } from '@fluentui/react-icons';
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
     <Tooltip content="Makes text bold" relationship="label" withArrow>
-      <ToolbarButton appearance="primary" icon={<TextBold24Regular />} />
+      <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
     </Tooltip>
     <ToolbarDivider />
     <Tooltip content="With calendar icon" relationship="label" withArrow>
-      <ToolbarButton icon={<CalendarMonthRegular />} />
+      <ToolbarButton aria-label="Calendar" icon={<CalendarMonthRegular />} />
     </Tooltip>
   </Toolbar>
 );

From 23d3c0f212aef35125923f038c7323a30504ce95 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 03:52:09 -0300
Subject: [PATCH 4/9] chore: update tooltip example

---
 .../src/stories/Toolbar/ToolbarWithTooltip.stories.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
index 52b4bfce9322fe..a746d15d261350 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
@@ -10,7 +10,7 @@ export const WithTooltip = (props: Partial<ToolbarProps>) => (
       <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
     </Tooltip>
     <ToolbarDivider />
-    <Tooltip content="With calendar icon" relationship="label" withArrow>
+    <Tooltip content="Tooltip Content - Show something here" relationship="label" withArrow>
       <ToolbarButton aria-label="Calendar" icon={<CalendarMonthRegular />} />
     </Tooltip>
   </Toolbar>

From 798e3e1f7c9b98ce2ab201bb14605ee1a18087c9 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 03:55:39 -0300
Subject: [PATCH 5/9] chore: update radio example

---
 .../stories/Toolbar/ToolbarRadio.stories.tsx    | 17 +++++++++++------
 .../Toolbar/ToolbarRadioControlled.stories.tsx  | 14 +++++++-------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index e0130803210587..86949e4431231f 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -1,22 +1,27 @@
 import * as React from 'react';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { AlignCenterHorizontal24Regular, AlignLeft24Regular, AlignRight24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Radio = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
     <ToolbarRadioButton
-      aria-label="Radio Option - Italic"
+      aria-label="Radio Option - Align left"
       name="text-style"
       value="italic"
-      icon={<TextItalic24Regular />}
+      icon={<AlignLeft24Regular />}
     />
-    <ToolbarRadioButton aria-label="Radio Option - Bold" name="text-style" value="bold" icon={<TextBold24Regular />} />
     <ToolbarRadioButton
-      aria-label="Radio Option - Underline"
+      aria-label="Radio Option - Align Center"
+      name="text-style"
+      value="bold"
+      icon={<AlignCenterHorizontal24Regular />}
+    />
+    <ToolbarRadioButton
+      aria-label="Radio Option - Align Right"
       name="text-style"
       value="underline"
-      icon={<TextUnderline24Regular />}
+      icon={<AlignRight24Regular />}
     />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index 0bbbd2dea04bd7..e4ee92e14503eb 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
+import { AlignCenterHorizontal24Regular, AlignLeft24Regular, AlignRight24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
@@ -17,22 +17,22 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
       <ToolbarRadioButton
-        aria-label="Radio Option - Italic"
+        aria-label="Radio Option - Align left"
         name="text-style"
         value="italic"
-        icon={<TextItalic24Regular />}
+        icon={<AlignLeft24Regular />}
       />
       <ToolbarRadioButton
-        aria-label="Radio Option - Bold"
+        aria-label="Radio Option - Align Center"
         name="text-style"
         value="bold"
-        icon={<TextBold24Regular />}
+        icon={<AlignCenterHorizontal24Regular />}
       />
       <ToolbarRadioButton
-        aria-label="Radio Option - Underline"
+        aria-label="Radio Option - Align Right"
         name="text-style"
         value="underline"
-        icon={<TextUnderline24Regular />}
+        icon={<AlignRight24Regular />}
       />
     </Toolbar>
   );

From ed45ff05674309d937b187ee35b5272b91c006cb Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 04:02:53 -0300
Subject: [PATCH 6/9] chore: update toolbar stories examples

---
 .../ToolbarControlledToggleButton.stories.tsx |  8 +++++-
 .../Toolbar/ToolbarWithPopover.stories.tsx    | 26 +++++++++++++++----
 .../Toolbar/ToolbarWithTooltip.stories.tsx    |  7 +++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
index 07b011c4703265..b7c64f7c6a34bf 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
+import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledToggleButton = () => {
@@ -26,6 +26,12 @@ export const ControlledToggleButton = () => {
         name="textOptions"
         value="italic"
       />
+      <ToolbarToggleButton
+        aria-label="Text option - Underline"
+        icon={<TextUnderline24Regular />}
+        name="textOptions"
+        value="underline"
+      />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
index b54068e7da7154..2f379a241328e5 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
-import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components';
+import { CalendarMonthRegular, Accessibility24Filled } from '@fluentui/react-icons';
 
 export const WithPopover = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
@@ -11,16 +11,32 @@ export const WithPopover = (props: Partial<ToolbarProps>) => (
         <ToolbarButton appearance="primary">See more...</ToolbarButton>
       </PopoverTrigger>
       <PopoverSurface>
-        <div>Popover content</div>
+        <div>
+          <h3>Popover content</h3>
+          <Button>Action</Button>
+        </div>
       </PopoverSurface>
     </Popover>
     <ToolbarDivider />
     <Popover withArrow>
       <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton icon={<CalendarMonthRegular />} />
+        <ToolbarButton aria-label="Popover trigger - Calendar" icon={<CalendarMonthRegular />} />
       </PopoverTrigger>
       <PopoverSurface>
-        <div>Popover content</div>
+        <div>
+          <h3>Popover content</h3>
+          <Button>Action</Button>
+        </div>
+      </PopoverSurface>
+    </Popover>
+    <Popover withArrow>
+      <PopoverTrigger disableButtonEnhancement>
+        <ToolbarButton aria-label="Popover trigger - Accessibility" icon={<Accessibility24Filled />} />
+      </PopoverTrigger>
+      <PopoverSurface>
+        <div>
+          <h3>Popover content - Accessibility</h3> <Button>Action</Button>
+        </div>
       </PopoverSurface>
     </Popover>
   </Toolbar>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
index a746d15d261350..ddc2434481a3bf 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
@@ -2,16 +2,19 @@ import * as React from 'react';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Tooltip } from '@fluentui/react-components';
-import { CalendarMonthRegular, TextBold24Regular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Tooltip content="Makes text bold" relationship="label" withArrow>
+    <Tooltip content="Content - Makes text bold" relationship="label" withArrow>
       <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
     </Tooltip>
     <ToolbarDivider />
     <Tooltip content="Tooltip Content - Show something here" relationship="label" withArrow>
       <ToolbarButton aria-label="Calendar" icon={<CalendarMonthRegular />} />
     </Tooltip>
+    <Tooltip content="Tooltip Content - Makes text Italic" relationship="label" withArrow>
+      <ToolbarButton aria-label="Italic Option" icon={<TextItalic24Regular />} />
+    </Tooltip>
   </Toolbar>
 );

From 5f1e28123a8d5f09059f5f6010c77eda2637b096 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Mon, 7 Nov 2022 16:53:21 -0300
Subject: [PATCH 7/9] chore: add changes

---
 ...react-toolbar-ae0fefac-6a13-44eb-998c-cd16e5537a8d.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-toolbar-ae0fefac-6a13-44eb-998c-cd16e5537a8d.json

diff --git a/change/@fluentui-react-toolbar-ae0fefac-6a13-44eb-998c-cd16e5537a8d.json b/change/@fluentui-react-toolbar-ae0fefac-6a13-44eb-998c-cd16e5537a8d.json
new file mode 100644
index 00000000000000..591b640b174b91
--- /dev/null
+++ b/change/@fluentui-react-toolbar-ae0fefac-6a13-44eb-998c-cd16e5537a8d.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update toolbar stories examples",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "chassunc@microsoft.com",
+  "dependentChangeType": "none"
+}

From 2f327c6151017bf33a2e7bdf692869aceacbec05 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 8 Nov 2022 11:53:27 -0300
Subject: [PATCH 8/9] chore: use both in toolbar arrow key nav

---
 .../react-toolbar/src/components/Toolbar/useToolbar.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
index e85b58e24dfb25..fa1dcf58ef8cf9 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -18,7 +18,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
 
   const arrowNavigationProps = useArrowNavigationGroup({
     circular: true,
-    axis: vertical ? 'vertical' : 'horizontal',
+    axis: 'both',
   });
 
   const initialState: UninitializedToolbarState = {

From 551b81450c6081eb132a269cdae398643a10b565 Mon Sep 17 00:00:00 2001
From: Charles <chassunc@microsoft.com>
Date: Tue, 8 Nov 2022 13:38:00 -0300
Subject: [PATCH 9/9] chore: update snapshot

---
 .../src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap b/packages/react-components/react-toolbar/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
index aceee3c4cb9b9a..ff7c849f7d3f27 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/__snapshots__/Toolbar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Toolbar renders a default state 1`] = `
 <div>
   <div
     class="fui-Toolbar"
-    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":2}}"
+    data-tabster="{\\"mover\\":{\\"cyclic\\":true,\\"direction\\":0}}"
     role="toolbar"
   >
     Default Toolbar