In facet header now only the text is clickable

2 files changed, 121 insertions, 104 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.js b/server/sonar-web/src/main/js/components/facet/FacetHeader.js
index 49682d4cbf2..46cdf6e43dd 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.js
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.js
@@ -114,12 +114,14 @@ export default class FacetHeader extends React.PureComponent {
           </button>}
 
         {this.props.onClick
-          ? <a className="search-navigator-facet-header" href="#" onClick={this.handleClick}>
-              {this.renderCheckbox()}
-              {this.props.name}
+          ? <span className="search-navigator-facet-header">
+              <a href="#" onClick={this.handleClick}>
+                {this.renderCheckbox()}
+                {this.props.name}
+              </a>
               {this.renderHelper()}
               {this.renderValueIndicator()}
-            </a>
+            </span>
           : <span className="search-navigator-facet-header">
               {this.props.name}
               {this.renderHelper()}
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
index 08c98b447f8..7def87dae3c 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.js.snap
@@ -8,171 +8,186 @@ exports[`should clear 1`] = `
   >
     clear
   </button>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
     <span
       className="spacer-left badge badge-secondary is-rounded"
     >
       3
     </span>
-  </a>
+  </span>
 </div>
 `;
 
 exports[`should render closed facet with value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
     <span
       className="spacer-left badge badge-secondary is-rounded"
     >
       1
     </span>
-  </a>
+  </span>
 </div>
 `;
 
 exports[`should render closed facet without value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1363 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;
 
 exports[`should render open facet with value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;
 
 exports[`should render open facet without value 1`] = `
 <div>
-  <a
+  <span
     className="search-navigator-facet-header"
-    href="#"
-    onClick={[Function]}
   >
-    <svg
-      className="little-spacer-right"
-      height="10"
-      style={
-        Object {
-          "paddingTop": 3,
-        }
-      }
-      viewBox="0 0 1792 1792"
-      width="10"
+    <a
+      href="#"
+      onClick={[Function]}
     >
-      <path
-        d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+      <svg
+        className="little-spacer-right"
+        height="10"
         style={
           Object {
-            "fill": "currentColor ",
+            "paddingTop": 3,
           }
         }
-      />
-    </svg>
-    foo
-  </a>
+        viewBox="0 0 1792 1792"
+        width="10"
+      >
+        <path
+          d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"
+          style={
+            Object {
+              "fill": "currentColor ",
+            }
+          }
+        />
+      </svg>
+      foo
+    </a>
+  </span>
 </div>
 `;