feat(tooltip): use standard visually-hidden class in closeMode=hide

Author: gcornut

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `ImageLightbox`: fix closing transition triggering multiple times.
 
+### Changed
+
+-   `Tooltip`: use the standard class `visually-hidden` when closed and with `closeMode="hide"`.
+
 ## [3.9.2][] - 2024-10-04
 
 ### Fixed

packages/lumx-core/src/scss/components/tooltip/_index.scss

@@ -17,10 +17,6 @@
     border-radius: var(--lumx-border-radius);
     will-change: transform;
 
-    &--is-hidden {
-        visibility: hidden;
-    }
-
     &__arrow {
         position: absolute;
         width: 0;

packages/lumx-react/src/components/date-picker/DatePickerControlled.test.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
 import userEvent from '@testing-library/user-event';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
 import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
 import { CLASSNAME } from './constants';
 
@@ -39,7 +40,7 @@ const queries = {
         screen.getByRole('spinbutton', {
             name: /année/i,
         }),
-    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, 'visually-hidden'),
+    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, VISUALLY_HIDDEN),
 };
 
 describe(`<${DatePickerControlled.displayName}>`, () => {

packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx

@@ -13,6 +13,7 @@ import { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';
 import { onEnterPressed } from '@lumx/react/utils/event';
 import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
 import { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { CLASSNAME } from './constants';
 
 /**
@@ -147,7 +148,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                 }
                 label={
                     <>
-                        <span aria-live={labelAriaLive} className={onMonthChange ? 'visually-hidden' : ''} dir="auto">
+                        <span aria-live={labelAriaLive} className={onMonthChange ? VISUALLY_HIDDEN : ''} dir="auto">
                             {monthYear}
                         </span>
                         {onMonthChange && (
@@ -222,7 +223,7 @@ export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElemen
                                             onClick={() => onChange(date)}
                                         >
                                             <span aria-hidden>{formatDayNumber(locale, date)}</span>
-                                            <span className="visually-hidden">
+                                            <span className={VISUALLY_HIDDEN}>
                                                 {date.toLocaleDateString(locale, {
                                                     day: 'numeric',
                                                     month: 'long',

packages/lumx-react/src/components/tooltip/Tooltip.test.tsx

@@ -5,8 +5,9 @@ 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';
-
 import { isFocusVisible } from '@lumx/react/utils/isFocusVisible';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
 import { Tooltip, TooltipProps } from './Tooltip';
 
 const CLASSNAME = Tooltip.className as string;
@@ -142,11 +143,11 @@ describe(`<${Tooltip.displayName}>`, () => {
                     forceOpen: false,
                 });
                 expect(tooltip).toBeInTheDocument();
-                expect(tooltip).toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
 
                 const anchor = screen.getByRole('button', { name: 'Anchor' });
                 await userEvent.hover(anchor);
-                expect(tooltip).not.toHaveClass('lumx-tooltip--is-hidden');
+                expect(tooltip).not.toHaveClass(VISUALLY_HIDDEN);
             });
         });
 

packages/lumx-react/src/components/tooltip/Tooltip.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 
 import classNames from 'classnames';
 
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { Comp, GenericProps, HasCloseMode } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
@@ -106,6 +106,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
     const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
     const isOpen = (isActivated || forceOpen) && !!label;
     const isMounted = !!label && (isOpen || closeMode === 'hide');
+    const isHidden = !isOpen && closeMode === 'hide';
     const wrappedChildren = useInjectTooltipRef({
         children,
         setAnchorElement,
@@ -139,8 +140,8 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
                             handleBasicClasses({
                                 prefix: CLASSNAME,
                                 position,
-                                hidden: !isOpen && closeMode === 'hide',
                             }),
+                            isHidden && VISUALLY_HIDDEN,
                         )}
                         style={{ ...styles.popper, zIndex }}
                         {...attributes.popper}

packages/lumx-react/src/constants.ts

@@ -20,3 +20,8 @@ export const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
  * Check if we are running in a true browser
  */
 export const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+export const VISUALLY_HIDDEN = 'visually-hidden';