microsoft · smhigley · May 23, 2022 · May 5, 2022 · May 5, 2022 · May 5, 2022
diff --git a/change/@fluentui-react-badge-a8f819d6-e17b-4f87-9dd2-68eb2f87f168.json b/change/@fluentui-react-badge-a8f819d6-e17b-4f87-9dd2-68eb2f87f168.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "remove aria-hidden from badge",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -10,12 +10,37 @@
 
 ### Screen Readers
 
-- Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar.
-  General guidance is that the badge icon is marked as “aria-hidden” by default.
+Badge content is exposed as text, and is treated by screen readers as if it were inline content of the control it is associated with. This should provide a reasonable default for most badges that contain plain text, such as the `CounterBadge`.
+
+There are two actions authors should consider taking when using Badge to improve this experience:
+
+1. If the badge contains a custom icon, that icon must be given alternative text with `aria-label`, unless it is purely presentational:
+
+```jsx
+<Badge icon={<PasteIcon aria-label="paste" />} />
+```
+
+2. If the text of the badge itself is not sufficient to convey its meaning, it can either be given additional hidden text, or the parent element given an explicit label:
+
+```jsx
+<button>
+  Inbox
+  <Badge>6<span class="visuallyHidden"> unread messages</span></Badge>
+</button>
+
+<button aria-label="Inbox, 6 unread messages">
+  Inbox
+  <Badge>6</Badge>
+</button>
+```
 
 ### Badge shouldn't rely only on color information
 
-- Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby
+- Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included in the parent's label or description. Alternatively, mark up the Badge as an image with a label:
+
+```jsx
+<Badge role="img" aria-label="Active" appearance="filled" color="brand" />} />
+```
 
 ### Text on Badge
 

@@ -2,7 +2,6 @@
 
 exports[`Badge renders a default state 1`] = `
 <div
-  aria-hidden={true}
   className="fui-Badge"
 >
   Default Badge

@@ -26,7 +26,6 @@ export const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>
     },
     root: getNativeElementProps('div', {
       ref,
-      'aria-hidden': true,
       ...props,
     }),
     icon: resolveShorthand(props.icon),

@@ -2,7 +2,6 @@
 
 exports[`CounterBadge renders a default state 1`] = `
 <div
-  aria-hidden={true}
   className="fui-Badge fui-CounterBadge"
 >
   0

@@ -2,7 +2,6 @@
 
 exports[`PresenceBadge renders a default state 1`] = `
 <div
-  aria-hidden={true}
   className="fui-PresenceBadge"
 >
   <span
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ @@
     exports[`CounterBadge renders a default state 1`] = `
     <div
-      aria-hidden={true}
       className="fui-Badge fui-CounterBadge"
     >
@@ Expand Down @@