fix webui-make-clickable focus state

basher · Apr 30, 2024 · 2ed4308 · 2ed4308
1 parent 0339748
commit 2ed4308
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/ui/src/stylesheets/web-components/_webui-make-clickable.scss b/ui/src/stylesheets/web-components/_webui-make-clickable.scss
@@ -23,20 +23,18 @@ webui-make-clickable {
             }
         }
 
+        // Visible focus state only if 'data-url' link receives keyboard focus.
         &:focus-within {
-            box-shadow: 0 0 0 $border-width-l $color-focus;
-            outline: $border-width-l solid transparent; // So high contrast mode works.
-
-            // Remove focus styles on "data-url" link inside.
-            [data-url]:focus-visible {
-                box-shadow: none;
-                outline: none;
+            &:has([data-url]:focus-visible) {
+                box-shadow: 0 0 0 $border-width-l $color-focus;
+                outline: $border-width-l solid transparent; // So high contrast mode works.
             }
         }
 
-        &:has(:focus:not(:focus-visible)) {
+        // Remove focus styles on "data-url" link inside.
+        [data-url]:focus-visible {
             box-shadow: none;
-            outline: $border-width-l solid transparent;
+            outline: none;
         }
     }
 }