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"
>
- {label}
+ {ariaHidden !== true && {label}}
{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';
}