fix(react-tags-preview): use regular icon for dismiss

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"
+}

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,

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,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
     dismissIcon: slot.optional(props.dismissIcon, {
       renderByDefault: dismissible,
       defaultProps: {
-        children: <DismissIcon />,
+        children: <DismissRegular />,
       },
       elementType: 'span',
     }),

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

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
+        dismissIcon={{ 'aria-label': 'remove' }}
+      >
         disabled
       </Tag>
-      <Tag disabled secondaryText="appearance=outline" appearance="outline" icon={<CalendarMonthRegular />} dismissible>
+      <Tag
+        disabled
+        secondaryText="appearance=outline"
+        appearance="outline"
+        icon={<CalendarMonthRegular />}
+        dismissible
+        dismissIcon={{ 'aria-label': 'remove' }}
+      >
         disabled
       </Tag>
-      <Tag disabled secondaryText="appearance=brand" appearance="brand" icon={<CalendarMonthRegular />} dismissible>
+      <Tag
+        disabled
+        secondaryText="appearance=brand"
+        appearance="brand"
+        icon={<CalendarMonthRegular />}
+        dismissible
+        dismissIcon={{ 'aria-label': 'remove' }}
+      >
         disabled
       </Tag>
     </div>

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>

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

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} />

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>