SONAR-16858 [892099] State: Expand/collapse state of the element is missing or incorrect

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCategory.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCategory.tsx
index 5365ef9d37221a2d5277c3e8e52c545e622e133d..f6328c13298b43a9ffcdd2554c96003e706ab91d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCategory.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotCategory.tsx
@@ -19,6 +19,7 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
+import { ButtonPlain } from '../../../components/controls/buttons';
 import ChevronDownIcon from '../../../components/icons/ChevronDownIcon';
 import ChevronUpIcon from '../../../components/icons/ChevronUpIcon';
 import { RawHotspot } from '../../../types/security-hotspots';
@@ -58,13 +59,13 @@ export default function HotspotCategory(props: HotspotCategoryProps) {
   return (
     <div className={classNames('hotspot-category', risk)}>
       {props.onToggleExpand ? (
-        <a
+        <ButtonPlain
           className={classNames(
             'hotspot-category-header display-flex-space-between display-flex-center',
             { 'contains-selected-hotspot': selectedHotspot.securityCategory === categoryKey }
           )}
-          href="#"
-          onClick={() => props.onToggleExpand && props.onToggleExpand(categoryKey, !expanded)}>
+          onClick={() => props.onToggleExpand && props.onToggleExpand(categoryKey, !expanded)}
+          aria-expanded={expanded}>
           <strong className="flex-1 spacer-right break-word">{title}</strong>
           <span>
             <span className="counter-badge">
@@ -77,7 +78,7 @@ export default function HotspotCategory(props: HotspotCategoryProps) {
               <ChevronDownIcon className="big-spacer-left" />
             )}
           </span>
-        </a>
+        </ButtonPlain>
       ) : (
         <div className="hotspot-category-header">
           <strong className="flex-1 spacer-right break-word">{title}</strong>

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 e53ded9e75417b65664f9a78943650a4b7282709..ce05abf0e6536f17ecf567acbeedbf23ee41d061 100644 (file)
--- 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
@@ -31,12 +31,17 @@
 }
 
 .hotspot-category .hotspot-category-header {
+  width: 100%;
   padding: calc(2 * var(--gridSize)) var(--gridSize);
   color: var(--baseFontColor);
   border-bottom: none;
   border-left: 4px solid;
 }
 
+.hotspot-category strong {
+  text-align: left;
+}
+
 .hotspot-category .hotspot-category-header:hover,
 .hotspot-category .hotspot-category-header.contains-selected-hotspot {
   color: var(--blue);

diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
index 766b906c75aa0760b59c8a47f3f05fd5cb238f44..f165b400e5c60b86d15741668ed4294efbd31695 100644 (file)
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotCategory-test.tsx.snap
@@ -4,9 +4,9 @@ exports[`should render correctly with hotspots 1`] = `
 <div
   className="hotspot-category HIGH"
 >
-  <a
+  <ButtonPlain
+    aria-expanded={true}
     className="hotspot-category-header display-flex-space-between display-flex-center"
-    href="#"
     onClick={[Function]}
   >
     <strong
@@ -24,7 +24,7 @@ exports[`should render correctly with hotspots 1`] = `
         className="big-spacer-left"
       />
     </span>
-  </a>
+  </ButtonPlain>
   <ul>
     <li
       data-hotspot-key="h1"
@@ -90,9 +90,9 @@ exports[`should render correctly with hotspots: collapsed 1`] = `
 <div
   className="hotspot-category HIGH"
 >
-  <a
+  <ButtonPlain
+    aria-expanded={false}
     className="hotspot-category-header display-flex-space-between display-flex-center"
-    href="#"
     onClick={[Function]}
   >
     <strong
@@ -110,7 +110,7 @@ exports[`should render correctly with hotspots: collapsed 1`] = `
         className="big-spacer-left"
       />
     </span>
-  </a>
+  </ButtonPlain>
 </div>
 `;
 
@@ -118,9 +118,9 @@ exports[`should render correctly with hotspots: contains selected 1`] = `
 <div
   className="hotspot-category HIGH"
 >
-  <a
+  <ButtonPlain
+    aria-expanded={true}
     className="hotspot-category-header display-flex-space-between display-flex-center contains-selected-hotspot"
-    href="#"
     onClick={[Function]}
   >
     <strong
@@ -138,7 +138,7 @@ exports[`should render correctly with hotspots: contains selected 1`] = `
         className="big-spacer-left"
       />
     </span>
-  </a>
+  </ButtonPlain>
   <ul>
     <li
       data-hotspot-key="h1"
@@ -204,9 +204,9 @@ exports[`should render correctly with hotspots: lastAndIncomplete 1`] = `
 <div
   className="hotspot-category HIGH"
 >
-  <a
+  <ButtonPlain
+    aria-expanded={true}
     className="hotspot-category-header display-flex-space-between display-flex-center"
-    href="#"
     onClick={[Function]}
   >
     <strong
@@ -225,7 +225,7 @@ exports[`should render correctly with hotspots: lastAndIncomplete 1`] = `
         className="big-spacer-left"
       />
     </span>
-  </a>
+  </ButtonPlain>
   <ul>
     <li
       data-hotspot-key="h1"