From b9316364b4594513b85e17f0f86a9a5df4ef6561 Mon Sep 17 00:00:00 2001
From: Carla Severe <csevere@mozilla.com>
Date: Tue, 3 Dec 2024 16:44:21 -0800
Subject: [PATCH] Added the checked item count to the filter header name (#806)

* added the checked item count to filter header name

Need to add tests for this. Will create a ticket.

* update snapshots

* add colors to count

Revert "remove package-lock.json"

This reverts commit 23c2be6b79a044cbf0380413101b92d52d865d06.

added color to count and box comp for styling

* remove unnecessary fontSize style

* restored package-json from use key filters commit

* Update snapshots

* resolve pr comments

* remove unecessary space and condition
---
 .../OverTimeResultsView.test.tsx.snap         | 63 ++++++++------
 .../__snapshots__/ResultsTable.test.tsx.snap  | 63 ++++++++------
 .../__snapshots__/ResultsView.test.tsx.snap   | 63 ++++++++------
 .../SubtestsResultsView.test.tsx.snap         | 84 ++++++++++++-------
 src/components/CompareResults/TableHeader.tsx | 27 +++---
 5 files changed, 185 insertions(+), 115 deletions(-)

diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
index f89a7116b..ea1513927 100644
--- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
@@ -260,24 +260,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Platform (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Platform
+          <div
+            aria-label="4 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            4
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -307,24 +312,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Status (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Status
+          <div
+            aria-label="3 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            3
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -344,24 +354,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Confidence (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Confidence
+          <div
+            aria-label="4 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            4
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
index a34a32d8f..b331294a5 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
@@ -994,24 +994,29 @@ exports[`Results Table Should match snapshot 1`] = `
                     <button
                       aria-haspopup="true"
                       aria-label="Platform (Click to filter values)"
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
                       Platform
+                      <div
+                        aria-label="4 items selected"
+                        class="MuiBox-root css-18uhbjh"
+                      >
+                        (
+                        4
+                        )
+                      </div>
                       <svg
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                        data-testid="FilterListIcon"
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                        data-testid="KeyboardArrowDownIcon"
                         focusable="false"
-                        role="img"
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                          d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                         />
-                        <title>
-                          No active filters
-                        </title>
                       </svg>
                       <span
                         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -1041,24 +1046,29 @@ exports[`Results Table Should match snapshot 1`] = `
                     <button
                       aria-haspopup="true"
                       aria-label="Status (Click to filter values)"
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
                       Status
+                      <div
+                        aria-label="3 items selected"
+                        class="MuiBox-root css-18uhbjh"
+                      >
+                        (
+                        3
+                        )
+                      </div>
                       <svg
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                        data-testid="FilterListIcon"
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                        data-testid="KeyboardArrowDownIcon"
                         focusable="false"
-                        role="img"
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                          d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                         />
-                        <title>
-                          No active filters
-                        </title>
                       </svg>
                       <span
                         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -1078,24 +1088,29 @@ exports[`Results Table Should match snapshot 1`] = `
                     <button
                       aria-haspopup="true"
                       aria-label="Confidence (Click to filter values)"
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
                       Confidence
+                      <div
+                        aria-label="4 items selected"
+                        class="MuiBox-root css-18uhbjh"
+                      >
+                        (
+                        4
+                        )
+                      </div>
                       <svg
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                        data-testid="FilterListIcon"
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                        data-testid="KeyboardArrowDownIcon"
                         focusable="false"
-                        role="img"
                         viewBox="0 0 24 24"
                       >
                         <path
-                          d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                          d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                         />
-                        <title>
-                          No active filters
-                        </title>
                       </svg>
                       <span
                         class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
index b10a4351c..754d29dff 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
@@ -923,24 +923,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Platform (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Platform
+          <div
+            aria-label="4 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            4
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -970,24 +975,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Status (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Status
+          <div
+            aria-label="3 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            3
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -1007,24 +1017,29 @@ exports[`Results View The table should match snapshot and other elements should
         <button
           aria-haspopup="true"
           aria-label="Confidence (Click to filter values)"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
           Confidence
+          <div
+            aria-label="4 items selected"
+            class="MuiBox-root css-18uhbjh"
+          >
+            (
+            4
+            )
+          </div>
           <svg
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-            data-testid="FilterListIcon"
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+            data-testid="KeyboardArrowDownIcon"
             focusable="false"
-            role="img"
             viewBox="0 0 24 24"
           >
             <path
-              d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+              d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
             />
-            <title>
-              No active filters
-            </title>
           </svg>
           <span
             class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
diff --git a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
index a5e53c2d2..e3b6a5868 100644
--- a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
@@ -432,24 +432,29 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
                   <button
                     aria-haspopup="true"
                     aria-label="Status (Click to filter values)"
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     Status
+                    <div
+                      aria-label="3 items selected"
+                      class="MuiBox-root css-18uhbjh"
+                    >
+                      (
+                      3
+                      )
+                    </div>
                     <svg
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                      data-testid="FilterListIcon"
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                      data-testid="KeyboardArrowDownIcon"
                       focusable="false"
-                      role="img"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                       />
-                      <title>
-                        No active filters
-                      </title>
                     </svg>
                     <span
                       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -469,24 +474,29 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
                   <button
                     aria-haspopup="true"
                     aria-label="Confidence (Click to filter values)"
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     Confidence
+                    <div
+                      aria-label="4 items selected"
+                      class="MuiBox-root css-18uhbjh"
+                    >
+                      (
+                      4
+                      )
+                    </div>
                     <svg
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                      data-testid="FilterListIcon"
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                      data-testid="KeyboardArrowDownIcon"
                       focusable="false"
-                      role="img"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                       />
-                      <title>
-                        No active filters
-                      </title>
                     </svg>
                     <span
                       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -1290,24 +1300,29 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
                   <button
                     aria-haspopup="true"
                     aria-label="Status (Click to filter values)"
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     Status
+                    <div
+                      aria-label="3 items selected"
+                      class="MuiBox-root css-18uhbjh"
+                    >
+                      (
+                      3
+                      )
+                    </div>
                     <svg
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                      data-testid="FilterListIcon"
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                      data-testid="KeyboardArrowDownIcon"
                       focusable="false"
-                      role="img"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                       />
-                      <title>
-                        No active filters
-                      </title>
                     </svg>
                     <span
                       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
@@ -1327,24 +1342,29 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
                   <button
                     aria-haspopup="true"
                     aria-label="Confidence (Click to filter values)"
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-gsklu7-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation css-l63e0u-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     Confidence
+                    <div
+                      aria-label="4 items selected"
+                      class="MuiBox-root css-18uhbjh"
+                    >
+                      (
+                      4
+                      )
+                    </div>
                     <svg
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-reqpbo-MuiSvgIcon-root"
-                      data-testid="FilterListIcon"
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-fuz6rv-MuiSvgIcon-root"
+                      data-testid="KeyboardArrowDownIcon"
                       focusable="false"
-                      role="img"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+                        d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"
                       />
-                      <title>
-                        No active filters
-                      </title>
                     </svg>
                     <span
                       class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
diff --git a/src/components/CompareResults/TableHeader.tsx b/src/components/CompareResults/TableHeader.tsx
index e2a77d4c2..97d0d8031 100644
--- a/src/components/CompareResults/TableHeader.tsx
+++ b/src/components/CompareResults/TableHeader.tsx
@@ -1,9 +1,10 @@
 import CheckIcon from '@mui/icons-material/Check';
-import FilterListIcon from '@mui/icons-material/FilterList';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { Box } from '@mui/system';
 import {
   usePopupState,
   bindTrigger,
@@ -36,6 +37,8 @@ function FilterableColumn({
   onClear,
 }: FilterableColumnProps) {
   const popupState = usePopupState({ variant: 'popover', popupId: columnId });
+  const possibleCheckedValues =
+    possibleValues.length - (uncheckedValues?.size || 0);
 
   const onClickFilter = (valueKey: string) => {
     const newUncheckedValues = new Set(uncheckedValues);
@@ -72,19 +75,21 @@ function FilterableColumn({
             theme.palette.mode == 'light'
               ? Colors.Background200
               : Colors.Background200Dark,
-          borderRadius: '4px',
-          fontSize: 'inherit',
+          borderRadius: 0.5,
+          padding: '6px 12px',
         })}
       >
         {name}
-        <FilterListIcon
-          fontSize='small'
-          color={hasFilteredValues ? 'primary' : 'inherit'}
-          sx={{ marginInlineStart: 1 }}
-          titleAccess={
-            hasFilteredValues ? 'Some filters are active' : 'No active filters'
-          }
-        />
+        <Box
+          sx={{
+            paddingInlineStart: 0.5,
+            color: 'primary.main',
+          }}
+          aria-label={`${possibleCheckedValues} items selected`}
+        >
+          ({possibleCheckedValues})
+        </Box>
+        <KeyboardArrowDownIcon />
       </Button>
       <Menu {...bindMenu(popupState)}>
         <MenuItem dense={true} onClick={onClear}>