chore: toolbar a11y improvements

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": "[email protected]",
+  "dependentChangeType": "none"
+}

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

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: 'both',
   });
 
   const initialState: UninitializedToolbarState = {

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 = () => {
@@ -14,8 +14,24 @@ 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"
+      />
+      <ToolbarToggleButton
+        aria-label="Text option - Underline"
+        icon={<TextUnderline24Regular />}
+        name="textOptions"
+        value="underline"
+      />
     </Toolbar>
   );
 };

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>

packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx

@@ -1,12 +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 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 - Align left"
+      name="text-style"
+      value="italic"
+      icon={<AlignLeft24Regular />}
+    />
+    <ToolbarRadioButton
+      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={<AlignRight24Regular />}
+    />
   </Toolbar>
 );

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';
 
@@ -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 - Align left"
+        name="text-style"
+        value="italic"
+        icon={<AlignLeft24Regular />}
+      />
+      <ToolbarRadioButton
+        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={<AlignRight24Regular />}
+      />
     </Toolbar>
   );
 };

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>
 );

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>
 );

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>
+);

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>

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>
-      <ToolbarButton appearance="primary" icon={<TextBold24Regular />} />
+    <Tooltip content="Content - Makes text bold" relationship="label" withArrow>
+      <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
     </Tooltip>
     <ToolbarDivider />
-    <Tooltip content="With calendar icon" relationship="label" withArrow>
-      <ToolbarButton icon={<CalendarMonthRegular />} />
+    <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>
 );

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',