From 909ad4b85e00126914a6fb80e041168dbeb4da04 Mon Sep 17 00:00:00 2001
From: Likita <likitarai1@gmail.com>
Date: Wed, 28 Apr 2021 11:33:57 +0530
Subject: [PATCH 1/5] Add accessibility section to Badges #22070

---
 .../components/badges/AccessibleBadges.js     | 38 +++++++++++++++++++
 docs/src/pages/components/badges/badges.md    | 11 +++++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/components/badges/AccessibleBadges.js

diff --git a/docs/src/pages/components/badges/AccessibleBadges.js b/docs/src/pages/components/badges/AccessibleBadges.js
new file mode 100644
index 00000000000000..70565051ba4894
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index 493a5e280510c3..b36c0c5191c002 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/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). 

From 11a96c126201fd396116ce605fe07fd3f8dc6d68 Mon Sep 17 00:00:00 2001
From: Likita <likitarai1@gmail.com>
Date: Wed, 28 Apr 2021 12:41:11 +0530
Subject: [PATCH 2/5] Resolved test cases

---
 docs/src/pages/components/badges/badges.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index b36c0c5191c002..72a7e7103bf5ab 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/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}}
@@ -69,9 +69,9 @@ import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 
 ## Accessibility
 
-- `Badges` can be given accessible label using `aria-label` or `aria-labelledby`. 
+- `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). 
+- 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).

From 45a2d60dcc241c492fcb8c061ae1564062568600 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 2 May 2021 16:36:38 +0200
Subject: [PATCH 3/5] polish demos on the page

---
 .../components/badges/AccessibleBadges.js     | 48 ++++++++-----------
 .../components/badges/AccessibleBadges.tsx    | 30 ++++++++++++
 .../pages/components/badges/BadgeAlignment.js |  1 +
 docs/src/pages/components/badges/BadgeMax.js  | 29 +++++------
 docs/src/pages/components/badges/BadgeMax.tsx | 29 +++++------
 .../pages/components/badges/BadgeOverlap.js   | 18 +++----
 .../pages/components/badges/BadgeOverlap.tsx  | 18 +++----
 .../components/badges/BadgeVisibility.js      |  2 +
 .../components/badges/BadgeVisibility.tsx     |  2 +
 docs/src/pages/components/badges/DotBadge.js  | 12 +----
 docs/src/pages/components/badges/DotBadge.tsx | 12 +----
 .../pages/components/badges/ShowZeroBadge.js  | 12 ++---
 .../pages/components/badges/ShowZeroBadge.tsx | 12 ++---
 .../pages/components/badges/SimpleBadge.js    | 15 ++----
 .../pages/components/badges/SimpleBadge.tsx   | 15 ++----
 .../pages/components/badges/UnstyledBadge.js  |  8 ++--
 .../pages/components/badges/UnstyledBadge.tsx |  8 ++--
 docs/src/pages/components/badges/badges.md    |  6 +--
 18 files changed, 119 insertions(+), 158 deletions(-)
 create mode 100644 docs/src/pages/components/badges/AccessibleBadges.tsx

diff --git a/docs/src/pages/components/badges/AccessibleBadges.js b/docs/src/pages/components/badges/AccessibleBadges.js
index 70565051ba4894..c1aeee3be4b040 100644
--- a/docs/src/pages/components/badges/AccessibleBadges.js
+++ b/docs/src/pages/components/badges/AccessibleBadges.js
@@ -1,38 +1,30 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import IconButton from '@material-ui/core/IconButton';
 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`;
+function notificationsLabel(count) {
+  if (count === 0) {
+    return 'no notifications';
   }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+const preventDefault = (event) => event.preventDefault();
 
+export default function AccessibleBadges() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 2,
-        },
-      }}
+    <IconButton
+      aria-label={notificationsLabel(100)}
+      href="/inbox"
+      onClick={preventDefault}
     >
-      <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>
+      <Badge badgeContent={100} color="secondary">
+        <MailIcon />
+      </Badge>
+    </IconButton>
   );
 }
diff --git a/docs/src/pages/components/badges/AccessibleBadges.tsx b/docs/src/pages/components/badges/AccessibleBadges.tsx
new file mode 100644
index 00000000000000..4c0e19a9842586
--- /dev/null
+++ b/docs/src/pages/components/badges/AccessibleBadges.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+function notificationsLabel(count: number) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
+
+export default function AccessibleBadges() {
+  return (
+    <IconButton
+      aria-label={notificationsLabel(100)}
+      href="/inbox"
+      onClick={preventDefault}
+    >
+      <Badge badgeContent={100} color="secondary">
+        <MailIcon />
+      </Badge>
+    </IconButton>
+  );
+}
diff --git a/docs/src/pages/components/badges/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js
index 2515c5f6214d2e..5caca2d0eb8928 100644
--- a/docs/src/pages/components/badges/BadgeAlignment.js
+++ b/docs/src/pages/components/badges/BadgeAlignment.js
@@ -68,6 +68,7 @@ export default function BadgeAlignment() {
         sx={{
           display: 'flex',
           justifyContent: 'center',
+          color: 'action.active',
           '& > *': {
             margin: 2,
           },
diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js
index ad07e4bf58992d..4197b9330815fb 100644
--- a/docs/src/pages/components/badges/BadgeMax.js
+++ b/docs/src/pages/components/badges/BadgeMax.js
@@ -1,25 +1,20 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const defaultProps = {
-  color: 'secondary',
-  children: <MailIcon />,
-};
-
 export default function BadgeMax() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 2,
-        },
-      }}
-    >
-      <Badge badgeContent={99} {...defaultProps} />
-      <Badge badgeContent={100} {...defaultProps} />
-      <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </Box>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
+      <Badge color="secondary" badgeContent={99}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={100}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={1000} max={999}>
+        <MailIcon />
+      </Badge>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeMax.tsx b/docs/src/pages/components/badges/BadgeMax.tsx
index 0a01bf2f79d3ef..4197b9330815fb 100644
--- a/docs/src/pages/components/badges/BadgeMax.tsx
+++ b/docs/src/pages/components/badges/BadgeMax.tsx
@@ -1,25 +1,20 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const defaultProps = {
-  color: 'secondary' as 'secondary',
-  children: <MailIcon />,
-};
-
 export default function BadgeMax() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 2,
-        },
-      }}
-    >
-      <Badge badgeContent={99} {...defaultProps} />
-      <Badge badgeContent={100} {...defaultProps} />
-      <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </Box>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
+      <Badge color="secondary" badgeContent={99}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={100}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={1000} max={999}>
+        <MailIcon />
+      </Badge>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js
index f2470da271f453..0444d60409ac5d 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.js
+++ b/docs/src/pages/components/badges/BadgeOverlap.js
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 
 const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
 const shapeCircleStyles = { borderRadius: '50%' };
+const rectangle = <Box component="span" sx={shapeStyles} />;
+const circle = (
+  <Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
+);
 
 export default function BadgeOverlap() {
-  const rectangle = <Box sx={shapeStyles} />;
-  const circle = <Box sx={{ ...shapeStyles, ...shapeCircleStyles }} />;
-
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 1,
-        },
-      }}
-    >
+    <Stack spacing={3} direction="row">
       <Badge color="secondary" badgeContent=" ">
         {rectangle}
       </Badge>
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
       <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
         {circle}
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.tsx b/docs/src/pages/components/badges/BadgeOverlap.tsx
index f2470da271f453..0444d60409ac5d 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.tsx
+++ b/docs/src/pages/components/badges/BadgeOverlap.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 
 const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
 const shapeCircleStyles = { borderRadius: '50%' };
+const rectangle = <Box component="span" sx={shapeStyles} />;
+const circle = (
+  <Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
+);
 
 export default function BadgeOverlap() {
-  const rectangle = <Box sx={shapeStyles} />;
-  const circle = <Box sx={{ ...shapeStyles, ...shapeCircleStyles }} />;
-
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 1,
-        },
-      }}
-    >
+    <Stack spacing={3} direction="row">
       <Badge color="secondary" badgeContent=" ">
         {rectangle}
       </Badge>
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
       <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
         {circle}
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js
index 76a67660b4e922..e927e0275b7638 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.js
+++ b/docs/src/pages/components/badges/BadgeVisibility.js
@@ -20,6 +20,7 @@ export default function BadgeVisibility() {
   return (
     <Box
       sx={{
+        color: 'action.active',
         display: 'flex',
         flexDirection: 'column',
         '& > *': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
           <MailIcon />
         </Badge>
         <FormControlLabel
+          sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
diff --git a/docs/src/pages/components/badges/BadgeVisibility.tsx b/docs/src/pages/components/badges/BadgeVisibility.tsx
index 76a67660b4e922..e927e0275b7638 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.tsx
+++ b/docs/src/pages/components/badges/BadgeVisibility.tsx
@@ -20,6 +20,7 @@ export default function BadgeVisibility() {
   return (
     <Box
       sx={{
+        color: 'action.active',
         display: 'flex',
         flexDirection: 'column',
         '& > *': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
           <MailIcon />
         </Badge>
         <FormControlLabel
+          sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js
index 6b029eddc1c251..a1e47bef282f5a 100644
--- a/docs/src/pages/components/badges/DotBadge.js
+++ b/docs/src/pages/components/badges/DotBadge.js
@@ -2,23 +2,13 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
-import Typography from '@material-ui/core/Typography';
 
 export default function DotBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Box sx={{ color: 'action.active' }}>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="secondary" variant="dot">
-        <Typography>Typography</Typography>
-      </Badge>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/badges/DotBadge.tsx b/docs/src/pages/components/badges/DotBadge.tsx
index 6b029eddc1c251..a1e47bef282f5a 100644
--- a/docs/src/pages/components/badges/DotBadge.tsx
+++ b/docs/src/pages/components/badges/DotBadge.tsx
@@ -2,23 +2,13 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
-import Typography from '@material-ui/core/Typography';
 
 export default function DotBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Box sx={{ color: 'action.active' }}>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="secondary" variant="dot">
-        <Typography>Typography</Typography>
-      </Badge>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.js b/docs/src/pages/components/badges/ShowZeroBadge.js
index 27b3c9176782ef..5f6a05f43046ef 100644
--- a/docs/src/pages/components/badges/ShowZeroBadge.js
+++ b/docs/src/pages/components/badges/ShowZeroBadge.js
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function ShowZeroBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge color="secondary" badgeContent={0}>
         <MailIcon />
       </Badge>
       <Badge color="secondary" badgeContent={0} showZero>
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.tsx b/docs/src/pages/components/badges/ShowZeroBadge.tsx
index 27b3c9176782ef..5f6a05f43046ef 100644
--- a/docs/src/pages/components/badges/ShowZeroBadge.tsx
+++ b/docs/src/pages/components/badges/ShowZeroBadge.tsx
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function ShowZeroBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge color="secondary" badgeContent={0}>
         <MailIcon />
       </Badge>
       <Badge color="secondary" badgeContent={0} showZero>
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js
index 256c2eb9734cd1..29695efc06fe1f 100644
--- a/docs/src/pages/components/badges/SimpleBadge.js
+++ b/docs/src/pages/components/badges/SimpleBadge.js
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
-      <Badge badgeContent={4} color="primary">
-        <MailIcon />
-      </Badge>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge badgeContent={4} color="secondary">
         <MailIcon />
       </Badge>
       <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx
index 256c2eb9734cd1..29695efc06fe1f 100644
--- a/docs/src/pages/components/badges/SimpleBadge.tsx
+++ b/docs/src/pages/components/badges/SimpleBadge.tsx
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
-      <Badge badgeContent={4} color="primary">
-        <MailIcon />
-      </Badge>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge badgeContent={4} color="secondary">
         <MailIcon />
       </Badge>
       <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/UnstyledBadge.js b/docs/src/pages/components/badges/UnstyledBadge.js
index 0c95d7428c80e7..1fe055f854787b 100644
--- a/docs/src/pages/components/badges/UnstyledBadge.js
+++ b/docs/src/pages/components/badges/UnstyledBadge.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -58,6 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)`
 function BadgeContent() {
   return (
     <Box
+      component="span"
       sx={{
         width: 42,
         height: 42,
@@ -72,13 +74,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Box>
-      <StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/UnstyledBadge.tsx b/docs/src/pages/components/badges/UnstyledBadge.tsx
index 0c95d7428c80e7..1fe055f854787b 100644
--- a/docs/src/pages/components/badges/UnstyledBadge.tsx
+++ b/docs/src/pages/components/badges/UnstyledBadge.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -58,6 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)`
 function BadgeContent() {
   return (
     <Box
+      component="span"
       sx={{
         width: 42,
         height: 42,
@@ -72,13 +74,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Box>
-      <StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index 72a7e7103bf5ab..e7f5a3ebcab63d 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/docs/src/pages/components/badges/badges.md
@@ -69,9 +69,7 @@ import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 
 ## Accessibility
 
-- `Badges` can be given accessible label using `aria-label` or `aria-labelledby`.
-- You can provide description using `aria-describedby`.
+You can't rely on the content of the badge to be announced correctly.
+You should provide a full description, for instance, with `aria-label`:
 
 {{"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).

From 3d05a45bf08ec41856cb14a4f825d250bd092e7c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 2 May 2021 19:17:09 +0200
Subject: [PATCH 4/5] rerun ci


From 7349e2ace4b1671c91b14b59aaa971ae7f6448ad Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 5 May 2021 21:21:11 +0200
Subject: [PATCH 5/5] Sebastian's review

---
 docs/src/pages/components/badges/AccessibleBadges.js  | 8 +-------
 docs/src/pages/components/badges/AccessibleBadges.tsx | 8 +-------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/docs/src/pages/components/badges/AccessibleBadges.js b/docs/src/pages/components/badges/AccessibleBadges.js
index c1aeee3be4b040..e23988ebafe43d 100644
--- a/docs/src/pages/components/badges/AccessibleBadges.js
+++ b/docs/src/pages/components/badges/AccessibleBadges.js
@@ -13,15 +13,9 @@ function notificationsLabel(count) {
   return `${count} notifications`;
 }
 
-const preventDefault = (event) => event.preventDefault();
-
 export default function AccessibleBadges() {
   return (
-    <IconButton
-      aria-label={notificationsLabel(100)}
-      href="/inbox"
-      onClick={preventDefault}
-    >
+    <IconButton aria-label={notificationsLabel(100)}>
       <Badge badgeContent={100} color="secondary">
         <MailIcon />
       </Badge>
diff --git a/docs/src/pages/components/badges/AccessibleBadges.tsx b/docs/src/pages/components/badges/AccessibleBadges.tsx
index 4c0e19a9842586..383abe77e0973f 100644
--- a/docs/src/pages/components/badges/AccessibleBadges.tsx
+++ b/docs/src/pages/components/badges/AccessibleBadges.tsx
@@ -13,15 +13,9 @@ function notificationsLabel(count: number) {
   return `${count} notifications`;
 }
 
-const preventDefault = (event: React.SyntheticEvent) => event.preventDefault();
-
 export default function AccessibleBadges() {
   return (
-    <IconButton
-      aria-label={notificationsLabel(100)}
-      href="/inbox"
-      onClick={preventDefault}
-    >
+    <IconButton aria-label={notificationsLabel(100)}>
       <Badge badgeContent={100} color="secondary">
         <MailIcon />
       </Badge>