@lumx/react 3.9.2-alpha.0 → 3.9.2-alpha.10

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.2-alpha.0",
-        "@lumx/icons": "^3.9.2-alpha.0",
+        "@lumx/core": "^3.9.2-alpha.10",
+        "@lumx/icons": "^3.9.2-alpha.10",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -57,7 +57,7 @@
         "jest-environment-jsdom": "29.1.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "rollup": "2.26.10",
+        "rollup": "2.79.2",
         "rollup-plugin-analyzer": "^3.3.0",
         "rollup-plugin-babel": "^4.4.0",
         "rollup-plugin-cleaner": "^1.0.0",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.2-alpha.0"
+    "version": "3.9.2-alpha.10"
 }

package/src/components/date-picker/DatePickerControlled.tsx

@@ -1,6 +1,6 @@
 import React, { KeyboardEventHandler, forwardRef } from 'react';
 import classNames from 'classnames';
-import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, Toolbar } from '@lumx/react';
+import { DatePickerProps, Emphasis, FlexBox, IconButton, Text, TextField, TextFieldProps, Toolbar } from '@lumx/react';
 import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
@@ -61,36 +61,58 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
     }, [locale, minDate, maxDate, selectedMonth]);
 
-    const selectedYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);
-    const [textFieldYearValue, setTextFieldYearValue] = React.useState(selectedYear);
-    const isYearValid = Number(textFieldYearValue) > 0 && Number(textFieldYearValue) <= 9999;
+    const selectedYear = selectedMonth.getFullYear();
+    const formattedYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);
+    const [currentYear, setCurrentYear] = React.useState(String(selectedYear));
 
     // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
-    const updateMonthOffset = React.useCallback(() => {
-        if (isYearValid) {
-            const yearNumber = selectedMonth.getFullYear();
-            const offset = (Number(textFieldYearValue) - yearNumber) * 12;
-            if (onMonthChange) {
-                onMonthChange(addMonthResetDay(selectedMonth, offset));
+    const updateMonthOffset = React.useCallback(
+        (newYearValue: string) => {
+            const yearNumber = Number(newYearValue);
+            if (yearNumber < 0 && yearNumber >= 9999) {
+                return;
             }
-        }
-    }, [isYearValid, selectedMonth, textFieldYearValue, onMonthChange]);
 
-    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+            const previousYearNumber = selectedMonth.getFullYear();
+            const offset = (yearNumber - previousYearNumber) * 12;
+            onMonthChange?.(addMonthResetDay(selectedMonth, offset));
+        },
+        [selectedMonth, onMonthChange],
+    );
+
+    const onYearChange = React.useCallback<TextFieldProps['onChange']>(
+        (newYearValue, _, event) => {
+            setCurrentYear(newYearValue);
 
-    // Year can only be validated by pressing Enter key or on Blur. The below handles the press Enter key case
-    const handleKeyPress: KeyboardEventHandler = React.useMemo(
-        () => onEnterPressed(updateMonthOffset),
+            // Detect if change is coming from the spin up/down arrows
+            const inputType = (event?.nativeEvent as any)?.inputType;
+            if (
+                // Chrome/Safari
+                !inputType ||
+                // Firefox
+                inputType === 'insertReplacementText'
+            ) {
+                updateMonthOffset(newYearValue);
+            }
+        },
         [updateMonthOffset],
     );
 
-    // Required to update year in the TextField when the user changes year by using prev next month arrows
+    const updateYear = React.useCallback(() => {
+        updateMonthOffset(currentYear);
+    }, [updateMonthOffset, currentYear]);
+
+    const updateYearOnEnterPressed: KeyboardEventHandler = React.useMemo(
+        () => onEnterPressed(updateYear),
+        [updateYear],
+    );
+
+    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });
+
+    // Update current year when selected year changes
     React.useEffect(() => {
-        if (Number(textFieldYearValue) !== selectedMonth.getFullYear()) {
-            setTextFieldYearValue(selectedMonth.getFullYear().toString());
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedMonth]);
+        setCurrentYear(String(selectedYear));
+    }, [selectedYear]);
 
     const prevSelectedMonth = usePreviousValue(selectedMonth);
     const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
@@ -101,7 +123,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
         if (monthHasChanged) setLabelAriaLive('polite');
     }, [monthHasChanged]);
 
-    const label = getYearDisplayName(locale);
+    const yearLabel = getYearDisplayName(locale);
 
     return (
         <div ref={ref} className={`${CLASSNAME}`}>
@@ -137,21 +159,21 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                 vAlign="center"
                                 dir="auto"
                             >
-                                {RegExp(`(.*)(${selectedYear})(.*)`)
+                                {RegExp(`(.*)(${formattedYear})(.*)`)
                                     .exec(monthYear)
                                     ?.slice(1)
                                     .filter((part) => part !== '')
                                     .map((part) =>
-                                        part === selectedYear ? (
+                                        part === formattedYear ? (
                                             <TextField
-                                                value={textFieldYearValue}
-                                                aria-label={label}
-                                                onChange={setTextFieldYearValue}
+                                                value={currentYear}
+                                                aria-label={yearLabel}
+                                                onChange={onYearChange}
                                                 type="number"
                                                 max={9999}
                                                 min={0}
-                                                onBlur={updateMonthOffset}
-                                                onKeyPress={handleKeyPress}
+                                                onBlur={updateYear}
+                                                onKeyPress={updateYearOnEnterPressed}
                                                 key="year"
                                                 className={`${CLASSNAME}__year`}
                                             />

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -145,11 +145,18 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Focus moved to the close button
             const imageLightbox = queries.getImageLightbox();
-            expect(queries.queryCloseButton(imageLightbox)).toHaveFocus();
+            const closeButton = queries.queryCloseButton(imageLightbox);
+            expect(closeButton).toHaveFocus();
+            const tooltip = screen.getByRole('tooltip', { name: 'Close' });
+            expect(tooltip).toBeInTheDocument();
 
             // Image lightbox opened on the correct image
             expect(queries.queryImage(imageLightbox, 'Image 2')).toBeInTheDocument();
 
+            // Close tooltip
+            await userEvent.keyboard('{escape}');
+            expect(tooltip).not.toBeInTheDocument();
+
             // Close on escape
             await userEvent.keyboard('{escape}');
             expect(imageLightbox).not.toBeInTheDocument();

package/src/components/image-lightbox/useImageLightbox.tsx

@@ -41,13 +41,12 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
     const propsRef = React.useRef(props);
 
     React.useEffect(() => {
-        const newProps = { ...props };
-        if (newProps?.images) {
-            newProps.images = newProps.images.map((image) => ({ imgRef: React.createRef(), ...image }));
-        }
-        propsRef.current = newProps;
+        propsRef.current = props;
     }, [props]);
 
+    // Keep reference for each image elements
+    const imageRefsRef = React.useRef<Array<React.RefObject<HTMLImageElement>>>([]);
+
     const currentImageRef = React.useRef<HTMLImageElement>(null);
     const [imageLightboxProps, setImageLightboxProps] = React.useState(
         () => ({ ...EMPTY_PROPS, ...props }) as ManagedProps & P,
@@ -61,8 +60,8 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             if (!currentImage) {
                 return;
             }
-            const currentIndex = propsRef.current?.images?.findIndex(
-                ({ imgRef }) => (imgRef as any)?.current === currentImage,
+            const currentIndex = imageRefsRef.current.findIndex(
+                (imageRef) => imageRef.current === currentImage,
             ) as number;
 
             await startViewTransition({
@@ -83,12 +82,20 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
             // If we find an image inside the trigger, animate it in transition with the opening image
             const triggerImage = triggerImageRefs[activeImageIndex as any]?.current || findImage(triggerElement);
 
-            // Inject the trigger image as loading placeholder for better loading state
-            const imagesWithFallbackSize = propsRef.current?.images?.map((image, idx) => {
-                if (triggerImage && idx === activeImageIndex && !image.loadingPlaceholderImageRef) {
-                    return { ...image, loadingPlaceholderImageRef: { current: triggerImage } };
+            // Inject refs to improve transition and loading style
+            const images = propsRef.current?.images?.map((image, idx) => {
+                // Get or create image reference
+                let imgRef = imageRefsRef.current[idx];
+                if (!imgRef) {
+                    imgRef = React.createRef();
+                    imageRefsRef.current[idx] = imgRef;
                 }
-                return image;
+
+                // Try to use the trigger image as the loading placeholder
+                const loadingPlaceholderImageRef =
+                    triggerImage && idx === activeImageIndex ? { current: triggerImage } : undefined;
+
+                return { loadingPlaceholderImageRef, ...image, imgRef };
             });
 
             await startViewTransition({
@@ -104,7 +111,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                             close();
                             prevProps?.onClose?.();
                         },
-                        images: imagesWithFallbackSize,
+                        images,
                         activeImageIndex: activeImageIndex || 0,
                     }));
                 },

package/src/components/popover/Popover.tsx

@@ -15,7 +15,7 @@ import { skipRender } from '@lumx/react/utils/skipRender';
 
 import { useRestoreFocusOnClose } from './useRestoreFocusOnClose';
 import { usePopoverStyle } from './usePopoverStyle';
-import { Elevation, FitAnchorWidth, Offset, Placement } from './constants';
+import { Elevation, FitAnchorWidth, Offset, Placement, POPOVER_ZINDEX } from './constants';
 
 /**
  * Defines the props of the component.
@@ -88,7 +88,7 @@ const DEFAULT_PROPS: Partial<PopoverProps> = {
     placement: Placement.AUTO,
     focusAnchorOnClose: true,
     usePortal: true,
-    zIndex: 9999,
+    zIndex: POPOVER_ZINDEX,
 };
 
 /** Method to render the popover inside a portal if usePortal is true */

package/src/components/popover/constants.ts

@@ -55,3 +55,8 @@ export type FitAnchorWidth = ValueOf<typeof FitAnchorWidth>;
  * Arrow size (in pixel).
  */
 export const ARROW_SIZE = 14;
+
+/**
+ * Popover default z-index
+ */
+export const POPOVER_ZINDEX = 9999;

package/src/components/popover/usePopoverStyle.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { usePopper } from 'react-popper';
 import memoize from 'lodash/memoize';
 import { detectOverflow } from '@popperjs/core';
 
 import { DOCUMENT, WINDOW } from '@lumx/react/constants';
 import { PopoverProps } from '@lumx/react/components/popover/Popover';
+import { usePopper } from '@lumx/react/hooks/usePopper';
 import { ARROW_SIZE, FitAnchorWidth, Placement } from './constants';
 
 /**
@@ -104,12 +104,6 @@ export function usePopoverStyle({
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
 
-    if (navigator.userAgent.includes('jsdom')) {
-        // Skip all logic; we don't need popover positioning in jsdom.
-        return { styles: {}, attributes: {}, isPositioned: true, popperElement, setPopperElement };
-    }
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
 
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
@@ -142,16 +136,13 @@ export function usePopoverStyle({
         );
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { styles, attributes, state, update } = usePopper(anchorRef.current, popperElement, { placement, modifiers });
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         update?.();
     }, [children, update]);
 
     const position = state?.placement ?? placement;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const popoverStyle = useMemo(() => {
         const newStyles = { ...style, ...styles.popper, zIndex };
 

package/src/components/text-field/TextField.tsx

@@ -68,6 +68,8 @@ export interface TextFieldProps extends GenericProps, HasTheme {
     placeholder?: string;
     /** Reference to the wrapper. */
     textFieldRef?: Ref<HTMLDivElement>;
+    /** Native input type (only when `multiline` is disabled). */
+    type?: React.ComponentProps<'input'>['type'];
     /** Value. */
     value?: string;
     /** On blur callback. */
@@ -160,7 +162,7 @@ interface InputNativeProps {
     maxLength?: number;
     placeholder?: string;
     rows: number;
-    type: string;
+    type: TextFieldProps['type'];
     name?: string;
     value?: string;
     setFocus(focus: boolean): void;

package/src/components/tooltip/Tooltip.stories.tsx

@@ -2,8 +2,10 @@ import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
 import React, { useState } from 'react';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
 
 const placements = [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT];
+const CLOSE_MODES = ['hide', 'unmount'];
 
 export default {
     title: 'LumX components/tooltip/Tooltip',
@@ -11,6 +13,9 @@ export default {
     args: Tooltip.defaultProps,
     argTypes: {
         placement: getSelectArgType(placements),
+        children: { control: false },
+        closeMode: { control: { type: 'inline-radio' }, options: CLOSE_MODES },
+        ariaLinkMode: { control: { type: 'inline-radio' }, options: ARIA_LINK_MODES },
     },
     decorators: [
         // Force minimum chromatic screen size to make sure the dialog appears in view.

package/src/components/tooltip/Tooltip.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Button, IconButton } from '@lumx/react';
-import { screen, render, waitFor } from '@testing-library/react';
+import { Button } from '@lumx/react';
+import { screen, render } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import userEvent from '@testing-library/user-event';
@@ -48,27 +48,20 @@ describe(`<${Tooltip.displayName}>`, () => {
                 forceOpen: true,
             });
             expect(tooltip).toBeInTheDocument();
+            // Default placement
+            expect(tooltip).toHaveAttribute('data-popper-placement', 'bottom');
             expect(anchorWrapper).toBeInTheDocument();
-            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
-        it('should wrap unknown children and not add aria-describedby when closed', async () => {
-            const { anchorWrapper } = await setup({
+        it('should render with custom placement', async () => {
+            const { tooltip } = await setup({
                 label: 'Tooltip label',
                 children: 'Anchor',
-                forceOpen: false,
-            });
-            expect(anchorWrapper).not.toHaveAttribute('aria-describedby');
-        });
-
-        it('should not wrap Button and not add aria-describedby when closed', async () => {
-            await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                forceOpen: false,
+                forceOpen: true,
+                placement: 'top',
             });
-            const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button).not.toHaveAttribute('aria-describedby');
+            // Custom placement
+            expect(tooltip).toHaveAttribute('data-popper-placement', 'top');
         });
 
         it('should not wrap Button', async () => {
@@ -83,35 +76,6 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
         });
 
-        it('should not add aria-describedby if button label is the same as tooltip label', async () => {
-            const label = 'Tooltip label';
-            render(<IconButton label={label} tooltipProps={{ forceOpen: true }} />);
-            const tooltip = screen.queryByRole('tooltip', { name: label });
-            expect(tooltip).toBeInTheDocument();
-            const button = screen.queryByRole('button', { name: label });
-            expect(button).not.toHaveAttribute('aria-describedby');
-        });
-
-        it('should keep anchor aria-describedby if button label is the same as tooltip label', async () => {
-            const label = 'Tooltip label';
-            render(<IconButton label={label} aria-describedby=":header-1:" tooltipProps={{ forceOpen: true }} />);
-            const tooltip = screen.queryByRole('tooltip', { name: label });
-            expect(tooltip).toBeInTheDocument();
-            const button = screen.queryByRole('button', { name: label });
-            expect(button).toHaveAttribute('aria-describedby', ':header-1:');
-        });
-
-        it('should concat aria-describedby if already exists', async () => {
-            const { tooltip } = await setup({
-                label: 'Tooltip label',
-                children: <Button aria-describedby=":header-1:">Anchor</Button>,
-                forceOpen: true,
-            });
-            expect(tooltip).toBeInTheDocument();
-            const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button).toHaveAttribute('aria-describedby', `:header-1: ${tooltip?.id}`);
-        });
-
         it('should wrap disabled Button', async () => {
             const { tooltip, anchorWrapper } = await setup({
                 label: 'Tooltip label',
@@ -159,18 +123,166 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(ref.current === element).toBe(true);
         });
 
-        it.only('should render in closeMode=hide', async () => {
-            const { tooltip, anchorWrapper } = await setup({
-                label: 'Tooltip label',
-                children: <Button>Anchor</Button>,
-                closeMode: 'hide',
+        describe('closeMode="hide"', () => {
+            it('should not render with empty label', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: undefined,
+                    forceOpen: true,
+                    closeMode: 'hide',
+                });
+                expect(tooltip).not.toBeInTheDocument();
+                expect(anchorWrapper).not.toBeInTheDocument();
+            });
+
+            it('should render hidden', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    children: <Button>Anchor</Button>,
+                    closeMode: 'hide',
+                    forceOpen: false,
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
+
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                await userEvent.hover(anchor);
+                expect(tooltip).not.toHaveClass('lumx-tooltip--is-hidden');
+            });
+        });
+
+        describe('ariaLinkMode="aria-describedby"', () => {
+            it('should add aria-describedby on anchor on open', async () => {
+                await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-describedby=":description1:">Anchor</Button>,
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-describedby', ':description1:');
+
+                await userEvent.hover(anchor);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
+            });
+
+            it('should always add aria-describedby on anchor with closeMode="hide"', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-describedby=":description1:">Anchor</Button>,
+                    closeMode: 'hide',
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
+            });
+
+            it('should skip aria-describedby if anchor has label', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: true,
+                    children: (
+                        <Button aria-describedby=":description1:" aria-label="Tooltip label">
+                            Anchor
+                        </Button>
+                    ),
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', `:description1:`);
+            });
+
+            it('should add aria-describedby on anchor wrapper on open', async () => {
+                const { anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                });
+                expect(anchorWrapper).not.toHaveAttribute('aria-describedby');
+
+                await userEvent.hover(anchorWrapper as any);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            });
+
+            it('should always add aria-describedby on anchor wrapper with closeMode="hide"', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    closeMode: 'hide',
+                });
+                expect(anchorWrapper).toHaveAttribute('aria-describedby', `${tooltip?.id}`);
+            });
+        });
+
+        describe('ariaLinkMode="aria-labelledby"', () => {
+            it('should add aria-labelledby on anchor on open', async () => {
+                await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-labelledby', ':label1:');
+
+                await userEvent.hover(anchor);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
+            });
+
+            it('should always add aria-labelledby on anchor with closeMode="hide"', async () => {
+                const label = 'Tooltip label';
+                const { tooltip } = await setup({
+                    label,
+                    forceOpen: false,
+                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
+                    ariaLinkMode: 'aria-labelledby',
+                    closeMode: 'hide',
+                });
+                const anchor = screen.queryByRole('button', { name: label });
+                expect(anchor).toBeInTheDocument();
+                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
+            });
+
+            it('should skip aria-labelledby if anchor has label', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: true,
+                    children: (
+                        <Button aria-labelledby=":label1:" aria-label="Tooltip label">
+                            Anchor
+                        </Button>
+                    ),
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', `:label1:`);
+            });
+
+            it('should add aria-labelledby on anchor wrapper on open', async () => {
+                const { anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                expect(anchorWrapper).not.toHaveAttribute('aria-labelledby');
+
+                await userEvent.hover(anchorWrapper as any);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchorWrapper).toHaveAttribute('aria-labelledby', tooltip?.id);
+            });
+
+            it('should always add aria-labelledby on anchor wrapper with closeMode="hide"', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    ariaLinkMode: 'aria-labelledby',
+                    closeMode: 'hide',
+                });
+                expect(anchorWrapper).toHaveAttribute('aria-labelledby', `${tooltip?.id}`);
             });
-            screen.logTestingPlaygroundURL()
-            expect(tooltip).toBeInTheDocument();
-            expect(anchorWrapper).toBeInTheDocument();
-            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
-            const button = screen.queryByRole('button', { name: 'Anchor' });
-            expect(button?.parentElement).toBe(anchorWrapper);
         });
     });
 
@@ -191,15 +303,13 @@ describe(`<${Tooltip.displayName}>`, () => {
             // Tooltip opened
             tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
             expect(tooltip).toBeInTheDocument();
-            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
             // Un-hover anchor button
-            userEvent.unhover(button);
-            await waitFor(() => {
-                expect(button).not.toHaveFocus();
-                // Tooltip closed
-                expect(tooltip).not.toBeInTheDocument();
-            });
+            await userEvent.unhover(button);
+
+            expect(button).not.toHaveFocus();
+            // Tooltip closed
+            expect(tooltip).not.toBeInTheDocument();
         });
 
         it('should activate on hover anchor and then tooltip', async () => {
@@ -226,12 +336,10 @@ describe(`<${Tooltip.displayName}>`, () => {
             expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
 
             // Un-hover tooltip
-            userEvent.unhover(tooltip);
-            await waitFor(() => {
-                expect(button).not.toHaveFocus();
-                // Tooltip closed
-                expect(tooltip).not.toBeInTheDocument();
-            });
+            await userEvent.unhover(tooltip);
+            expect(button).not.toHaveFocus();
+            // Tooltip closed
+            expect(tooltip).not.toBeInTheDocument();
         });
 
         it('should activate on anchor focus visible and close on escape', async () => {