Add accessibility section to Badges mui#22070

docs/src/pages/components/badges/AccessibleBadges.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+export default function SimpleBadge() {
+  const notificationsCount = 998;
+  function notificationsLabel(count) {
+    if (count === 0) {
+      return 'notifications';
+    }
+    if (count > 99) {
+      return '99 plus notifications';
+    }
+    return `${count} notifications`;
+  }
+
+  return (
+    <Box
+      sx={{
+        '& > *': {
+          margin: 2,
+        },
+      }}
+    >
+      <a aria-label={notificationsLabel(notificationsCount)} href="/notifications">
+        <Badge
+          aria-labelledby="badge"
+          aria-describedby="notificationCount"
+          badgeContent={notificationsCount}
+          color="primary"
+        >
+          <MailIcon style={{ color: 'black' }} titleAccess="notifications" />
+        </Badge>
+      </a>
+    </Box>
+  );
+}

docs/src/pages/components/badges/badges.md

@@ -51,7 +51,7 @@ You can use the `overlap` prop to place the badge relative to the corner of the
 {{"demo": "pages/components/badges/BadgeOverlap.js"}}
 
 ## Badge alignment
-
+ 
 You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element.
 
 {{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}}
@@ -66,3 +66,12 @@ import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 ```
 
 {{"demo": "pages/components/badges/UnstyledBadge.js"}}
+
+## Accessibility
+
+- `Badges` can be given accessible label using `aria-label` or `aria-labelledby`. 
+- You can provide description using `aria-describedby`.
+
+{{"demo": "pages/components/badges/AccessibleBadges.js"}}
+
+- If you are using `Badges` with `[role = "status"]` then connect other components properly by setting correct `id`, `aria-controls` and `aria-live`. You can get more info [here](https://www.w3.org/TR/wai-aria-1.1/#status).