fix hover accesibility toggle

Homaid · ksen0 · commit 208cc336a761 · 2025-11-07T20:38:14.000+01:00
diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
@@ -20,11 +20,14 @@
   width: 100%;
   height: 100%;
   cursor: pointer;
-  &:hover {
-    border: 1px solid var(--accent-color);
-    background-color: var(--accent-type-color);
-    color: var(--accent-color);
+    @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      border: 1px solid var(--accent-color);
+      background-color: var(--accent-type-color);
+      color: var(--accent-color);
+    }
   }
+
 }
 
 .options {
@@ -93,10 +96,13 @@
   }
 }
 
-li[aria-selected="false"]:hover .icon {
-  svg {
-    background: var(--accent-type-color);
-    border-radius: 2rem;
+// Only apply hover styles on devices with true hover capability (not touch devices)
+@media (hover: hover) and (pointer: fine) {
+  li[aria-selected="false"]:hover .icon {
+    svg {
+      background: var(--accent-type-color);
+      border-radius: 2rem;
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -20,11 +20,14 @@`
`20`	`20`	`width: 100%;`
`21`	`21`	`height: 100%;`
`22`	`22`	`cursor: pointer;`
`23`		`- &:hover {`
`24`		`- border: 1px solid var(--accent-color);`
`25`		`- background-color: var(--accent-type-color);`
`26`		`- color: var(--accent-color);`
	`23`	`+ @media (hover: hover) and (pointer: fine) {`
	`24`	`+ &:hover {`
	`25`	`+ border: 1px solid var(--accent-color);`
	`26`	`+ background-color: var(--accent-type-color);`
	`27`	`+ color: var(--accent-color);`
	`28`	`+ }`
`27`	`29`	`}`
	`30`	`+`
`28`	`31`	`}`
`29`	`32`
`30`	`33`	`.options {`
`@@ -93,10 +96,13 @@`
`93`	`96`	`}`
`94`	`97`	`}`
`95`	`98`
`96`		`-li[aria-selected="false"]:hover .icon {`
`97`		`- svg {`
`98`		`- background: var(--accent-type-color);`
`99`		`- border-radius: 2rem;`
	`99`	`+// Only apply hover styles on devices with true hover capability (not touch devices)`
	`100`	`+@media (hover: hover) and (pointer: fine) {`
	`101`	`+ li[aria-selected="false"]:hover .icon {`
	`102`	`+ svg {`
	`103`	`+ background: var(--accent-type-color);`
	`104`	`+ border-radius: 2rem;`
	`105`	`+ }`
`100`	`106`	`}`
`101`	`107`	`}`
`102`	`108`