fix: accesibility with icon dropdown (#9913)

Co-authored-by: aryanraj202 <134063935+aryanraj202@users.noreply.github.com>
Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>

Author: 3 people

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 bg-white dark:bg-primary-medium dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/100`}
+              className={({ active }) =>
+                `px-3 py-2 flex items-center ${
+                  active
+                    ? "bg-red-400"
+                    : "dark:hover:bg-tertiary-medium/60 hover:bg-secondary-low/100"
+                }`
+              }
             >
               <Icon className="h-5 w-5 mr-2 fill-grey-700 inline align-center justify-center" />{" "}
               <span>{icon}</span>