From 38086ea65ec05fdb6a34cbfc6a593fc061d68bc7 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 22 Aug 2023 16:55:22 +0200
Subject: [PATCH 01/11] fix tag issue

---
 .../stories/Tag/TagAppearance.stories.tsx     |  6 ++---
 .../stories/Tag/TagBestPractices.md           |  2 +-
 .../stories/Tag/TagDisabled.stories.tsx       | 26 ++++++++++++++++---
 .../stories/Tag/TagDismiss.stories.tsx        |  2 +-
 .../stories/Tag/TagShape.stories.tsx          |  4 +--
 .../stories/Tag/TagSize.stories.tsx           |  6 ++---
 6 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
index e1b57ae584677d..eea5c1805421d4 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
@@ -13,13 +13,13 @@ export const Appearance = () => {
   const styles = useContainerStyles();
   return (
     <div className={styles.container}>
-      <Tag icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
+      <Tag icon={<CalendarMonthRegular />} dismissible aria-label="filled, remove">
         filled
       </Tag>
-      <Tag appearance="outline" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
+      <Tag appearance="outline" icon={<CalendarMonthRegular />} dismissible aria-label="outline, remove">
         outline
       </Tag>
-      <Tag appearance="brand" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
+      <Tag appearance="brand" icon={<CalendarMonthRegular />} dismissible aria-label="brand, remove">
         brand
       </Tag>
     </div>
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md b/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
index 3e7e5e33028227..0ad8cc7a712924 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
@@ -4,7 +4,7 @@
 
 - To group multiple tags together, use `TagGroup`. `TagGroup` can handle dismiss of multiple `Tag`.
 
-- Dismissible `Tag` should provide information to screen readers about the dismiss action. For example `dismissIcon={{ 'aria-label': 'remove' }}`.
+- Dismissible `Tag` should provide information to screen readers about the dismiss action. For example `aria-label="primary text, remove"`.
 
 ### Don't
 
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
index 86998858ceced8..a7150be5d141ae 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
@@ -13,13 +13,33 @@ export const Disabled = () => {
   const styles = useContainerStyles();
   return (
     <div className={styles.container}>
-      <Tag disabled secondaryText="appearance=filled" icon={<CalendarMonthRegular />} dismissible>
+      <Tag
+        disabled
+        secondaryText="appearance=filled"
+        icon={<CalendarMonthRegular />}
+        dismissible
+        aria-label="filled disabled, remove"
+      >
         disabled
       </Tag>
-      <Tag disabled secondaryText="appearance=outline" appearance="outline" icon={<CalendarMonthRegular />} dismissible>
+      <Tag
+        disabled
+        secondaryText="appearance=outline"
+        appearance="outline"
+        icon={<CalendarMonthRegular />}
+        dismissible
+        aria-label="outline disabled, remove"
+      >
         disabled
       </Tag>
-      <Tag disabled secondaryText="appearance=brand" appearance="brand" icon={<CalendarMonthRegular />} dismissible>
+      <Tag
+        disabled
+        secondaryText="appearance=brand"
+        appearance="brand"
+        icon={<CalendarMonthRegular />}
+        dismissible
+        aria-label="brand disabled, remove"
+      >
         disabled
       </Tag>
     </div>
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
index 42e2efd36c1c80..a6cda48b7b230c 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
@@ -16,7 +16,7 @@ export const Dismiss = () => {
   return (
     <TagGroup onDismiss={removeItem}>
       {visibleTags.map(tag => (
-        <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
+        <Tag dismissible aria-label={`${tag.children}, remove`} value={tag.value} key={tag.value}>
           {tag.children}
         </Tag>
       ))}
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
index b3fbf61be5fdb1..8f296f9904d48e 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
@@ -24,7 +24,7 @@ export const Shape = () => {
 
       <Tag
         dismissible
-        dismissIcon={{ 'aria-label': 'remove' }}
+        aria-label="Rounded, Secondary text, remove"
         icon={<CalendarMonthRegular />}
         secondaryText="Secondary text"
       >
@@ -33,7 +33,7 @@ export const Shape = () => {
       <Tag
         shape="circular"
         dismissible
-        dismissIcon={{ 'aria-label': 'remove' }}
+        aria-label="Circular, Secondary text, remove"
         icon={<CalendarMonthRegular />}
         secondaryText="Secondary text"
       >
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
index 042e4be62711a0..5cf076201edcdf 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
@@ -25,7 +25,7 @@ export const Size = () => {
         <Tag>Medium</Tag>
         <Tag
           dismissible
-          dismissIcon={{ 'aria-label': 'remove' }}
+          aria-label="Medium dismissible, remove"
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >
           Medium dismissible
@@ -40,7 +40,7 @@ export const Size = () => {
         <Tag size="small">Small</Tag>
         <Tag
           dismissible
-          dismissIcon={{ 'aria-label': 'remove' }}
+          aria-label="Small dismissible, remove"
           size="small"
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >
@@ -56,7 +56,7 @@ export const Size = () => {
         <Tag size="extra-small">Extra small</Tag>
         <Tag
           dismissible
-          dismissIcon={{ 'aria-label': 'remove' }}
+          aria-label="Extra small dismissible, remove"
           size="extra-small"
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >

From 6bb5cb3a329e6290d729b449d68ac6f0e0a939f3 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 22 Aug 2023 16:56:48 +0200
Subject: [PATCH 02/11] fix interactiontag label

---
 .../InteractionTag/InteractionTagDisabled.stories.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
index c7f51872a37c71..27659b0e7225b9 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
@@ -17,19 +17,19 @@ export const Disabled = () => {
         <InteractionTagPrimary secondaryText="appearance=filled" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary />
+        <InteractionTagSecondary aria-label="filled disabled, remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="outline">
         <InteractionTagPrimary secondaryText="appearance=outline" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary />
+        <InteractionTagSecondary aria-label="outline disabled, remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="brand">
         <InteractionTagPrimary secondaryText="appearance=brand" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary />
+        <InteractionTagSecondary aria-label="brand disabled, remove" />
       </InteractionTag>
     </div>
   );

From 1b598dfc8c8cc51e7accf194fe4c804d9ab534e0 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 22 Aug 2023 16:58:50 +0200
Subject: [PATCH 03/11] add label to toolbar

---
 .../stories/TagGroup/TagGroupDefault.stories.tsx            | 2 +-
 .../stories/TagGroup/TagGroupDismiss.stories.tsx            | 6 +++++-
 .../stories/TagGroup/TagGroupOverflow.stories.tsx           | 2 +-
 .../stories/TagGroup/TagGroupSizes.stories.tsx              | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
index 466973348b9b35..6be13b8848441f 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TagGroup, Tag, TagGroupProps } from '@fluentui/react-tags-preview';
 
 export const Default = (props: Partial<TagGroupProps>) => (
-  <TagGroup {...props}>
+  <TagGroup {...props} aria-label="Default">
     <Tag>Tag 1</Tag>
     <Tag>Tag 2</Tag>
     <Tag>Tag 3</Tag>
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
index 824ca4457c34bc..bb58bea6a13ca4 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
@@ -52,7 +52,11 @@ export const Dismiss = () => {
     setItems([...items].filter(item => item.value !== dismissedTagValue));
   };
 
-  return <TagGroup onDismiss={removeItem}>{items.map(item => item.tag)}</TagGroup>;
+  return (
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
+      {items.map(item => item.tag)}
+    </TagGroup>
+  );
 };
 
 Dismiss.storyName = 'Dismiss';
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
index b9d6387ef45d60..c2b788f4631e1d 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
@@ -135,7 +135,7 @@ export const WithOverflow = () => {
   return (
     <div className={styles.container}>
       <Overflow minimumVisible={2} padding={30}>
-        <TagGroup className={styles.tagGroup}>
+        <TagGroup className={styles.tagGroup} aria-label="Overflow">
           {defaultItems.map(item => (
             <OverflowItem key={item.value} id={item.value!}>
               <Tag key={item.value} {...item} />
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
index 12c3316f5115ec..0dcb4845fa78dd 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
@@ -26,7 +26,7 @@ export const Sizes = () => {
       {sizes.map(size => (
         <div key={size}>
           {`${size}: `}
-          <TagGroup size={size}>
+          <TagGroup size={size} aria-label="Sizes">
             <Tag dismissible media={<Avatar name="Katri Athokas" />}>
               {size}
             </Tag>

From 5c96a525b4c9f260e18cca2c7a3dbd2007733aeb Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 11:09:32 +0200
Subject: [PATCH 04/11] use regular icon

---
 .../InteractionTagSecondary/useInteractionTagSecondary.tsx | 6 ++----
 .../react-tags-preview/src/components/Tag/useTag.tsx       | 7 +++----
 .../stories/Tag/TagAppearance.stories.tsx                  | 6 +++---
 .../react-tags-preview/stories/Tag/TagBestPractices.md     | 2 +-
 .../react-tags-preview/stories/Tag/TagDisabled.stories.tsx | 6 +++---
 .../react-tags-preview/stories/Tag/TagDismiss.stories.tsx  | 2 +-
 .../react-tags-preview/stories/Tag/TagShape.stories.tsx    | 4 ++--
 .../react-tags-preview/stories/Tag/TagSize.stories.tsx     | 6 +++---
 8 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
index 85c00098d0bad1..63143cfbf31d8e 100644
--- a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
+++ b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';
-import { DismissRegular, bundleIcon, DismissFilled } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';
 import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
 
-const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
-
 /**
  * Create the state required to render InteractionTagSecondary.
  *
@@ -47,7 +45,7 @@ export const useInteractionTagSecondary_unstable = (
 
     root: slot.always(
       getNativeElementProps('button', {
-        children: <DismissIcon />,
+        children: <DismissRegular />,
         type: 'button',
         disabled,
         ref,
diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
index bb9a0700d64dd5..ad4e338a6d3bd4 100644
--- a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';
-import { DismissRegular, bundleIcon, DismissFilled } from '@fluentui/react-icons';
+import { DismissRegular } from '@fluentui/react-icons';
 import type { TagProps, TagState } from './Tag.types';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';
 import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
@@ -16,8 +16,6 @@ const tagAvatarShapeMap = {
   circular: 'circular',
 } as const;
 
-const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
-
 /**
  * Create the state required to render Tag.
  *
@@ -97,7 +95,8 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     dismissIcon: slot.optional(props.dismissIcon, {
       renderByDefault: dismissible,
       defaultProps: {
-        children: <DismissIcon />,
+        children: <DismissRegular />,
+        role: 'image',
       },
       elementType: 'span',
     }),
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
index eea5c1805421d4..e1b57ae584677d 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagAppearance.stories.tsx
@@ -13,13 +13,13 @@ export const Appearance = () => {
   const styles = useContainerStyles();
   return (
     <div className={styles.container}>
-      <Tag icon={<CalendarMonthRegular />} dismissible aria-label="filled, remove">
+      <Tag icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
         filled
       </Tag>
-      <Tag appearance="outline" icon={<CalendarMonthRegular />} dismissible aria-label="outline, remove">
+      <Tag appearance="outline" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
         outline
       </Tag>
-      <Tag appearance="brand" icon={<CalendarMonthRegular />} dismissible aria-label="brand, remove">
+      <Tag appearance="brand" icon={<CalendarMonthRegular />} dismissible dismissIcon={{ 'aria-label': 'remove' }}>
         brand
       </Tag>
     </div>
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md b/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
index 0ad8cc7a712924..3e7e5e33028227 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagBestPractices.md
@@ -4,7 +4,7 @@
 
 - To group multiple tags together, use `TagGroup`. `TagGroup` can handle dismiss of multiple `Tag`.
 
-- Dismissible `Tag` should provide information to screen readers about the dismiss action. For example `aria-label="primary text, remove"`.
+- Dismissible `Tag` should provide information to screen readers about the dismiss action. For example `dismissIcon={{ 'aria-label': 'remove' }}`.
 
 ### Don't
 
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
index a7150be5d141ae..10a19a428d1e81 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDisabled.stories.tsx
@@ -18,7 +18,7 @@ export const Disabled = () => {
         secondaryText="appearance=filled"
         icon={<CalendarMonthRegular />}
         dismissible
-        aria-label="filled disabled, remove"
+        dismissIcon={{ 'aria-label': 'remove' }}
       >
         disabled
       </Tag>
@@ -28,7 +28,7 @@ export const Disabled = () => {
         appearance="outline"
         icon={<CalendarMonthRegular />}
         dismissible
-        aria-label="outline disabled, remove"
+        dismissIcon={{ 'aria-label': 'remove' }}
       >
         disabled
       </Tag>
@@ -38,7 +38,7 @@ export const Disabled = () => {
         appearance="brand"
         icon={<CalendarMonthRegular />}
         dismissible
-        aria-label="brand disabled, remove"
+        dismissIcon={{ 'aria-label': 'remove' }}
       >
         disabled
       </Tag>
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
index a6cda48b7b230c..42e2efd36c1c80 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
@@ -16,7 +16,7 @@ export const Dismiss = () => {
   return (
     <TagGroup onDismiss={removeItem}>
       {visibleTags.map(tag => (
-        <Tag dismissible aria-label={`${tag.children}, remove`} value={tag.value} key={tag.value}>
+        <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
           {tag.children}
         </Tag>
       ))}
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
index 8f296f9904d48e..b3fbf61be5fdb1 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagShape.stories.tsx
@@ -24,7 +24,7 @@ export const Shape = () => {
 
       <Tag
         dismissible
-        aria-label="Rounded, Secondary text, remove"
+        dismissIcon={{ 'aria-label': 'remove' }}
         icon={<CalendarMonthRegular />}
         secondaryText="Secondary text"
       >
@@ -33,7 +33,7 @@ export const Shape = () => {
       <Tag
         shape="circular"
         dismissible
-        aria-label="Circular, Secondary text, remove"
+        dismissIcon={{ 'aria-label': 'remove' }}
         icon={<CalendarMonthRegular />}
         secondaryText="Secondary text"
       >
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
index 5cf076201edcdf..042e4be62711a0 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagSize.stories.tsx
@@ -25,7 +25,7 @@ export const Size = () => {
         <Tag>Medium</Tag>
         <Tag
           dismissible
-          aria-label="Medium dismissible, remove"
+          dismissIcon={{ 'aria-label': 'remove' }}
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >
           Medium dismissible
@@ -40,7 +40,7 @@ export const Size = () => {
         <Tag size="small">Small</Tag>
         <Tag
           dismissible
-          aria-label="Small dismissible, remove"
+          dismissIcon={{ 'aria-label': 'remove' }}
           size="small"
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >
@@ -56,7 +56,7 @@ export const Size = () => {
         <Tag size="extra-small">Extra small</Tag>
         <Tag
           dismissible
-          aria-label="Extra small dismissible, remove"
+          dismissIcon={{ 'aria-label': 'remove' }}
           size="extra-small"
           media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         >

From 6fd1f746468e582c88d892e74521c9d97f48bfae Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 11:14:01 +0200
Subject: [PATCH 05/11] chg

---
 ...-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json

diff --git a/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json
new file mode 100644
index 00000000000000..f97c7d413eb9e5
--- /dev/null
+++ b/change/@fluentui-react-tags-preview-9a9016b8-bcf3-4571-bb7d-02db13765ebe.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use regular icon for dismiss",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 421ed24a634d5dbf3a84a00aae30d8de5f9d7611 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 11:18:08 +0200
Subject: [PATCH 06/11] remove role image

---
 .../react-tags-preview/src/components/Tag/useTag.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
index ad4e338a6d3bd4..d005b8e31faff0 100644
--- a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
@@ -96,7 +96,6 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
       renderByDefault: dismissible,
       defaultProps: {
         children: <DismissRegular />,
-        role: 'image',
       },
       elementType: 'span',
     }),

From 8ead5c253710b5622ffecd90e42cb8a1165a8657 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 12:42:28 +0200
Subject: [PATCH 07/11] aria label dismiss

---
 .../stories/InteractionTag/InteractionTagDismiss.stories.tsx    | 2 +-
 .../react-tags-preview/stories/Tag/TagDismiss.stories.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
index e22852059c969e..52d320092a0142 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -21,7 +21,7 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem}>
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
       {visibleTags.map(tag => (
         <InteractionTag value={tag.value} key={tag.value}>
           <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
index 42e2efd36c1c80..91c3bcea527227 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
@@ -14,7 +14,7 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem}>
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
       {visibleTags.map(tag => (
         <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
           {tag.children}

From fcd0dec9c2b8c68b2b351d9ac1ee47e2dfe2b879 Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@outlook.com>
Date: Wed, 23 Aug 2023 12:44:09 +0200
Subject: [PATCH 08/11] Update
 packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx

Co-authored-by: ling1726 <lingfangao@hotmail.com>
---
 .../stories/TagGroup/TagGroupDefault.stories.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
index 6be13b8848441f..6196fac0d34a97 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TagGroup, Tag, TagGroupProps } from '@fluentui/react-tags-preview';
 
 export const Default = (props: Partial<TagGroupProps>) => (
-  <TagGroup {...props} aria-label="Default">
+  <TagGroup {...props} aria-label="Simple tag group example">
     <Tag>Tag 1</Tag>
     <Tag>Tag 2</Tag>
     <Tag>Tag 3</Tag>

From 6f8393157b10e540c20cd9f2e923d2f1ea24b37a Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 12:53:55 +0200
Subject: [PATCH 09/11] update label

---
 .../InteractionTag/InteractionTagAppearance.stories.tsx     | 6 +++---
 .../InteractionTag/InteractionTagDisabled.stories.tsx       | 6 +++---
 .../InteractionTag/InteractionTagDismiss.stories.tsx        | 4 ++--
 .../stories/InteractionTag/InteractionTagShape.stories.tsx  | 4 ++--
 .../stories/InteractionTag/InteractionTagSize.stories.tsx   | 6 +++---
 .../react-tags-preview/stories/Tag/TagDismiss.stories.tsx   | 2 +-
 .../stories/TagGroup/TagGroupDismiss.stories.tsx            | 6 +++---
 .../stories/TagGroup/TagGroupOverflow.stories.tsx           | 2 +-
 .../stories/TagGroup/TagGroupSizes.stories.tsx              | 4 ++--
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx
index 23a53445da53e7..7cbcc742e0acd5 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx
@@ -19,19 +19,19 @@ export const Appearance = () => {
         <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
           filled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="filled, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag appearance="outline">
         <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
           outline
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="outline, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag appearance="brand">
         <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
           brand
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="brand, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
     </div>
   );
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
index 27659b0e7225b9..09fe7b9eecf7f9 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx
@@ -17,19 +17,19 @@ export const Disabled = () => {
         <InteractionTagPrimary secondaryText="appearance=filled" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="filled disabled, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="outline">
         <InteractionTagPrimary secondaryText="appearance=outline" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="outline disabled, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="brand">
         <InteractionTagPrimary secondaryText="appearance=brand" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="brand disabled, remove" />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
     </div>
   );
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
index 52d320092a0142..b461255f6e68b3 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -21,11 +21,11 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
       {visibleTags.map(tag => (
         <InteractionTag value={tag.value} key={tag.value}>
           <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label={`${tag.children}, remove`} />
+          <InteractionTagSecondary aria-label={'remove'} />
         </InteractionTag>
       ))}
     </TagGroup>
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx
index fe0284d2750b01..86a52637d71056 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx
@@ -32,13 +32,13 @@ export const Shape = () => {
         <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
           Rounded
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label={`Rounded, remove`} />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag shape="circular">
         <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
           Circular
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label={`Circular, remove`} />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
     </div>
   );
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx
index 83efab0e7c7a42..213b84df4bf807 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx
@@ -30,7 +30,7 @@ export const Size = () => {
           <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
             Medium dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label={`Medium, dismiss`} />
+          <InteractionTagSecondary aria-label="dismiss" />
         </InteractionTag>
 
         <InteractionTag shape="circular">
@@ -48,7 +48,7 @@ export const Size = () => {
           <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
             Small dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label={`Small, dismiss`} />
+          <InteractionTagSecondary aria-label="dismiss" />
         </InteractionTag>
 
         <InteractionTag size="small" shape="circular">
@@ -66,7 +66,7 @@ export const Size = () => {
           <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
             Extra Small dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label={`Extra-small, dismiss`} />
+          <InteractionTagSecondary aria-label="dismiss" />
         </InteractionTag>
 
         <InteractionTag size="extra-small" shape="circular">
diff --git a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
index 91c3bcea527227..f8cafabbcc6437 100644
--- a/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/Tag/TagDismiss.stories.tsx
@@ -14,7 +14,7 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
       {visibleTags.map(tag => (
         <Tag dismissible dismissIcon={{ 'aria-label': 'remove' }} value={tag.value} key={tag.value}>
           {tag.children}
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
index bb58bea6a13ca4..1c466d9c8fa6f5 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDismiss.stories.tsx
@@ -31,7 +31,7 @@ export const Dismiss = () => {
       tag: (
         <InteractionTag value="foo" key="foo">
           <InteractionTagPrimary hasSecondaryAction>Foo</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="Foo, remove" />
+          <InteractionTagSecondary aria-label="remove" />
         </InteractionTag>
       ),
     },
@@ -40,7 +40,7 @@ export const Dismiss = () => {
       tag: (
         <InteractionTag value="bar" key="bar">
           <InteractionTagPrimary hasSecondaryAction>Bar</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="Bar, remove" />
+          <InteractionTagSecondary aria-label="remove" />
         </InteractionTag>
       ),
     },
@@ -53,7 +53,7 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="Dismiss">
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
       {items.map(item => item.tag)}
     </TagGroup>
   );
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
index c2b788f4631e1d..8ebcc4db21fde0 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupOverflow.stories.tsx
@@ -135,7 +135,7 @@ export const WithOverflow = () => {
   return (
     <div className={styles.container}>
       <Overflow minimumVisible={2} padding={30}>
-        <TagGroup className={styles.tagGroup} aria-label="Overflow">
+        <TagGroup className={styles.tagGroup} aria-label="Overflow example">
           {defaultItems.map(item => (
             <OverflowItem key={item.value} id={item.value!}>
               <Tag key={item.value} {...item} />
diff --git a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
index 0dcb4845fa78dd..7d1e21c40841f4 100644
--- a/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/TagGroup/TagGroupSizes.stories.tsx
@@ -26,7 +26,7 @@ export const Sizes = () => {
       {sizes.map(size => (
         <div key={size}>
           {`${size}: `}
-          <TagGroup size={size} aria-label="Sizes">
+          <TagGroup size={size} aria-label={`${size} tag group example`}>
             <Tag dismissible media={<Avatar name="Katri Athokas" />}>
               {size}
             </Tag>
@@ -37,7 +37,7 @@ export const Sizes = () => {
               <InteractionTagPrimary icon={<CalendarMonthRegular />} hasSecondaryAction>
                 {size}
               </InteractionTagPrimary>
-              <InteractionTagSecondary />
+              <InteractionTagSecondary aria-label="remove" />
             </InteractionTag>
           </TagGroup>
         </div>

From a1f885a42e21b2a91744e5e9ac16edfe5ffa9648 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 12:55:35 +0200
Subject: [PATCH 10/11] update label

---
 .../stories/InteractionTag/InteractionTagDismiss.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
index b461255f6e68b3..187597df85838d 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -25,7 +25,7 @@ export const Dismiss = () => {
       {visibleTags.map(tag => (
         <InteractionTag value={tag.value} key={tag.value}>
           <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label={'remove'} />
+          <InteractionTagSecondary aria-label="remove" />
         </InteractionTag>
       ))}
     </TagGroup>

From 4550ad379d974175faf994961d403a221fb2d9da Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 23 Aug 2023 13:54:37 +0200
Subject: [PATCH 11/11] dismiss role

---
 .../react-tags-preview/src/components/Tag/useTag.tsx             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
index d005b8e31faff0..0982c5796deb20 100644
--- a/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags-preview/src/components/Tag/useTag.tsx
@@ -96,6 +96,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
       renderByDefault: dismissible,
       defaultProps: {
         children: <DismissRegular />,
+        role: 'img',
       },
       elementType: 'span',
     }),