SONAR-16966 Device-dependent event handlers are used

SONAR-16963 Programmatic label does not convey purpose of control

3 files changed, 55 insertions, 40 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
index 60a824117f5..ed63bd77a08 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/__tests__/SourceViewer-it.tsx
@@ -288,11 +288,22 @@ it('should show issue indicator', async () => {
   const row = await screen.findByRole('row', { name: /.*\/ \*$/ });
   const issueRow = within(row);
   expect(issueRow.getByText('2')).toBeInTheDocument();
-  await user.click(issueRow.getByRole('button', { name: 'source_viewer.issues_on_line.show' }));
+  await user.click(
+    issueRow.getByRole('button', {
+      name:
+        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.BUG.plural'
+    })
+  );
   const firstIssueBox = issueRow.getByRole('region', { name: 'First Issue' });
   const secondIssueBox = issueRow.getByRole('region', { name: 'Second Issue' });
   expect(firstIssueBox).toBeInTheDocument();
   expect(secondIssueBox).toBeInTheDocument();
+  expect(
+    issueRow.getByRole('button', {
+      name:
+        'source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.hide.2.issue.type.BUG.plural'
+    })
+  ).toBeInTheDocument();
 
   await user.click(firstIssueBox);
   expect(onIssueSelect).toBeCalledWith('first-issue');
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
index d1ddbdb2247..e824642f4d3 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
@@ -48,17 +48,23 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
   const mostImportantIssue = sortByType(issues)[0];
   const issueTypes = uniq(issues.map(i => i.type));
 
+  const tooltipShowHide = translate('source_viewer.issues_on_line', issuesOpen ? 'hide' : 'show');
   let tooltipContent;
   if (issueTypes.length > 1) {
-    tooltipContent = translate('source_viewer.issues_on_line.multiple_issues');
+    tooltipContent = translateWithParameters(
+      'source_viewer.issues_on_line.multiple_issues',
+      tooltipShowHide
+    );
   } else if (issues.length === 1) {
     tooltipContent = translateWithParameters(
       'source_viewer.issues_on_line.issue_of_type_X',
+      tooltipShowHide,
       translate('issue.type', mostImportantIssue.type)
     );
   } else {
     tooltipContent = translateWithParameters(
       'source_viewer.issues_on_line.X_issues_of_type_Y',
+      tooltipShowHide,
       issues.length,
       translate('issue.type', mostImportantIssue.type, 'plural')
     );
@@ -66,14 +72,12 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
 
   return (
     <td className={className} data-line-number={line.line}>
-      <ButtonPlain
-        aria-label={translate('source_viewer.issues_on_line', issuesOpen ? 'hide' : 'show')}
-        onClick={props.onClick}>
-        <Tooltip overlay={tooltipContent}>
+      <Tooltip overlay={tooltipContent}>
+        <ButtonPlain aria-label={tooltipContent} aria-expanded={issuesOpen} onClick={props.onClick}>
           <IssueIcon type={mostImportantIssue.type} />
-        </Tooltip>
-        {issues.length > 1 && <span className="source-line-issues-counter">{issues.length}</span>}
-      </ButtonPlain>
+          {issues.length > 1 && <span className="source-line-issues-counter">{issues.length}</span>}
+        </ButtonPlain>
+      </Tooltip>
     </td>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineIssuesIndicator-test.tsx.snap b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineIssuesIndicator-test.tsx.snap
index dc67d02a1f9..5707fd2491d 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineIssuesIndicator-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/__tests__/__snapshots__/LineIssuesIndicator-test.tsx.snap
@@ -5,23 +5,23 @@ exports[`should render correctly: default 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.multiple_issues.source_viewer.issues_on_line.show"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.multiple_issues"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.multiple_issues.source_viewer.issues_on_line.show"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="BUG"
       />
-    </Tooltip>
-    <span
-      className="source-line-issues-counter"
-    >
-      2
-    </span>
-  </ButtonPlain>
+      <span
+        className="source-line-issues-counter"
+      >
+        2
+      </span>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;
 
@@ -30,23 +30,23 @@ exports[`should render correctly: multiple issues, same type 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.VULNERABILITY.plural"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.X_issues_of_type_Y.2.issue.type.VULNERABILITY.plural"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.X_issues_of_type_Y.source_viewer.issues_on_line.show.2.issue.type.VULNERABILITY.plural"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="VULNERABILITY"
       />
-    </Tooltip>
-    <span
-      className="source-line-issues-counter"
-    >
-      2
-    </span>
-  </ButtonPlain>
+      <span
+        className="source-line-issues-counter"
+      >
+        2
+      </span>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;
 
@@ -62,17 +62,17 @@ exports[`should render correctly: single issue 1`] = `
   className="source-meta source-line-issues source-line-with-issues"
   data-line-number={3}
 >
-  <ButtonPlain
-    aria-label="source_viewer.issues_on_line.show"
-    onClick={[MockFunction]}
+  <Tooltip
+    overlay="source_viewer.issues_on_line.issue_of_type_X.source_viewer.issues_on_line.show.issue.type.VULNERABILITY"
   >
-    <Tooltip
-      overlay="source_viewer.issues_on_line.issue_of_type_X.issue.type.VULNERABILITY"
+    <ButtonPlain
+      aria-label="source_viewer.issues_on_line.issue_of_type_X.source_viewer.issues_on_line.show.issue.type.VULNERABILITY"
+      onClick={[MockFunction]}
     >
       <IssueIcon
         type="VULNERABILITY"
       />
-    </Tooltip>
-  </ButtonPlain>
+    </ButtonPlain>
+  </Tooltip>
 </td>
 `;