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

* fix tag issue * fix interactiontag label * add label to toolbar * use regular icon * chg * remove role image * aria label dismiss * Update packages/react-components/react-tags-preview/stories/TagGroup/TagGroupDefault.stories.tsx Co-authored-by: ling1726 <[email protected]> * update label * update label * dismiss role --------- Co-authored-by: ling1726 <[email protected]>
marcosmoura · Aug 28, 2023 · 1f13e55 · 1f13e55
1 parent 18e53d3
commit 1f13e55
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 32 deletions.
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
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use regular icon for dismiss",
+  "packageName": "@fluentui/react-tags-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/.../react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx b/.../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
@@ -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: 'img',
       },
       elementType: 'span',
     }),

diff --git a/...components/react-tags-preview/stories/InteractionTag/InteractionTagAppearance.stories.tsx b/...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/...t-components/react-tags-preview/stories/InteractionTag/InteractionTagDisabled.stories.tsx b/...t-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="remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="outline">
         <InteractionTagPrimary secondaryText="appearance=outline" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
       <InteractionTag disabled appearance="brand">
         <InteractionTagPrimary secondaryText="appearance=brand" icon={<CalendarMonthRegular />} hasSecondaryAction>
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary />
+        <InteractionTagSecondary aria-label="remove" />
       </InteractionTag>
     </div>
   );

diff --git a/...ct-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx b/...ct-components/react-tags-preview/stories/InteractionTag/InteractionTagDismiss.stories.tsx
@@ -21,11 +21,11 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem}>
+    <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/...eact-components/react-tags-preview/stories/InteractionTag/InteractionTagShape.stories.tsx b/...eact-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/...react-components/react-tags-preview/stories/InteractionTag/InteractionTagSize.stories.tsx b/...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/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
+        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>

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
@@ -14,7 +14,7 @@ export const Dismiss = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem}>
+    <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/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="Simple tag group example">
     <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
@@ -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>
       ),
     },
@@ -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 example">
+      {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
@@ -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 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
@@ -26,7 +26,7 @@ export const Sizes = () => {
       {sizes.map(size => (
         <div key={size}>
           {`${size}: `}
-          <TagGroup size={size}>
+          <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>