From f58e3227cb51365238d194dcfcf549ee952cb5f8 Mon Sep 17 00:00:00 2001
From: David Miculit <dmiculit@mozilla.com>
Date: Wed, 19 Aug 2026 14:12:40 +0300
Subject: [PATCH] feat: include the toggle checkbox and some accessibility
 improvements

---
 .../graphs/HighlightOptionsDropdown.jsx       | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/perfherder/graphs/HighlightOptionsDropdown.jsx b/ui/perfherder/graphs/HighlightOptionsDropdown.jsx
index 42e23e27461..cb881ed1cf6 100644
--- a/ui/perfherder/graphs/HighlightOptionsDropdown.jsx
+++ b/ui/perfherder/graphs/HighlightOptionsDropdown.jsx
@@ -34,7 +34,7 @@ const HighlightOptionsDropdown = ({
   ];
 
   return (
-    <Dropdown className="me-0 text-nowrap" title="Highlight Options Dropdown">
+    <Dropdown className="me-0 text-nowrap">
       <Dropdown.Toggle
         variant="secondary"
         aria-label="Highlight Options Dropdown"
@@ -47,15 +47,23 @@ const HighlightOptionsDropdown = ({
           <Dropdown.Item
             key={key}
             as="button"
+            className="d-flex align-items-center"
             onClick={() => updateStateParams({ [key]: !isChecked })}
+            role="menuitemcheckbox"
+            aria-checked={isChecked}
           >
-            {isChecked && (
-              <FontAwesomeIcon
-                icon={faCheck}
-                className="me-2"
-                title="Selected"
-              />
-            )}
+            <span
+              className="border border-secondary rounded me-2 d-flex align-items-center justify-content-center"
+              style={{ width: '18px', height: '18px' }}
+              aria-hidden="true"
+            >
+              {isChecked && (
+                <FontAwesomeIcon
+                  icon={faCheck}
+                  style={{ fontSize: '12px' }}
+                />
+              )}
+            </span>
             {label}
           </Dropdown.Item>
         ))}