@lumx/react 3.20.1-alpha.2 → 3.20.1-alpha.21

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -1,4 +1,4 @@
-import React, { Children, ReactNode } from 'react';
+import { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -7,10 +7,9 @@ import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
 import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
 import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
-import { renderButtonOrLink } from '@lumx/react/utils/react/renderButtonOrLink';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 /**
  * Defines the props of the component.
@@ -113,17 +112,15 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         >
             {shouldSplitActions ? (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {renderLink(
-                        {
-                            linkAs,
-                            ...linkProps,
-                            className: `${CLASSNAME}__link`,
-                            onClick,
-                            tabIndex: 0,
-                        },
-                        icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                        <span>{label}</span>,
-                    )}
+                    <RawClickable
+                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                        {...(linkProps as any)}
+                        className={`${CLASSNAME}__link`}
+                        onClick={onClick}
+                    >
+                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                        <span>{label}</span>
+                    </RawClickable>
 
                     <IconButton
                         {...toggleButtonProps}
@@ -136,25 +133,23 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
                     />
                 </div>
             ) : (
-                renderButtonOrLink(
-                    {
-                        linkAs,
-                        ...linkProps,
-                        className: `${CLASSNAME}__link`,
-                        tabIndex: 0,
-                        onClick,
-                        ...ariaProps,
-                    },
-                    icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />,
-                    <span>{label}</span>,
-                    hasContent && (
+                <RawClickable
+                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                    {...linkProps}
+                    className={`${CLASSNAME}__link`}
+                    onClick={onClick}
+                    {...ariaProps}
+                >
+                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                    <span>{label}</span>
+                    {hasContent && (
                         <Icon
                             className={`${CLASSNAME}__chevron`}
                             icon={isOpen ? mdiChevronUp : mdiChevronDown}
                             size={Size.xs}
                         />
-                    ),
-                )
+                    )}
+                </RawClickable>
             )}
 
             {(closeMode === 'hide' || showChildren) && (

package/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonCircle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';

package/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
 
 export default { title: 'LumX components/skeleton/Skeleton Typography' };

package/src/components/skeleton/SkeletonTypography.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/slider/Slider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -7,7 +5,7 @@ import { Slider, SliderProps } from './Slider';
 
 const CLASSNAME = Slider.className as string;
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const setup = (props: Partial<SliderProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
     render(<Slider {...(props as any)} />, { wrapper });

package/src/components/slider/Slider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { SyntheticEvent, useMemo, useRef } from 'react';
+import { SyntheticEvent, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import range from 'lodash/range';
 import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
 
 export interface UseSlideFocusManagementProps {

package/src/components/switch/Switch.test.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import userEvent from '@testing-library/user-event/';
+import userEvent from '@testing-library/user-event';
 
 import { Switch, SwitchProps } from './Switch';
 
@@ -24,7 +22,7 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
     return { switchWrapper, input, helper, label, props };
 };
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 describe(`<${Switch.displayName}>`, () => {
     describe('Props', () => {
@@ -86,7 +84,7 @@ describe(`<${Switch.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when switchWrapper is clicked', async () => {
             const value = 'value';
@@ -102,7 +100,7 @@ describe(`<${Switch.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { switchWrapper, input } = setup({ isDisabled: true, onChange });
 
             expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');
@@ -115,7 +113,7 @@ describe(`<${Switch.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { switchWrapper, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(switchWrapper).toHaveClass('lumx-switch--is-disabled');

package/src/components/switch/Switch.tsx

@@ -1,4 +1,4 @@
-import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
+import { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';

package/src/components/table/Table.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';

package/src/components/table/Table.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/table/TableBody.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/table/TableBody.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/table/TableCell.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
@@ -42,7 +40,7 @@ describe(`<${TableCell.displayName}>`, () => {
 
     it('should render header variant clickable', async () => {
         const content = 'Content';
-        const onHeaderClick = jest.fn();
+        const onHeaderClick = vi.fn();
         const { tableCell } = setup({ children: content, variant: 'head', onHeaderClick });
 
         const headerButton = within(tableCell).getByRole('button', { name: content });

package/src/components/table/TableCell.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';

package/src/components/table/TableHeader.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/table/TableHeader.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/table/TableRow.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';

package/src/components/table/TableRow.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/tabs/Tab.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/tabs/TabList.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Tab } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/tabs/TabProvider.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Tab, TabList, TabPanel, TabProvider, TabProviderProps } from '@lumx/react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

package/src/components/tabs/TabProvider.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import React, { ReactNode, useEffect, useReducer } from 'react';
+import { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from './state';
 
 export interface TabProviderProps {

package/src/components/tabs/Tabs.stories.tsx

@@ -8,7 +8,7 @@ import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
 import { withCategory } from '@lumx/react/stories/utils/withCategory';
 import get from 'lodash/get';
 import times from 'lodash/times';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 export default {
     title: 'LumX components/tabs',

package/src/components/text/Text.stories.tsx

@@ -1,6 +1,6 @@
-import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import React from 'react';
 
+import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';

package/src/components/text/Text.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';

package/src/components/text/Text.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';

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

@@ -1,5 +1,4 @@
-import React from 'react';
-
+import { Mock } from 'vitest';
 import camelCase from 'lodash/camelCase';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
@@ -20,7 +19,7 @@ import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -49,7 +48,7 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRe
 };
 
 describe(`<${TextField.displayName}>`, () => {
-    (isFocusVisible as jest.Mock).mockReturnValue(false);
+    (isFocusVisible as Mock).mockReturnValue(false);
 
     describe('Render', () => {
         it('should render defaults', () => {
@@ -180,7 +179,7 @@ describe(`<${TextField.displayName}>`, () => {
 
     describe('Events', () => {
         it('should trigger `onChange` when text field is changed', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { inputNative } = setup({ value: '', name: 'name', onChange });
 
             await userEvent.tab();
@@ -192,7 +191,7 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should trigger `onChange` with empty value when text field is cleared', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { clearButton } = setup({
                 value: 'initial value',
                 name: 'name',
@@ -208,8 +207,8 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should trigger `onChange` with empty value and `onClear` when text field is cleared', async () => {
-            const onChange = jest.fn();
-            const onClear = jest.fn();
+            const onChange = vi.fn();
+            const onClear = vi.fn();
             const { clearButton } = setup({
                 value: 'initial value',
                 name: 'name',
@@ -229,7 +228,7 @@ describe(`<${TextField.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render with "isDisabled"', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { element, inputNative } = setup({
                 label: 'Label',
                 isDisabled: true,
@@ -255,7 +254,7 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should render with "aria-disabled"', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { element, inputNative } = setup({
                 label: 'Label',
                 'aria-disabled': true,

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import get from 'lodash/get';

package/src/components/thumbnail/Thumbnail.test.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import { DisabledStateProvider } from '@lumx/react/utils';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Thumbnail, ThumbnailProps } from './Thumbnail';
 
 const CLASSNAME = Thumbnail.className as string;
@@ -28,9 +26,20 @@ describe(`<${Thumbnail.displayName}>`, () => {
         },
     });
 
-    describe('disabled state', () => {
-        it('should not be clickable when disabled from context', () => {
-            const onClick = jest.fn();
+    describe('clickable button', () => {
+        it('should render clickable button', async () => {
+            const onClick = vi.fn();
+            const { thumbnail } = setup({ onClick, alt: 'Name' });
+            const button = screen.getByRole('button', { name: 'Name' });
+            expect(button).toBe(thumbnail);
+            expect(button).toHaveAttribute('type', 'button');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should not render button in disabled context', () => {
+            const onClick = vi.fn();
             const { thumbnail, container } = setup(
                 { onClick, 'aria-label': 'thumbnail' },
                 {
@@ -47,8 +56,21 @@ describe(`<${Thumbnail.displayName}>`, () => {
             fireEvent.click(thumbnail as HTMLElement);
             expect(onClick).not.toHaveBeenCalled();
         });
+    });
+
+    describe('clickable link', () => {
+        it('should render clickable link', async () => {
+            const onClick = vi.fn((evt: any) => evt.preventDefault());
+            const { thumbnail } = setup({ linkProps: { href: '#' }, onClick, alt: 'Name' });
+            const link = screen.getByRole('link');
+            expect(link).toBe(thumbnail);
+            expect(link).toHaveAttribute('href', '#');
+
+            fireEvent.click(thumbnail as HTMLElement);
+            expect(onClick).toHaveBeenCalled();
+        });
 
-        it('should have no href when disabled from context', () => {
+        it('should not render link in disabled context', () => {
             const { container, thumbnail } = setup(
                 { linkAs: 'a', linkProps: { href: '#' }, 'aria-label': 'thumbnail' },
                 {

package/src/components/thumbnail/Thumbnail.tsx

@@ -22,6 +22,7 @@ import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
 import { useDisableStateProps } from '@lumx/react/utils/disabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { FocusPoint, ThumbnailSize, ThumbnailVariant } from './types';
 
 type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
@@ -100,7 +101,7 @@ const DEFAULT_PROPS: Partial<ThumbnailProps> = {
  * @return React element.
  */
 export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
-    const { isAnyDisabled, otherProps } = useDisableStateProps(props);
+    const { isAnyDisabled, otherProps, disabledStateProps } = useDisableStateProps(props);
     const defaultTheme = useTheme() || Theme.light;
     const {
         align,
@@ -151,18 +152,17 @@ export const Thumbnail = forwardRef<ThumbnailProps>((props, ref) => {
     }
 
     const isLink = Boolean(linkProps?.href || linkAs);
-    const isButton = !!forwardedProps.onClick;
-    const isClickable = !isAnyDisabled && (isButton || isLink);
+    const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
 
-    let Wrapper: any = 'div';
+    const Wrapper: any = isClickable ? RawClickable : 'div';
     const wrapperProps = { ...forwardedProps };
-    if (!isAnyDisabled && isLink) {
-        Wrapper = linkAs || 'a';
-        Object.assign(wrapperProps, linkProps);
-    } else if (!isAnyDisabled && isButton) {
-        Wrapper = 'button';
-        wrapperProps.type = forwardedProps.type || 'button';
-        wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+    if (isClickable) {
+        Object.assign(wrapperProps, { as: linkAs || (linkProps?.href ? 'a' : 'button') }, disabledStateProps);
+        if (isLink) {
+            Object.assign(wrapperProps, linkProps);
+        } else {
+            wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
+        }
     }
 
     // If we have a loading placeholder image that is really loaded (complete)

package/src/components/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,5 +1,6 @@
-import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
 import React, { useState } from 'react';
+
+import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/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';