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"}}