diff --git a/packages/avatars/demo/avatar.stories.mdx b/packages/avatars/demo/avatar.stories.mdx index e68a4e7b0a3..d22e010636e 100644 --- a/packages/avatars/demo/avatar.stories.mdx +++ b/packages/avatars/demo/avatar.stories.mdx @@ -21,6 +21,7 @@ import README from '../README.md'; name="Avatar" args={{ type: TYPE[1] }} argTypes={{ + 'aria-hidden': { control: 'boolean' }, backgroundColor: { control: 'color' }, badge: { control: 'text' }, foregroundColor: { control: 'color' }, diff --git a/packages/avatars/src/elements/Avatar.spec.tsx b/packages/avatars/src/elements/Avatar.spec.tsx index fab41bce296..f05cc58dac8 100644 --- a/packages/avatars/src/elements/Avatar.spec.tsx +++ b/packages/avatars/src/elements/Avatar.spec.tsx @@ -95,6 +95,18 @@ describe('Avatar', () => { expect(element).toBeInTheDocument(); }); + it('does not render status with `aria-hidden`', () => { + const label = 'test status'; + const { queryByText } = render( + + + + ); + const element = queryByText(label); + + expect(element).not.toBeInTheDocument(); + }); + it('renders with status and applies default label for available status', () => { const { getByText } = render( diff --git a/packages/avatars/src/elements/Avatar.tsx b/packages/avatars/src/elements/Avatar.tsx index cb5667906d3..94f78b13692 100644 --- a/packages/avatars/src/elements/Avatar.tsx +++ b/packages/avatars/src/elements/Avatar.tsx @@ -22,6 +22,7 @@ import { Text } from './components/Text'; const AvatarComponent = forwardRef( ( { + 'aria-hidden': ariaHidden, backgroundColor, badge, children, @@ -59,7 +60,7 @@ const AvatarComponent = forwardRef( return ['status'].concat(statusMessage || []).join(': '); }, [computedStatus, badge]); - const shouldValidate = computedStatus !== undefined; + const shouldValidate = computedStatus !== undefined && ariaHidden !== true; const label = useText( AvatarComponent, { statusLabel }, @@ -78,6 +79,7 @@ const AvatarComponent = forwardRef( $backgroundColor={backgroundColor} $foregroundColor={foregroundColor} aria-atomic="true" + aria-hidden={ariaHidden} aria-live="polite" {...other} > @@ -89,7 +91,7 @@ const AvatarComponent = forwardRef( $surfaceColor={surfaceColor} as="figcaption" > - + {ariaHidden !== true && } {computedStatus === 'active' ? ( {badge} ) : ( diff --git a/packages/modals/src/elements/Close.tsx b/packages/modals/src/elements/Close.tsx index 422918b0ce7..78f5c2462e6 100644 --- a/packages/modals/src/elements/Close.tsx +++ b/packages/modals/src/elements/Close.tsx @@ -26,7 +26,13 @@ export const Close = forwardRef setIsCloseButtonPresent(false); }); - const ariaLabel = useText(Close, props, 'aria-label', 'Close modal'); + const ariaLabel = useText( + Close, + props, + 'aria-label', + 'Close modal', + props['aria-describedby'] === undefined /* has tooltip */ + ); return ( setIsCloseButtonPresent(false); }); - const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close drawer'); + const ariaLabel = useText( + CloseComponent, + props, + 'aria-label', + 'Close drawer', + props['aria-describedby'] === undefined /* has tooltip */ + ); return ( { const { getCloseProps } = useTooltipDialogContext(); - const ariaLabel = useText(CloseComponent, props, 'aria-label', 'Close tooltip'); + const ariaLabel = useText( + CloseComponent, + props, + 'aria-label', + 'Close tooltip', + props['aria-describedby'] === undefined /* has tooltip */ + ); return ( diff --git a/packages/notifications/src/elements/toaster/styled.ts b/packages/notifications/src/elements/toaster/styled.ts index 1e6e2922b34..97cb4553a06 100644 --- a/packages/notifications/src/elements/toaster/styled.ts +++ b/packages/notifications/src/elements/toaster/styled.ts @@ -13,7 +13,7 @@ export const TRANSITION_CLASS = 'garden-toast-transition'; const DEFAULT_DURATION = '400ms'; -export const StyledFadeInTransition = styled.div<{ $isHidden: boolean; placement: Placement }>` +export const StyledFadeInTransition = styled.div<{ $isHidden: boolean; $placement: Placement }>` transition: opacity ${DEFAULT_DURATION} ease-in 300ms; opacity: ${p => (p.$isHidden ? '0 !important' : 1)}; margin-bottom: ${p => p.theme.space.base * 2}px; @@ -24,9 +24,9 @@ export const StyledFadeInTransition = styled.div<{ $isHidden: boolean; placement transform: translateY( ${props => { if ( - props.placement === 'bottom-start' || - props.placement === 'bottom' || - props.placement === 'bottom-end' + props.$placement === 'bottom-start' || + props.$placement === 'bottom' || + props.$placement === 'bottom-end' ) { return '100px'; }