chore(react-tag-picker): modify roles for toolbar + buttons instead of listbox + options

change/@fluentui-react-tag-picker-64fc2595-4402-4433-89ba-6fa4382c8d08.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: modify roles for toolbar + buttons instead of listbox + options",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tag-picker/library/src/components/TagPickerGroup/useTagPickerGroup.ts

@@ -37,7 +37,6 @@ export const useTagPickerGroup_unstable = (
 
   const state = useTagGroup_unstable(
     {
-      role: 'listbox',
       disabled,
       ...props,
       ...arrowNavigationProps,

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerAppearance.stories.tsx

@@ -42,7 +42,7 @@ const Example = ({ appearance }: Pick<TagPickerProps, 'appearance'>) => {
     <Field label={label} style={{ maxWidth: 400 }}>
       <TagPicker appearance={appearance} onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerBestPractices.md

@@ -6,6 +6,8 @@
 
 - **Inform the user about the [deletion interaction](https://github.com/microsoft/fluentui/issues/31165) of tags when pressing Backspace:** When `TagPickerInput` is focused, pressing the Backspace key will remove the last tag. This behavior should be communicated to the user to avoid confusion.
 
+- **Use `aria-roledescription` on `TagPickerGroup` to provide additional context:** This attribute helps screen readers to understand the role of the element, making it more accessible and inclusive. By default `TagPickerGroup` has a role of `toolbar` which may not be clear to all users, so providing additional context can help.
+
 ### Don't
 
 - **Don't use `InteractionTag` with `TagPicker`** as it is not supported at the moment. This combination may lead to unexpected behavior.

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerButton.stories.tsx

@@ -35,7 +35,7 @@ export const Button = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDefault.stories.tsx

@@ -35,7 +35,7 @@ export const Default = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerDisabled.stories.tsx

@@ -35,7 +35,7 @@ export const Disabled = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker disabled onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerExpandIcon.stories.tsx

@@ -36,7 +36,7 @@ export const ExpandIcon = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl expandIcon={<ArrowDownFilled />}>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerFiltering.stories.tsx

@@ -53,7 +53,7 @@ export const Filtering = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerGrouped.stories.tsx

@@ -29,7 +29,7 @@ export const Grouped = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerNoPopover.stories.tsx

@@ -29,7 +29,7 @@ export const NoPopover = () => {
     <Field label="Add Employees" style={{ maxWidth: 400 }}>
       <TagPicker noPopover onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map((option, index) => (
               <Tag
                 key={index}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSecondaryAction.stories.tsx

@@ -44,7 +44,7 @@ export const SecondaryAction = () => {
             </Button>
           }
         >
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSingleSelect.stories.tsx

@@ -33,7 +33,7 @@ export const SingleSelect = () => {
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
           {selectedOption && (
-            <TagPickerGroup aria-label="Selected Employees">
+            <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
               <Tag
                 key={selectedOption}
                 shape="rounded"

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerSize.stories.tsx

@@ -35,7 +35,7 @@ const Example = ({ size }: Pick<TagPickerProps, 'size'>) => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker size={size} onOptionSelect={onOptionSelect} selectedOptions={selectedOptions}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option}

packages/react-components/react-tag-picker/stories/src/TagPicker/TagPickerTruncatedText.stories.tsx

@@ -63,7 +63,7 @@ export const TruncatedText = () => {
     <Field label="Select Employees" style={{ maxWidth: 400 }}>
       <TagPicker onOptionSelect={onOptionSelect} selectedOptions={selectedOptions.map(option => option.value)}>
         <TagPickerControl>
-          <TagPickerGroup aria-label="Selected Employees">
+          <TagPickerGroup aria-roledescription="List" aria-label="Selected Employees">
             {selectedOptions.map(option => (
               <Tag
                 key={option.value}