diff --git a/packages/@react-spectrum/badge/docs/Badge.mdx b/packages/@react-spectrum/badge/docs/Badge.mdx index 8175b560aaf..91af460e79b 100644 --- a/packages/@react-spectrum/badge/docs/Badge.mdx +++ b/packages/@react-spectrum/badge/docs/Badge.mdx @@ -51,13 +51,14 @@ import {Text} from '@react-spectrum/text'; import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle'; - + Icon + Label ``` ### Accessibility -If a visible label isn't specified, an `aria-label` must be provided for accessibility. +If a visible label isn't specified, an `aria-label` must be provided to the icon for accessibility. + ### Internationalization diff --git a/packages/@react-spectrum/badge/stories/Badge.stories.tsx b/packages/@react-spectrum/badge/stories/Badge.stories.tsx index e92b740feda..d1934b06f51 100644 --- a/packages/@react-spectrum/badge/stories/Badge.stories.tsx +++ b/packages/@react-spectrum/badge/stories/Badge.stories.tsx @@ -37,17 +37,17 @@ export const Default: BadgeStory = { }; export const WithIcon: BadgeStory = { - args: {children: <>Licensed, variant: 'positive'}, + args: {children: <>Licensed, variant: 'positive'}, name: 'With icon' }; export const WithIconReverseOrder: BadgeStory = { - args: {children: <>Licensed, variant: 'positive'}, + args: {children: <>Licensed, variant: 'positive'}, name: 'With icon, order reversed' }; export const IconOnly: BadgeStory = { - args: {children: , variant: 'positive', 'aria-label': 'Licensed'}, + args: {children: , variant: 'positive'}, name: 'Icon only' };