SONAR-20042 Removing title when tooltip is present

6 files changed, 25 insertions, 10 deletions

diff --git a/server/sonar-web/design-system/src/components/Tags.tsx b/server/sonar-web/design-system/src/components/Tags.tsx
index fa3dcfc7748..a20757ea8c5 100644
--- a/server/sonar-web/design-system/src/components/Tags.tsx
+++ b/server/sonar-web/design-system/src/components/Tags.tsx
@@ -62,7 +62,7 @@ export function Tags({
 
   const displayedTagsContent = (open = false) => (
     <Tooltip overlay={open ? undefined : tags.join(', ')}>
-      <span className="sw-inline-flex sw-items-center sw-gap-1" title={tags.join(', ')}>
+      <span className="sw-inline-flex sw-items-center sw-gap-1">
         {/* Display first 3 (tagsToDisplay) tags */}
         {displayedTags.map((tag) => (
           <TagLabel key={tag}>{tag}</TagLabel>
diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
index b9c4fb78f98..51b08bd94b0 100644
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
@@ -24,6 +24,7 @@ import React from 'react';
 import selectEvent from 'react-select-event';
 import { TabKeys } from '../../../components/rules/RuleTabViewer';
 import { mockLoggedInUser } from '../../../helpers/testMocks';
+import { byRole } from '../../../helpers/testSelector';
 import { ComponentQualifier } from '../../../types/component';
 import { IssueType } from '../../../types/issues';
 import {
@@ -478,13 +479,29 @@ describe('issues item', () => {
       await user.click(listItem.getByText('accessibility'));
       await user.click(listItem.getByText('android'));
     });
-    expect(listItem.getByTitle('accessibility, android')).toBeInTheDocument();
+
+    await user.keyboard('{Escape}');
+    await expect(
+      byRole('button', { name: 'accessibility android +' }).byText('accessibility').get()
+    ).toHaveATooltipWithContent('accessibility, android');
+
+    await act(async () => {
+      await user.click(listItem.getByRole('button', { name: 'accessibility android +' }));
+    });
 
     // Unselect
     await act(async () => {
       await user.click(screen.getByRole('checkbox', { name: 'accessibility' }));
     });
-    expect(listItem.getByTitle('android')).toBeInTheDocument();
+
+    await user.keyboard('{Escape}');
+    await expect(
+      byRole('button', { name: 'android +' }).byText('android').get()
+    ).toHaveATooltipWithContent('android');
+
+    await act(async () => {
+      await user.click(listItem.getByRole('button', { name: 'android +' }));
+    });
 
     await act(async () => {
       await user.click(screen.getByRole('searchbox', { name: 'search.search_for_tags' }));
diff --git a/server/sonar-web/src/main/js/apps/projectInformation/about/components/__tests__/MetaTags-test.tsx b/server/sonar-web/src/main/js/apps/projectInformation/about/components/__tests__/MetaTags-test.tsx
index 4199cd484e5..6b445ab9a95 100644
--- a/server/sonar-web/src/main/js/apps/projectInformation/about/components/__tests__/MetaTags-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectInformation/about/components/__tests__/MetaTags-test.tsx
@@ -61,7 +61,7 @@ it('should allow to edit tags for a project', async () => {
   expect(await screen.findByText('foo, bar')).toBeInTheDocument();
   expect(screen.getByRole('button')).toBeInTheDocument();
 
-  await act(() => user.click(screen.getByRole('button', { name: 'foo, bar +' })));
+  await act(() => user.click(screen.getByRole('button', { name: 'foo bar +' })));
 
   expect(await screen.findByRole('checkbox', { name: 'best' })).toBeInTheDocument();
 
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
index 116312690bc..69b0e03f3a0 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
@@ -60,9 +60,7 @@ export function ProjectCardLanguages({ className, distribution, languages }: Pro
 
   return (
     <Tooltip overlay={tooltip}>
-      <span className={className} title={languagesText}>
-        {languagesText}
-      </span>
+      <span className={className}>{languagesText}</span>
     </Tooltip>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx
index b1da5b7ce96..bff0e35fd2a 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/__tests__/ProjectCard-test.tsx
@@ -52,10 +52,10 @@ it('should not display the quality gate', () => {
   expect(screen.getByText('projects.not_analyzed.TRK')).toBeInTheDocument();
 });
 
-it('should display tags', () => {
+it('should display tags', async () => {
   const project = { ...PROJECT, tags: ['foo', 'bar'] };
   renderProjectCard(project);
-  expect(screen.getByTitle('foo, bar')).toBeInTheDocument();
+  await expect(screen.getByText('foo')).toHaveATooltipWithContent('foo, bar');
 });
 
 it('should display private badge', () => {
diff --git a/server/sonar-web/src/main/js/components/issue/__tests__/Issue-it.tsx b/server/sonar-web/src/main/js/components/issue/__tests__/Issue-it.tsx
index e7a4e18fff6..6eb078119d4 100644
--- a/server/sonar-web/src/main/js/components/issue/__tests__/Issue-it.tsx
+++ b/server/sonar-web/src/main/js/components/issue/__tests__/Issue-it.tsx
@@ -300,7 +300,7 @@ function getPageObject() {
     // Tags
     tagsSearchInput: byRole('searchbox'),
     updateTagsBtn: (currentTags?: string[]) =>
-      byRole('button', { name: `${currentTags ? currentTags.join(', ') : 'issue.no_tag'} +` }),
+      byRole('button', { name: `${currentTags ? currentTags.join(' ') : 'issue.no_tag'} +` }),
     toggleTagCheckbox: (name: string) => byRole('checkbox', { name }),
   };