fix(ui-progress,ui-side-nav-bar): improve a11y for Progress and SideNavBar examples

packages/ui-progress/src/ProgressBar/README.md

@@ -353,3 +353,14 @@ The `shouldAnimate` prop makes the progress bar animate the transition between v
 
   render(<Example />)
   ```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>If the progress bar conveys more information than just an approximate progress of a task (for example "5 or 23 items downloaded") then show this information as text too.</Figure.Item>
+  </Figure>
+</Guidelines>
+```

packages/ui-progress/src/ProgressCircle/README.md

@@ -206,3 +206,14 @@ type: example
   valueNow={33}
 />
 ```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>If the progress bar conveys more information than just an approximate progress of a task (for example "5 or 23 items downloaded") then show this information as text too.</Figure.Item>
+  </Figure>
+</Guidelines>
+```

packages/ui-side-nav-bar/src/SideNavBar/README.md

@@ -43,7 +43,15 @@ type: example
         href="#"
       />
       <SideNavBar.Item
-        icon={<Badge count={99}><IconInboxLine /></Badge>}
+        icon={<Badge count={99}
+                     formatOutput={function (formattedCount) {
+                       return (
+                         <AccessibleContent alt={`You have ${formattedCount} unread messages.`}>
+                           {formattedCount}
+                         </AccessibleContent>
+                       )
+                     }}
+        ><IconInboxLine /></Badge>}
         label="Inbox"
         href="#"
       />