chore(react-tags-preview): update stories and best practices for adding aria-label on dismissible tag

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

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
 

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

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

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';
 
@@ -21,9 +21,12 @@ 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>
           <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>
@@ -32,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>

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

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

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
 

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

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>