fix: add aria-pressed semantics to selectable Tag, remove default aria-pressed from InteractionTag (#34619)

Author: smhigley

change/@fluentui-react-tags-015dcaf8-69fd-4234-9c35-f88f5499ba13.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add aria-pressed semantics to selectable Tag, remove default aria-pressed from InteractionTag",
+  "packageName": "@fluentui/react-tags",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tags/library/src/components/Tag/useTag.tsx

@@ -41,7 +41,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
     appearance = contextAppearance ?? 'filled',
     disabled = false,
     dismissible = contextDismissible ?? false,
-    selected = false,
+    selected,
     shape = 'rounded',
     size = contextSize,
     value = id,
@@ -62,14 +62,16 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
   });
 
   const elementType = dismissible ? 'button' : 'span';
+  const selectedProp = tagGroupRole === 'listbox' ? 'aria-selected' : 'aria-pressed';
+  const selectable = typeof selected === 'boolean' || tagGroupRole === 'listbox';
 
   return {
     appearance,
     avatarShape: tagAvatarShapeMap[shape],
     avatarSize: tagAvatarSizeMap[size],
     disabled: contextDisabled ? true : disabled,
     dismissible,
-    selected,
+    selected: !!selected,
     shape,
     size,
 
@@ -86,6 +88,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
       getIntrinsicElementProps(elementType, {
         ref,
         role: tagGroupRole === 'listbox' ? 'option' : undefined,
+        [selectedProp]: selectable ? selected : undefined,
         ...props,
         disabled: contextDisabled ? true : disabled,
         id,

packages/react-components/react-tags/library/src/contexts/tagGroupContext.tsx

@@ -7,7 +7,7 @@ const tagGroupContextDefaultValue: TagGroupContextValue = {
   handleTagDismiss: () => ({}),
   size: 'medium',
   role: 'toolbar',
-  handleTagSelect: () => ({}),
+  handleTagSelect: undefined,
 };
 
 /**