From 85a2a41e747958fcab080997c80d5ccc490d3a83 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 30 Aug 2023 16:25:44 +0200
Subject: [PATCH 1/4] tag label best practice

---
 .../react-tags-preview/stories/Tag/TagBestPractices.md        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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..2e0ea09eb21073 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,9 @@
 
 - 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. There are two ways to label the tag:
+  - option 1 - add aria-label on dismiss icon, for example `dismissIcon={{ 'aria-label': 'remove' }}`. The accessible name of the Tag will be computed.
+  - option 2 - add aria-label with the information about dismiss on Tag itself, and the dismiss icon should be hidden from accessibility tree using `dismissIcon={{ role: 'presentation' }}`
 
 ### Don't
 

From 52ce399bdfc3fb37a6e997328edf01152aa20828 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 30 Aug 2023 16:26:01 +0200
Subject: [PATCH 2/4] add link in popover

---
 .../InteractionTag/InteractionTagHasPrimaryAction.stories.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
index 9722b4b018c8ef..4f67d6bb6dc385 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Popover, PopoverTrigger, PopoverSurface, makeStyles, Tooltip } from '@fluentui/react-components';
+import { Popover, PopoverTrigger, PopoverSurface, makeStyles, Tooltip, Link } from '@fluentui/react-components';
 import { InteractionTag, InteractionTagPrimary, InteractionTagSecondary } from '@fluentui/react-tags-preview';
 import { bundleIcon, HeartFilled, HeartRegular } from '@fluentui/react-icons';
 
@@ -24,6 +24,7 @@ export const HasPrimaryAction = () => {
           <InteractionTagPrimary hasSecondaryAction>golden retriever</InteractionTagPrimary>
         </PopoverTrigger>
         <PopoverSurface className={styles.popover}>
+          <Link href="https://en.wikipedia.org/wiki/Golden_Retriever">Find out more on wiki</Link>
           <ul>
             <li>Size: Medium to large-sized dog breed. </li>
             <li>Coat: Luxurious double coat with a dense, water-repellent outer layer and a soft, dense undercoat.</li>

From f9036f17545893021a6da7a278dec94af16bb607 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 30 Aug 2023 16:54:15 +0200
Subject: [PATCH 3/4] label for interaction tag

---
 .../InteractionTagAppearance.stories.tsx      | 24 +++++++++---
 .../InteractionTagBestPractices.md            |  5 ++-
 .../InteractionTagDisabled.stories.tsx        | 39 ++++++++++++++++---
 .../InteractionTagDismiss.stories.tsx         | 22 ++++++++---
 ...InteractionTagHasPrimaryAction.stories.tsx | 12 ++++--
 .../InteractionTagShape.stories.tsx           | 26 +++++++++++--
 .../InteractionTagSize.stories.tsx            | 36 ++++++++++++++---
 7 files changed, 132 insertions(+), 32 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 7cbcc742e0acd5..eba6b5ea55b1cd 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
@@ -16,22 +16,34 @@ export const Appearance = () => {
   return (
     <div className={styles.container}>
       <InteractionTag>
-        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction id="filled-primary">
           filled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="filled-primary filled-secondary"
+          id="filled-secondary"
+        />
       </InteractionTag>
       <InteractionTag appearance="outline">
-        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction id="outline-primary">
           outline
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="outline-primary outline-secondary"
+          id="outline-secondary"
+        />
       </InteractionTag>
       <InteractionTag appearance="brand">
-        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction>
+        <InteractionTagPrimary icon={<CalendarMonth />} hasSecondaryAction id="brand-primary">
           brand
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="brand-primary brand-secondary"
+          id="brand-secondary"
+        />
       </InteractionTag>
     </div>
   );
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagBestPractices.md b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagBestPractices.md
index 8edc6c05b416a6..47c589dd4a18d1 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagBestPractices.md
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagBestPractices.md
@@ -4,7 +4,10 @@
 
 - To group multiple tags together, use `TagGroup`. `TagGroup` can handle dismiss of multiple `InteractionTag`.
 
-- `InteractionTagSecondary` should provide information to screen readers about the secondary action using `aria-label` or `aria-labelledby`.
+- `InteractionTagSecondary` should provide information to screen readers about the secondary action using `aria-label` or `aria-labelledby`. To label the`InteractionTagSecondary`component with the added context from`InteractionTagPrimary`, follow these steps:
+  1. Apply an `id` attribute to both the InteractionTagPrimary and InteractionTagSecondary components.
+  2. Add an `aria-label` attribute to the InteractionTagSecondary component, with a value that describes the secondary action (e.g. "remove").
+  3. Add an `aria-labelledby` attribute to the InteractionTagSecondary component, with the id values of both the InteractionTagPrimary and InteractionTagSecondary components. This will compute the accessible name of the InteractionTagSecondary component.
 
 ### Don't
 
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 09fe7b9eecf7f9..8a2dade8dd13a9 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
@@ -14,22 +14,49 @@ export const Disabled = () => {
   return (
     <div className={styles.container}>
       <InteractionTag disabled>
-        <InteractionTagPrimary secondaryText="appearance=filled" icon={<CalendarMonthRegular />} hasSecondaryAction>
+        <InteractionTagPrimary
+          secondaryText="appearance=filled"
+          icon={<CalendarMonthRegular />}
+          hasSecondaryAction
+          id="disabled-filled-primary"
+        >
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="disabled-filled-primary disabled-filled-secondary"
+          id="disabled-filled-secondary"
+        />
       </InteractionTag>
       <InteractionTag disabled appearance="outline">
-        <InteractionTagPrimary secondaryText="appearance=outline" icon={<CalendarMonthRegular />} hasSecondaryAction>
+        <InteractionTagPrimary
+          secondaryText="appearance=outline"
+          icon={<CalendarMonthRegular />}
+          hasSecondaryAction
+          id="disabled-outline-primary"
+        >
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="disabled-outline-primary disabled-outline-secondary"
+          id="disabled-outline-secondary"
+        />
       </InteractionTag>
       <InteractionTag disabled appearance="brand">
-        <InteractionTagPrimary secondaryText="appearance=brand" icon={<CalendarMonthRegular />} hasSecondaryAction>
+        <InteractionTagPrimary
+          secondaryText="appearance=brand"
+          icon={<CalendarMonthRegular />}
+          hasSecondaryAction
+          id="disabled-brand-primary"
+        >
           disabled
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="disabled-brand-primary disabled-brand-secondary"
+          id="disabled-brand-secondary"
+        />
       </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 187597df85838d..164b01c98f19c0 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
@@ -22,12 +22,22 @@ export const Dismiss = () => {
 
   return (
     <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="remove" />
-        </InteractionTag>
-      ))}
+      {visibleTags.map(tag => {
+        const primaryId = `dismiss-primary-${tag.value}`;
+        const secondaryId = `dismiss-secondary-${tag.value}`;
+        return (
+          <InteractionTag value={tag.value} key={tag.value}>
+            <InteractionTagPrimary id={primaryId} hasSecondaryAction>
+              {tag.children}
+            </InteractionTagPrimary>
+            <InteractionTagSecondary
+              id={secondaryId}
+              aria-label="remove"
+              aria-labelledby={`${primaryId} ${secondaryId}`}
+            />
+          </InteractionTag>
+        );
+      })}
     </TagGroup>
   );
 };
diff --git a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
index 4f67d6bb6dc385..99e40a7e72c9d3 100644
--- a/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
+++ b/packages/react-components/react-tags-preview/stories/InteractionTag/InteractionTagHasPrimaryAction.stories.tsx
@@ -21,7 +21,9 @@ export const HasPrimaryAction = () => {
     <InteractionTag>
       <Popover>
         <PopoverTrigger>
-          <InteractionTagPrimary hasSecondaryAction>golden retriever</InteractionTagPrimary>
+          <InteractionTagPrimary hasSecondaryAction id="golden-retriever-primary">
+            golden retriever
+          </InteractionTagPrimary>
         </PopoverTrigger>
         <PopoverSurface className={styles.popover}>
           <Link href="https://en.wikipedia.org/wiki/Golden_Retriever">Find out more on wiki</Link>
@@ -33,8 +35,12 @@ export const HasPrimaryAction = () => {
           </ul>
         </PopoverSurface>
       </Popover>
-      <Tooltip content={liked ? 'unlike' : 'I like this'} relationship="label">
-        <InteractionTagSecondary onClick={toggleSecondary}>
+      <Tooltip content={liked ? 'unlike' : 'like'} relationship="label">
+        <InteractionTagSecondary
+          onClick={toggleSecondary}
+          aria-labelledby="golden-retriever-primary golden-retriever-secondary"
+          id="golden-retriever-secondary"
+        >
           <HeartIcon filled={liked} />
         </InteractionTagSecondary>
       </Tooltip>
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 86a52637d71056..ddc25ee33690b6 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
@@ -29,16 +29,34 @@ export const Shape = () => {
       </InteractionTag>
 
       <InteractionTag>
-        <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
+        <InteractionTagPrimary
+          icon={<CalendarMonthRegular />}
+          secondaryText="Secondary text"
+          hasSecondaryAction
+          id="rounded-primary"
+        >
           Rounded
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="rounded-primary rounded-secondary"
+          id="rounded-secondary"
+        />
       </InteractionTag>
       <InteractionTag shape="circular">
-        <InteractionTagPrimary icon={<CalendarMonthRegular />} secondaryText="Secondary text" hasSecondaryAction>
+        <InteractionTagPrimary
+          icon={<CalendarMonthRegular />}
+          secondaryText="Secondary text"
+          hasSecondaryAction
+          id="circular-primary"
+        >
           Circular
         </InteractionTagPrimary>
-        <InteractionTagSecondary aria-label="remove" />
+        <InteractionTagSecondary
+          aria-label="remove"
+          aria-labelledby="circular-primary circular-secondary"
+          id="circular-secondary"
+        />
       </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 213b84df4bf807..ffdd06e28adbdb 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
@@ -27,10 +27,18 @@ export const Size = () => {
         </InteractionTag>
 
         <InteractionTag>
-          <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
+          <InteractionTagPrimary
+            media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
+            hasSecondaryAction
+            id="medium-primary"
+          >
             Medium dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="dismiss" />
+          <InteractionTagSecondary
+            aria-label="dismiss"
+            aria-labelledby="medium-primary medium-secondary"
+            id="medium-secondary"
+          />
         </InteractionTag>
 
         <InteractionTag shape="circular">
@@ -45,10 +53,18 @@ export const Size = () => {
         </InteractionTag>
 
         <InteractionTag size="small">
-          <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
+          <InteractionTagPrimary
+            media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
+            hasSecondaryAction
+            id="small-primary"
+          >
             Small dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="dismiss" />
+          <InteractionTagSecondary
+            aria-label="dismiss"
+            aria-labelledby="small-primary small-secondary"
+            id="small-secondary"
+          />
         </InteractionTag>
 
         <InteractionTag size="small" shape="circular">
@@ -63,10 +79,18 @@ export const Size = () => {
         </InteractionTag>
 
         <InteractionTag size="extra-small">
-          <InteractionTagPrimary media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />} hasSecondaryAction>
+          <InteractionTagPrimary
+            media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
+            hasSecondaryAction
+            id="extra-small-primary"
+          >
             Extra Small dismissible
           </InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="dismiss" />
+          <InteractionTagSecondary
+            aria-label="dismiss"
+            aria-labelledby="extra-small-primary extra-small-secondary"
+            id="extra-small-secondary"
+          />
         </InteractionTag>
 
         <InteractionTag size="extra-small" shape="circular">

From 10dfe391ba068ca2ff15343c1074a64fee3a7086 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Thu, 31 Aug 2023 14:14:41 +0200
Subject: [PATCH 4/4] update taggroup story

---
 .../TagGroup/TagGroupDismiss.stories.tsx      | 24 +++++++++++++------
 .../TagGroup/TagGroupSizes.stories.tsx        |  8 +++++--
 2 files changed, 23 insertions(+), 9 deletions(-)

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 0acaceb3a35fd6..9bec051ce4ccb7 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
@@ -39,13 +39,23 @@ const DismissWithInteractionTags = () => {
   };
 
   return (
-    <TagGroup onDismiss={removeItem} aria-label="TagGroup example with dismissible InteractionTags">
-      {visibleTags.map(tag => (
-        <InteractionTag value={tag.value} key={tag.value}>
-          <InteractionTagPrimary hasSecondaryAction>{tag.children}</InteractionTagPrimary>
-          <InteractionTagSecondary aria-label="remove" />
-        </InteractionTag>
-      ))}
+    <TagGroup onDismiss={removeItem} aria-label="Dismiss example">
+      {visibleTags.map(tag => {
+        const primaryId = `dismiss-primary-${tag.value}`;
+        const secondaryId = `dismiss-secondary-${tag.value}`;
+        return (
+          <InteractionTag value={tag.value} key={tag.value}>
+            <InteractionTagPrimary id={primaryId} hasSecondaryAction>
+              {tag.children}
+            </InteractionTagPrimary>
+            <InteractionTagSecondary
+              id={secondaryId}
+              aria-label="remove"
+              aria-labelledby={`${primaryId} ${secondaryId}`}
+            />
+          </InteractionTag>
+        );
+      })}
     </TagGroup>
   );
 };
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 8d8b922d44e4b6..93a29cfa3ea250 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
@@ -33,10 +33,14 @@ export const Sizes = () => {
               <InteractionTagPrimary icon={<CalendarMonthRegular />}>{size}</InteractionTagPrimary>
             </InteractionTag>
             <InteractionTag>
-              <InteractionTagPrimary icon={<CalendarMonthRegular />} hasSecondaryAction>
+              <InteractionTagPrimary icon={<CalendarMonthRegular />} hasSecondaryAction id={`${size}-primary`}>
                 {size}
               </InteractionTagPrimary>
-              <InteractionTagSecondary aria-label="remove" />
+              <InteractionTagSecondary
+                id={`${size}-secondary`}
+                aria-label="remove"
+                aria-labelledby={`${size}-primary ${size}-secondary`}
+              />
             </InteractionTag>
           </TagGroup>
         </div>