Merge pull request #1019 from processing/pr-1017-2.0

ksen0 · web-flow · commit ee8e1556ced0 · 2025-11-07T21:01:21.000+01:00
Prevent hover state from sticking on mobile accessibility toggles [2.0]
diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
@@ -20,10 +20,12 @@
   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);
+    }
   }
 }
 
@@ -93,10 +95,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,10 +20,12 @@`
`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`	`}`
`28`	`30`	`}`
`29`	`31`
`@@ -93,10 +95,13 @@`
`93`	`95`	`}`
`94`	`96`	`}`
`95`	`97`
`96`		`-li[aria-selected="false"]:hover .icon {`
`97`		`- svg {`
`98`		`- background: var(--accent-type-color);`
`99`		`- border-radius: 2rem;`
	`98`	`+// Only apply hover styles on devices with true hover capability (not touch devices)`
	`99`	`+@media (hover: hover) and (pointer: fine) {`
	`100`	`+ li[aria-selected="false"]:hover .icon {`
	`101`	`+ svg {`
	`102`	`+ background: var(--accent-type-color);`
	`103`	`+ border-radius: 2rem;`
	`104`	`+ }`
`100`	`105`	`}`
`101`	`106`	`}`
`102`	`107`