diff --git a/docs/src/pages/components/badges/AccessibleBadges.js b/docs/src/pages/components/badges/AccessibleBadges.js
new file mode 100644
index 00000000000000..e23988ebafe43d
--- /dev/null
+++ b/docs/src/pages/components/badges/AccessibleBadges.js
@@ -0,0 +1,24 @@
+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) {
+ if (count === 0) {
+ return 'no notifications';
+ }
+ if (count > 99) {
+ return 'more than 99 notifications';
+ }
+ return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs/src/pages/components/badges/AccessibleBadges.tsx b/docs/src/pages/components/badges/AccessibleBadges.tsx
new file mode 100644
index 00000000000000..383abe77e0973f
--- /dev/null
+++ b/docs/src/pages/components/badges/AccessibleBadges.tsx
@@ -0,0 +1,24 @@
+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`;
+}
+
+export default function AccessibleBadges() {
+ return (
+
+
+
+
+
+ );
+}
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: ,
-};
-
export default function BadgeMax() {
return (
- *': {
- margin: 2,
- },
- }}
- >
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
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: ,
-};
-
export default function BadgeMax() {
return (
- *': {
- margin: 2,
- },
- }}
- >
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
}
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 = ;
+const circle = (
+
+);
export default function BadgeOverlap() {
- const rectangle = ;
- const circle = ;
-
return (
- *': {
- margin: 1,
- },
- }}
- >
+
{rectangle}
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
{circle}
-
+
);
}
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 = ;
+const circle = (
+
+);
export default function BadgeOverlap() {
- const rectangle = ;
- const circle = ;
-
return (
- *': {
- margin: 1,
- },
- }}
- >
+
{rectangle}
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
{circle}
-
+
);
}
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 (
*': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
}
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 (
*': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
}
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 (
- *': {
- m: 1,
- },
- }}
- >
+
-
- Typography
-
);
}
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 (
- *': {
- m: 1,
- },
- }}
- >
+
-
- Typography
-
);
}
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 (
- *': {
- m: 1,
- },
- }}
- >
+
-
+
);
}
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 (
- *': {
- m: 1,
- },
- }}
- >
+
-
+
);
}
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 (
- *': {
- m: 1,
- },
- }}
- >
-
-
-
+
-
+
);
}
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 (
- *': {
- m: 1,
- },
- }}
- >
-
-
-
+
-
+
);
}
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 (
-
+
+
-
+
);
}
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 (
-
+
+
-
+
);
}
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index 493a5e280510c3..e7f5a3ebcab63d 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/docs/src/pages/components/badges/badges.md
@@ -66,3 +66,10 @@ import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
```
{{"demo": "pages/components/badges/UnstyledBadge.js"}}
+
+## Accessibility
+
+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"}}