@lumx/react 3.6.4 → 3.6.5-alpha.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.6.4",
-        "@lumx/icons": "^3.6.4",
+        "@lumx/core": "^3.6.5-alpha.0",
+        "@lumx/icons": "^3.6.5-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.6.4"
+    "version": "3.6.5-alpha.0"
 }

package/src/components/button/IconButton.tsx

@@ -61,14 +61,7 @@ export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((
 
     return (
         <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>
-            <ButtonRoot
-                ref={ref}
-                {...{ emphasis, size, theme, ...forwardedProps }}
-                aria-label={label}
-                variant="icon"
-                // Remove the aria-describedby added by the tooltip when it is the same text as the aria-label
-                aria-describedby={tooltipProps?.label && tooltipProps?.label === label && undefined}
-            >
+            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant="icon">
                 {image ? (
                     <img
                         // no need to set alt as an aria-label is already set on the button

package/src/components/popover-dialog/PopoverDialog.stories.tsx

@@ -1,11 +1,38 @@
 import React from 'react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { mdiMenuDown } from '@lumx/icons';
 import { PopoverDialog } from '.';
-import { Button } from '../button';
+import { Button, IconButton } from '../button';
 
 export default {
     title: 'LumX components/popover-dialog/PopoverDialog',
     component: PopoverDialog,
+    parameters: { chromatic: { disableSnapshot: true } },
+};
+
+/**
+ * Example PopoverDialog using an IconButton as a trigger
+ */
+export const WithIconButtonTrigger = () => {
+    const anchorRef = React.useRef(null);
+    const [isOpen, close, open] = useBooleanState(false);
+
+    return (
+        <>
+            <IconButton id="trigger-button-1" label="Open popover" ref={anchorRef} onClick={open} icon={mdiMenuDown} />
+            <PopoverDialog
+                aria-labelledby="trigger-button-1"
+                anchorRef={anchorRef}
+                isOpen={isOpen}
+                onClose={close}
+                placement="bottom"
+            >
+                <Button className="lumx-spacing-margin-huge" onClick={close}>
+                    Close
+                </Button>
+            </PopoverDialog>
+        </>
+    );
 };
 
 /**

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -1,9 +1,13 @@
 import React, { useRef, useState } from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
 
+import { WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
+jest.mock('@lumx/react/utils/isFocusVisible');
+
 const DialogWithButton = (forwardedProps: any) => {
     const anchorRef = useRef(null);
     const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -25,6 +29,8 @@ const DialogWithButton = (forwardedProps: any) => {
 };
 
 describe(`<${PopoverDialog.displayName}>`, () => {
+    (isFocusVisible as jest.Mock).mockReturnValue(false);
+
     it('should behave like a dialog', async () => {
         const label = 'Test Label';
 
@@ -62,4 +68,29 @@ describe(`<${PopoverDialog.displayName}>`, () => {
         /** Anchor should retrieve the focus */
         expect(triggerElement).toHaveFocus();
     });
+
+    it('should work on icon button', async () => {
+        const label = 'Open popover';
+        render(<WithIconButtonTrigger />);
+
+        /** Open the popover */
+        const triggerElement = screen.getByRole('button', { name: label });
+        await userEvent.click(triggerElement);
+
+        const dialog = await screen.findByRole('dialog', { name: label });
+        const withinDialog = within(dialog);
+
+        /** Get buttons within dialog */
+        const dialogButtons = withinDialog.getAllByRole('button');
+
+        // First button should have focus by default on opening
+        expect(dialogButtons[0]).toHaveFocus();
+
+        // Close the popover
+        await userEvent.keyboard('{escape}');
+
+        expect(screen.queryByRole('dialog', { name: label })).not.toBeInTheDocument();
+        /** Anchor should retrieve the focus */
+        expect(triggerElement).toHaveFocus();
+    });
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from '@lumx/react';
+import { Button, IconButton } from '@lumx/react';
 import { screen, render, waitFor } from '@testing-library/react';
 import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
@@ -64,6 +64,35 @@ 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',

package/src/components/tooltip/Tooltip.tsx

@@ -87,7 +87,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const position = attributes?.popper?.['data-popper-placement'] ?? placement;
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = isActivated || forceOpen;
-    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id);
+    const wrappedChildren = useInjectTooltipRef(children, setAnchorElement, isOpen, id, label);
 
     return (
         <>

package/src/components/tooltip/useInjectTooltipRef.tsx

@@ -1,8 +1,6 @@
-import get from 'lodash/get';
-import isUndefined from 'lodash/isUndefined';
 import React, { cloneElement, ReactNode, useMemo } from 'react';
 
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -13,6 +11,7 @@ import { mergeRefs } from '@lumx/react/utils/mergeRefs';
  * @param  setAnchorElement Set tooltip anchor element.
  * @param  isOpen           Whether the tooltip is open or not.
  * @param  id               Tooltip id.
+ * @param  label            Tooltip label.
  * @return tooltip anchor.
  */
 export const useInjectTooltipRef = (
@@ -20,32 +19,29 @@ export const useInjectTooltipRef = (
     setAnchorElement: (e: HTMLDivElement) => void,
     isOpen: boolean | undefined,
     id: string,
+    label: string,
 ): ReactNode => {
+    const element = React.isValidElement(children) ? (children as any) : null;
+    const ref = useMergeRefs(element?.ref, setAnchorElement);
+
     return useMemo(() => {
-        // Let the children remove the aria-describedby attribute by setting it to undefined
-        const childrenHasAriaProp = get(children, 'props')
-            ? 'aria-describedby' in get(children, 'props') && isUndefined(get(children, 'props.aria-describedby'))
-            : false;
-        const ariaProps = { 'aria-describedby': isOpen && !childrenHasAriaProp ? id : undefined };
+        // Non-disabled element
+        if (element && element.props?.disabled !== true && element.props?.isDisabled !== true) {
+            const props = { ...element.props, ref };
 
-        if (
-            children &&
-            get(children, '$$typeof') &&
-            get(children, 'props.disabled') !== true &&
-            get(children, 'props.isDisabled') !== true
-        ) {
-            const element = children as any;
+            // Add current tooltip to the aria-describedby if the label is not already present
+            if (label !== props['aria-label']) {
+                props['aria-describedby'] = [props['aria-describedby'], id].filter(Boolean).join(' ');
+            }
 
-            return cloneElement(element, {
-                ...element.props,
-                ...ariaProps,
-                ref: mergeRefs(element.ref, setAnchorElement),
-            });
+            return cloneElement(element, props);
         }
+
+        // Else add a wrapper around the children
         return (
-            <div className="lumx-tooltip-anchor-wrapper" ref={setAnchorElement} {...ariaProps}>
+            <div className="lumx-tooltip-anchor-wrapper" ref={ref} aria-describedby={isOpen ? id : undefined}>
                 {children}
             </div>
         );
-    }, [isOpen, id, children, setAnchorElement]);
+    }, [element, children, setAnchorElement, isOpen, id, ref, label]);
 };