From 43daff0ebd30ea9ee52e89ad77cfc54028404fe3 Mon Sep 17 00:00:00 2001
From: aryanraj202 <134063935+aryanraj202@users.noreply.github.com>
Date: Sat, 16 Dec 2023 19:13:08 +0530
Subject: [PATCH] fixed #9707 - Accesibility Issue with Icon Dropdown

---
 components/IconSearch.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/IconSearch.js b/components/IconSearch.js
index 1fdc01251f5..8fd15867035 100644
--- a/components/IconSearch.js
+++ b/components/IconSearch.js
@@ -37,7 +37,13 @@ function IconSearch({ selectedIcon, handleSelectedIcon }) {
             <Combobox.Option
               key={icon}
               value={icon}
-              className={`px-3 py-2 flex items-center dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/40`}
+              className={({ active }) =>
+                `px-3 py-2 flex items-center ${
+                  active
+                    ? "bg-red-400"
+                    : "dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/40"
+                }`
+              }
             >
               <Icon className="h-5 w-5 mr-2 fill-grey-700 inline align-center justify-center" />{" "}
               <span>{icon}</span>