chore: add few small toolbar improvements

change/@fluentui-react-toolbar-afed7d12-591a-462e-9ddf-b8a079a5e05a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: add few small toolbar improvements",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts

@@ -39,14 +39,12 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     }),
   };
 
-  const [checkedValues, setCheckedValues] = useControllableState({
-    state: initialState.checkedValues,
-    defaultState: initialState.defaultCheckedValues,
-    initialState: {},
+  const [checkedValues, onCheckedValueChange] = useToolbarSelectableState({
+    checkedValues: props.checkedValues,
+    defaultCheckedValues: props.defaultCheckedValues,
+    onCheckedValueChange: props.onCheckedValueChange,
   });
 
-  const { onCheckedValueChange } = initialState;
-
   const handleToggleButton: ToggableHandler = useEventCallback(
     (e: React.MouseEvent | React.KeyboardEvent, name: string, value: string, checked?: boolean) => {
       if (name && value) {
@@ -57,9 +55,7 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
         } else {
           newCheckedItems.push(value);
         }
-
         onCheckedValueChange?.(e, { name, checkedItems: newCheckedItems });
-        setCheckedValues(s => ({ ...s, [name]: newCheckedItems }));
       }
     },
   );
@@ -71,7 +67,6 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
           name,
           checkedItems: checkedValues?.[name],
         });
-        setCheckedValues(s => ({ ...s, [name]: [value] }));
       }
     },
   );
@@ -83,3 +78,29 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     checkedValues: checkedValues ?? {},
   };
 };
+
+/**
+ * Adds appropriate state values and handlers for selectable items
+ * i.e checkboxes and radios
+ */
+const useToolbarSelectableState = (
+  state: Pick<ToolbarProps, 'checkedValues' | 'defaultCheckedValues' | 'onCheckedValueChange'>,
+) => {
+  const [checkedValues, setCheckedValues] = useControllableState({
+    state: state.checkedValues,
+    defaultState: state.defaultCheckedValues,
+    initialState: {},
+  });
+  const { onCheckedValueChange: onCheckedValueChangeOriginal } = state;
+  const onCheckedValueChange: ToolbarState['onCheckedValueChange'] = useEventCallback((e, { name, checkedItems }) => {
+    if (onCheckedValueChangeOriginal) {
+      onCheckedValueChangeOriginal(e, { name, checkedItems });
+    }
+
+    setCheckedValues(s => {
+      return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
+    });
+  });
+
+  return [checkedValues, onCheckedValueChange] as const;
+};

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

@@ -3,7 +3,9 @@ import { TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
 import { Toolbar, ToolbarToggleButton, ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledToggleButton = () => {
-  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({ edit: ['cut', 'paste'] });
+  const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
+    textOptions: ['bold', 'italic'],
+  });
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
     setCheckedValues(s => {
       return s ? { ...s, [name]: checkedItems } : { [name]: checkedItems };
@@ -12,8 +14,8 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
-      <ToolbarToggleButton icon={<TextBold24Regular />} name="edit" value="cut" />
-      <ToolbarToggleButton icon={<TextItalic24Regular />} name="edit" value="paste" />
+      <ToolbarToggleButton icon={<TextBold24Regular />} name="textOptions" value="bold" />
+      <ToolbarToggleButton icon={<TextItalic24Regular />} name="textOptions" value="italic" />
     </Toolbar>
   );
 };

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

@@ -128,13 +128,15 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-1"
           overflowGroupId="1"
           appearance="subtle"
+          aria-label="Italic option ( Group 1 )"
           icon={<TextUnderline16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="bold-1"
           overflowGroupId="1"
           appearance="subtle"
+          aria-label="Bold option ( Group 1 )"
           icon={<TextBold16Regular />}
         />
 
@@ -144,34 +146,39 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-2"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Underline option ( Group 2 )"
           icon={<TextUnderline16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="bold-2"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Bold option ( Group 2 )"
           icon={<TextBold16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="italic-1"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Italic option ( Group 2 )"
           icon={<TextItalic16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="underline-3"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Underline option ( Group 2 )"
           icon={<TextUnderline16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="bold-3"
           overflowGroupId="2"
           appearance="subtle"
+          aria-label="Bold option ( Group 2 )"
           icon={<TextBold16Regular />}
         />
 
@@ -181,20 +188,23 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
           overflowId="underline-4"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Underline option ( Group 3 )"
           icon={<TextUnderline16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="bold-4"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Bold option ( Group 3 )"
           icon={<TextBold16Regular />}
         />
 
         <ToolbarOverflowButton
           overflowId="italic-2"
           overflowGroupId="3"
           appearance="subtle"
+          aria-label="Italic option ( Group 3 )"
           icon={<TextItalic16Regular />}
         />