fix(avatars,modals,notifications): prevent dev console warnings (#2040)

Author: jzempel

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' },

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(
+        <Avatar aria-hidden badge="0" statusLabel={label}>
+          <img alt="" />
+        </Avatar>
+      );
+      const element = queryByText(label);
+
+      expect(element).not.toBeInTheDocument();
+    });
+
     it('renders with status and applies default label for available status', () => {
       const { getByText } = render(
         <Avatar status="available">

packages/avatars/src/elements/Avatar.tsx

@@ -22,6 +22,7 @@ import { Text } from './components/Text';
 const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
   (
     {
+      'aria-hidden': ariaHidden,
       backgroundColor,
       badge,
       children,
@@ -59,7 +60,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
       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<HTMLElement, IAvatarProps>(
         $backgroundColor={backgroundColor}
         $foregroundColor={foregroundColor}
         aria-atomic="true"
+        aria-hidden={ariaHidden}
         aria-live="polite"
         {...other}
       >
@@ -89,7 +91,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
             $surfaceColor={surfaceColor}
             as="figcaption"
           >
-            <Span hidden>{label}</Span>
+            {ariaHidden !== true && <Span hidden>{label}</Span>}
             {computedStatus === 'active' ? (
               <span aria-hidden>{badge}</span>
             ) : (

packages/modals/src/elements/Close.tsx

@@ -26,7 +26,13 @@ export const Close = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButt
       return () => 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 (
       <StyledClose

packages/modals/src/elements/Drawer/Close.tsx

@@ -21,7 +21,13 @@ const CloseComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
       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 (
       <StyledDrawerClose

packages/modals/src/elements/TooltipDialog/Close.tsx

@@ -15,7 +15,13 @@ const CloseComponent = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLBu
   (props, ref) => {
     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 (
       <StyledTooltipDialogClose

packages/notifications/src/elements/toaster/ToastSlot.tsx

@@ -88,7 +88,7 @@ export const ToastSlot = ({ toasts, placement, zIndex, limit, ...props }: IToast
             >
               <StyledFadeInTransition
                 ref={transitionRef}
-                placement={placement}
+                $placement={placement}
                 $isHidden={isHidden(index)}
               >
                 <Toast toast={toast} pauseTimers={pauseTimers || isHidden(index)} />

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';
         }