SONAR-16971 State: Selected state of the element is missing or incorrect

4 files changed, 34 insertions, 23 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 ed63bd77a08..265b0a4abdc 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
@@ -20,6 +20,7 @@
 import { queryHelpers, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
+import { byRole } from 'testing-library-selector';
 import { SourceViewerServiceMock } from '../../../api/mocks/SourceViewerServiceMock';
 import { HttpStatus } from '../../../helpers/request';
 import { mockIssue } from '../../../helpers/testMocks';
@@ -41,6 +42,11 @@ jest.mock('../helpers/lines', () => {
   };
 });
 
+const ui = {
+  codeSmellTypeButton: byRole('button', { name: 'issue.type.CODE_SMELL' }),
+  minorSeverityButton: byRole('button', { name: 'severity.MINOR' })
+};
+
 const handler = new SourceViewerServiceMock();
 
 beforeEach(() => {
@@ -135,7 +141,7 @@ it('should be able to interact with issue action', async () => {
   await user.click(
     await screen.findByRole('button', { name: 'issue.type.type_x_click_to_change.issue.type.BUG' })
   );
-  expect(screen.getByRole('link', { name: 'issue.type.CODE_SMELL' })).toBeInTheDocument();
+  expect(ui.codeSmellTypeButton.get()).toBeInTheDocument();
 
   // Open severity
   await user.click(
@@ -143,11 +149,11 @@ it('should be able to interact with issue action', async () => {
       name: 'issue.severity.severity_x_click_to_change.severity.MAJOR'
     })
   );
-  expect(screen.getByRole('link', { name: 'severity.MINOR' })).toBeInTheDocument();
+  expect(ui.minorSeverityButton.get()).toBeInTheDocument();
 
   // Close
   await user.keyboard('{Escape}');
-  expect(screen.queryByRole('link', { name: 'severity.MINOR' })).not.toBeInTheDocument();
+  expect(ui.minorSeverityButton.query()).not.toBeInTheDocument();
 
   // Change the severity
   await user.click(
@@ -155,8 +161,8 @@ it('should be able to interact with issue action', async () => {
       name: 'issue.severity.severity_x_click_to_change.severity.MAJOR'
     })
   );
-  expect(screen.getByRole('link', { name: 'severity.MINOR' })).toBeInTheDocument();
-  await user.click(screen.getByRole('link', { name: 'severity.MINOR' }));
+  expect(ui.minorSeverityButton.get()).toBeInTheDocument();
+  await user.click(ui.minorSeverityButton.get());
   expect(
     screen.getByRole('button', {
       name: 'issue.severity.severity_x_click_to_change.severity.MINOR'
diff --git a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
index cbd66ee8899..b8d2f9200f2 100644
--- a/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
+++ b/server/sonar-web/src/main/js/components/common/SelectListItem.tsx
@@ -20,6 +20,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import Tooltip from '../../components/controls/Tooltip';
+import { ButtonPlain } from '../controls/buttons';
 
 interface Props {
   active?: string;
@@ -32,8 +33,7 @@ interface Props {
 }
 
 export default class SelectListItem extends React.PureComponent<Props> {
-  handleSelect = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  handleSelect = () => {
     if (this.props.onSelect) {
       this.props.onSelect(this.props.item);
     }
@@ -49,7 +49,9 @@ export default class SelectListItem extends React.PureComponent<Props> {
     const children = this.props.children || this.props.item;
     return (
       <li>
-        <a
+        <ButtonPlain
+          preventDefault={true}
+          aria-selected={this.props.active === this.props.item}
           className={classNames(
             {
               active: this.props.active === this.props.item,
@@ -57,12 +59,11 @@ export default class SelectListItem extends React.PureComponent<Props> {
             },
             this.props.className
           )}
-          href="#"
           onClick={this.handleSelect}
           onFocus={this.handleHover}
           onMouseOver={this.handleHover}>
           {children}
-        </a>
+        </ButtonPlain>
       </li>
     );
   }
diff --git a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
index 09632d1a13d..131abbb83f8 100644
--- a/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/common/__tests__/__snapshots__/SelectListItem-test.tsx.snap
@@ -6,15 +6,16 @@ exports[`should render correctly with a tooltip 1`] = `
   placement="right"
 >
   <li>
-    <a
+    <ButtonPlain
+      aria-selected={false}
       className=""
-      href="#"
       onClick={[Function]}
       onFocus={[Function]}
       onMouseOver={[Function]}
+      preventDefault={true}
     >
       myitem
-    </a>
+    </ButtonPlain>
   </li>
 </Tooltip>
 `;
@@ -24,12 +25,13 @@ exports[`should render correctly with children 1`] = `
   placement="right"
 >
   <li>
-    <a
+    <ButtonPlain
+      aria-selected={false}
       className=""
-      href="#"
       onClick={[Function]}
       onFocus={[Function]}
       onMouseOver={[Function]}
+      preventDefault={true}
     >
       <i
         className="custom-icon"
@@ -37,7 +39,7 @@ exports[`should render correctly with children 1`] = `
       <p>
         seconditem
       </p>
-    </a>
+    </ButtonPlain>
   </li>
 </Tooltip>
 `;
@@ -47,15 +49,16 @@ exports[`should render correctly without children 1`] = `
   placement="right"
 >
   <li>
-    <a
+    <ButtonPlain
+      aria-selected={false}
       className=""
-      href="#"
       onClick={[Function]}
       onFocus={[Function]}
       onMouseOver={[Function]}
+      preventDefault={true}
     >
       myitem
-    </a>
+    </ButtonPlain>
   </li>
 </Tooltip>
 `;
@@ -65,15 +68,16 @@ exports[`should render with the active class 1`] = `
   placement="right"
 >
   <li>
-    <a
+    <ButtonPlain
+      aria-selected={true}
       className="active"
-      href="#"
       onClick={[Function]}
       onFocus={[Function]}
       onMouseOver={[Function]}
+      preventDefault={true}
     >
       myitem
-    </a>
+    </ButtonPlain>
   </li>
 </Tooltip>
 `;
diff --git a/server/sonar-web/src/main/js/components/controls/buttons.tsx b/server/sonar-web/src/main/js/components/controls/buttons.tsx
index ad0d068724e..92036d82178 100644
--- a/server/sonar-web/src/main/js/components/controls/buttons.tsx
+++ b/server/sonar-web/src/main/js/components/controls/buttons.tsx
@@ -30,7 +30,7 @@ import Tooltip, { TooltipProps } from './Tooltip';
 
 type AllowedButtonAttributes = Pick<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'aria-label' | 'className' | 'disabled' | 'id' | 'style' | 'title'
+  'aria-label' | 'className' | 'disabled' | 'id' | 'style' | 'title' | 'onFocus' | 'onMouseOver'
 >;
 
 interface ButtonProps extends AllowedButtonAttributes {