fix: show keyboard focus outline for map controls (#3414)

vaadin · Feb 9, 2022 · 806c2e4 · 806c2e4
1 parent 87bbb0e
commit 806c2e4
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/packages/map/theme/lumo/vaadin-map-styles.js b/packages/map/theme/lumo/vaadin-map-styles.js
@@ -50,7 +50,6 @@ registerStyles(
 
     .ol-control {
       border-radius: var(--lumo-border-radius-m);
-      overflow: hidden;
       transition: 0.15s box-shadow, 0.15s background-color;
       -webkit-backdrop-filter: blur(8px);
     }
@@ -67,6 +66,10 @@ registerStyles(
     .ol-control button {
       width: var(--lumo-size-s);
       height: var(--lumo-size-s);
+      border-radius: inherit;
+      font-family: 'lumo-icons';
+      font-size: var(--lumo-icon-size-s);
+      font-weight: 400;
     }
 
     .ol-control button,
@@ -78,6 +81,7 @@ registerStyles(
     }
 
     .ol-control:hover button,
+    .ol-control button:focus,
     .ol-attribution:hover ul {
       opacity: 1;
     }
@@ -90,14 +94,30 @@ registerStyles(
       background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
+    @supports not selector(:focus-visible) {
+      .ol-control button:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+      }
+    }
+
+    .ol-control button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
     .ol-zoom {
       gap: 2px;
     }
 
-    .ol-control button {
-      font-family: 'lumo-icons';
-      font-size: var(--lumo-icon-size-s);
-      font-weight: 400;
+    button.ol-zoom-in {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    button.ol-zoom-out {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
     }
 
     .ol-attribution.ol-uncollapsible {

diff --git a/packages/map/theme/material/vaadin-map-styles.js b/packages/map/theme/material/vaadin-map-styles.js
@@ -23,7 +23,6 @@ registerStyles(
 
     .ol-control {
       border-radius: 4px;
-      overflow: hidden;
       transition: 0.1s box-shadow;
       box-shadow: var(--material-shadow-elevation-2dp);
     }
@@ -41,6 +40,7 @@ registerStyles(
       width: 2em;
       height: 2em;
       background-color: var(--material-background-color);
+      border-radius: inherit;
     }
 
     .ol-control button,
@@ -61,10 +61,32 @@ registerStyles(
       background-color: var(--material-secondary-background-color);
     }
 
+    @supports not selector(:focus-visible) {
+      .ol-control button:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--material-primary-color);
+      }
+    }
+
+    .ol-control button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--material-primary-color);
+    }
+
     .ol-zoom {
       gap: 1px;
     }
 
+    button.ol-zoom-in {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    button.ol-zoom-out {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
     .ol-attribution.ol-uncollapsible {
       border-radius: 4px 0 0;
     }