fix(TDOPS-5671): fix tooltip display when empty title (#4999)

* fix(TDOPS-5671): fix tooltip display when empty title * changeset * improve accessibility
Talend · Nov 21, 2023 · f43609c · f43609c
1 parent e798efb
commit f43609c
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 14 deletions.
diff --git a/.changeset/blue-kings-switch.md b/.changeset/blue-kings-switch.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+TDOPS-5671 - Fix Design System tooltip display in case of empty value
diff --git a/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx b/packages/design-system/src/components/Tooltip/Tooltip.cy.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable testing-library/prefer-screen-queries */
+
 /* eslint-disable testing-library/await-async-queries */
 import { Tooltip } from './Tooltip';
 
@@ -16,6 +17,18 @@ context('<Tooltip />', () => {
 			cy.findByTestId('my.tooltip').should('be.visible');
 		});
 
+		it('should not show a tooltip when empty title', () => {
+			cy.mount(
+				<Tooltip title="" data-testid="my.tooltip">
+					<button>button</button>
+				</Tooltip>,
+			);
+
+			cy.findByTestId('my.tooltip').should('not.exist');
+			cy.get('button').click();
+			cy.findByTestId('my.tooltip').should('not.exist');
+		});
+
 		it('Should be able to override baseId', () => {
 			const tooltipBaseId = 'base-id';
 			cy.mount(

diff --git a/packages/design-system/src/components/Tooltip/Tooltip.tsx b/packages/design-system/src/components/Tooltip/Tooltip.tsx
@@ -91,23 +91,25 @@ export const Tooltip = ({ id, children, title, placement = 'top', ...rest }: Too
 				children,
 				{
 					...getReferenceProps(),
-					'aria-describedby': safeId,
+					...(title && { 'aria-describedby': safeId }),
 				},
 				floating.refs.setReference,
 			)}
-			<FloatingPortal>
-				<div
-					{...getFloatingProps()}
-					id={safeId}
-					ref={floating.refs.setFloating}
-					className={styles.container}
-					style={{ display: isOpen ? 'block' : 'none', ...floating.floatingStyles }}
-					{...rest}
-				>
-					<FloatingArrow ref={arrowRef} context={floating.context} />
-					{title}
-				</div>
-			</FloatingPortal>
+			{!!title && (
+				<FloatingPortal>
+					<div
+						{...getFloatingProps()}
+						id={safeId}
+						ref={floating.refs.setFloating}
+						className={styles.container}
+						style={{ display: isOpen ? 'block' : 'none', ...floating.floatingStyles }}
+						{...rest}
+					>
+						<FloatingArrow ref={arrowRef} context={floating.context} />
+						{title}
+					</div>
+				</FloatingPortal>
+			)}
 		</>
 	);
 };