fix(faceted-search): replace badge tooltip with a title (#5139)

Talend · Jan 25, 2024 · e2a866d · e2a866d
1 parent 4cd4e37
commit e2a866d
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 13 deletions.
diff --git a/.changeset/late-shirts-jam.md b/.changeset/late-shirts-jam.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-faceted-search': patch
+---
+
+Fix faceted search tooltip and replace it with a title to avoid wrong popover placement
diff --git a/...ted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap b/...ted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDate.component.test.js.snap
@@ -28,6 +28,7 @@ exports[`BadgeDate should render a default badge 1`] = `
           aria-label="Not equal to"
           class="theme-clickable theme-button theme-tertiary theme-size-S"
           id="myId-badge-date-operator-action-overlay"
+          title="Not equal to"
           type="button"
         >
           <span
@@ -50,10 +51,12 @@ exports[`BadgeDate should render a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-describedby="id-42"
+        aria-expanded="false"
+        aria-haspopup="dialog"
         aria-label="2011-10-01"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-date-action-overlay"
+        title="2011-10-01"
         type="button"
       >
         <span

diff --git a/...arch/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap b/...arch/src/components/Badges/BadgeFaceted/__snapshots__/BadgeFaceted.component.test.js.snap
@@ -28,6 +28,7 @@ exports[`BadgeFaceted should render the html output by default 1`] = `
           aria-label="My icon operator equal"
           class="theme-clickable theme-button theme-tertiary theme-size-S"
           id="my-id-operator-action-overlay"
+          title="My icon operator equal"
           type="button"
         >
           <span
@@ -50,10 +51,12 @@ exports[`BadgeFaceted should render the html output by default 1`] = `
     >
       <button
         aria-busy="false"
-        aria-describedby="id-42"
+        aria-expanded="false"
+        aria-haspopup="dialog"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="my-id-action-overlay"
+        title="All"
         type="button"
       >
         <span

diff --git a/...search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap b/...search/src/components/Badges/BadgeNumber/__snapshots__/BadgeNumber.component.test.js.snap
@@ -28,6 +28,7 @@ exports[`BadgeNumber should mount a default badge 1`] = `
           aria-label="Does not contain"
           class="theme-clickable theme-button theme-tertiary theme-size-S"
           id="myId-badge-number-operator-action-overlay"
+          title="Does not contain"
           type="button"
         >
           <span
@@ -50,10 +51,12 @@ exports[`BadgeNumber should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-describedby="id-42"
+        aria-expanded="false"
+        aria-haspopup="dialog"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-number-action-overlay"
+        title="All"
         type="button"
       >
         <span

diff --git a/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js b/packages/faceted-search/src/components/Badges/BadgeOverlay/BadgeOverlay.component.js
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import PropTypes from 'prop-types';
 
-import { ButtonTertiary, Popover, Tooltip } from '@talend/design-system';
+import { ButtonTertiary, Popover } from '@talend/design-system';
 import { FormatValue, Icon } from '@talend/react-components';
 
 import styles from './BadgeOverlay.module.scss';
@@ -74,23 +74,20 @@ const BadgeOverlay = ({
 		getLabel(label, showSpecialChars)
 	);
 
-	let button = (
+	const button = (
 		<ButtonTertiary
 			id={`${id}-action-overlay`}
 			aria-label={label}
 			onClick={changeOpened}
 			disabled={readOnly}
 			data-feature={dataFeature}
 			size="S"
+			title={label}
 		>
 			{buttonLabel}
 		</ButtonTertiary>
 	);
 
-	if (!iconName) {
-		button = <Tooltip title={buttonLabel}>{button}</Tooltip>;
-	}
-
 	return (
 		<div className={className}>
 			<Popover

diff --git a/...arch/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap b/...arch/src/components/Badges/BadgeOverlay/__snapshots__/BadgeOverlay.component.test.js.snap
@@ -4,10 +4,12 @@ exports[`BadgeOverlay should render the html output in the default state 1`] = `
 <div>
   <button
     aria-busy="false"
-    aria-describedby="id-42"
+    aria-expanded="false"
+    aria-haspopup="dialog"
     aria-label="my label"
     class="theme-clickable theme-button theme-tertiary theme-size-S"
     id="my-id-action-overlay"
+    title="my label"
     type="button"
   >
     <span

diff --git a/...search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap b/...search/src/components/Badges/BadgeSlider/__snapshots__/BadgeSlider.component.test.js.snap
@@ -28,6 +28,7 @@ exports[`BadgeSlider should mount a default badge 1`] = `
           aria-label="Equal"
           class="theme-clickable theme-button theme-tertiary theme-size-S"
           id="myId-badge-slider-operator-action-overlay"
+          title="Equal"
           type="button"
         >
           <span
@@ -50,10 +51,12 @@ exports[`BadgeSlider should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-describedby="id-42"
+        aria-expanded="false"
+        aria-haspopup="dialog"
         aria-label="0"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-slider-action-overlay"
+        title="0"
         type="button"
       >
         <span

diff --git a/...ted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap b/...ted-search/src/components/Badges/BadgeText/__snapshots__/BadgeText.component.test.js.snap
@@ -28,6 +28,7 @@ exports[`BadgeText should mount a default badge 1`] = `
           aria-label="Does not contain"
           class="theme-clickable theme-button theme-tertiary theme-size-S"
           id="myId-badge-text-operator-action-overlay"
+          title="Does not contain"
           type="button"
         >
           <span
@@ -50,10 +51,12 @@ exports[`BadgeText should mount a default badge 1`] = `
     >
       <button
         aria-busy="false"
-        aria-describedby="id-42"
+        aria-expanded="false"
+        aria-haspopup="dialog"
         aria-label="All"
         class="theme-clickable theme-button theme-tertiary theme-size-S"
         id="myId-badge-text-action-overlay"
+        title="All"
         type="button"
       >
         <span

diff --git a/...aceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap b/...aceted-search/src/components/BasicSearch/__snapshots__/BasicSearch.component.test.js.snap
@@ -87,6 +87,7 @@ exports[`BasicSearch should render the default html output with no badges 1`] =
               aria-label="Equals"
               class="theme-clickable theme-button theme-tertiary theme-size-S"
               id="name-7bc9bd07-3b46-4b8c-a406-a08b6263de5b-badge-text-operator-action-overlay"
+              title="Equals"
               type="button"
             >
               <span
@@ -109,10 +110,12 @@ exports[`BasicSearch should render the default html output with no badges 1`] =
         >
           <button
             aria-busy="false"
-            aria-describedby="id-42"
+            aria-expanded="false"
+            aria-haspopup="dialog"
             aria-label="hello"
             class="theme-clickable theme-button theme-tertiary theme-size-S"
             id="name-7bc9bd07-3b46-4b8c-a406-a08b6263de5b-badge-text-action-overlay"
+            title="hello"
             type="button"
           >
             <span