SONAR-16883 [892274] State: Selected state of the element is missing or incorrect

3 files changed, 16 insertions, 13 deletions

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
index 8acd471775d..e53ded9e754 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
@@ -61,9 +61,11 @@
   border: 1px solid transparent;
   border-top-color: var(--barBorderColor);
   transition: padding 0s, border 0s;
+  max-width: 100%;
+  text-align: left;
 }
 
-a.hotspot-item:focus {
+button.hotspot-item:focus {
   color: var(--baseFontColor);
 }
 
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
index 1df6caa33f4..23135c4f6af 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotListItem.tsx
@@ -19,6 +19,7 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
+import { ButtonPlain } from '../../../components/controls/buttons';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
 import LocationsList from '../../../components/locations/LocationsList';
 import { ComponentQualifier } from '../../../types/component';
@@ -40,14 +41,15 @@ export default function HotspotListItem(props: HotspotListItemProps) {
   const path = getFilePath(hotspot.component, hotspot.project);
 
   return (
-    <a
+    <ButtonPlain
+      aria-current={selected}
       className={classNames('hotspot-item', { highlight: selected })}
-      href="#"
       onClick={() => !selected && props.onClick(hotspot)}>
+      {/* This is not a real interaction it is only for scrolling */
+      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
         className={classNames('little-spacer-left text-bold', { 'cursor-pointer': selected })}
-        onClick={selected ? () => props.onLocationClick() : undefined}
-        role={selected ? 'button' : undefined}>
+        onClick={selected ? () => props.onLocationClick() : undefined}>
         {hotspot.message}
       </div>
       <div className="display-flex-center big-spacer-top">
@@ -67,6 +69,6 @@ export default function HotspotListItem(props: HotspotListItemProps) {
           scroll={props.onScroll}
         />
       )}
-    </a>
+    </ButtonPlain>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
index 0d13bbb6774..b9a3f92bbbf 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotListItem-test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render correctly 1`] = `
-<a
+<ButtonPlain
+  aria-current={false}
   className="hotspot-item"
-  href="#"
   onClick={[Function]}
 >
   <div
@@ -26,19 +26,18 @@ exports[`should render correctly 1`] = `
       </bdi>
     </div>
   </div>
-</a>
+</ButtonPlain>
 `;
 
 exports[`should render correctly 2`] = `
-<a
+<ButtonPlain
+  aria-current={true}
   className="hotspot-item highlight"
-  href="#"
   onClick={[Function]}
 >
   <div
     className="little-spacer-left text-bold cursor-pointer"
     onClick={[Function]}
-    role="button"
   >
     '3' is a magic number.
   </div>
@@ -63,5 +62,5 @@ exports[`should render correctly 2`] = `
     onLocationSelect={[Function]}
     scroll={[MockFunction]}
   />
-</a>
+</ButtonPlain>
 `;