Fix styling of Window control buttons to show focus (#10285)

Fixes #8918

4 files changed, 102 insertions, 0 deletions

diff --git a/tests/screenshots b/tests/screenshots
-Subproject a20d0108ad315b1b5a4626619cd157e03cfa7b7
+Subproject 310bb9b24f810a041376be5e926c5859cda8efb
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
index 52dac4f6f1..75f914a50b 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_window.scss
@@ -188,6 +188,31 @@ $v-window-modality-curtain-background-color: #222 !default;
       color: inherit;
     }
   }
+  
+  .#{$primary-stylename}-closebox:focus::after {
+    content: "";
+    position: absolute;
+    top: round($v-unit-size/6);
+    right: round($v-unit-size/6);
+    bottom: round($v-unit-size/6);
+    left: round($v-unit-size/18);
+    border-radius: $v-window-border-radius;
+    
+    @include valo-focus-style;
+  }
+  
+  .#{$primary-stylename}-maximizebox:focus::after,
+  .#{$primary-stylename}-restorebox:focus::after {
+    content: "";
+    position: absolute;
+    top: round($v-unit-size/6);
+    right: round($v-unit-size/18);
+    bottom: round($v-unit-size/6);
+    left: round($v-unit-size/6);
+    border-radius: $v-window-border-radius;
+    
+    @include valo-focus-style;
+  }
 
   .#{$primary-stylename}-closebox {
     padding-right: round($v-unit-size/9);
@@ -222,6 +247,10 @@ $v-window-modality-curtain-background-color: #222 !default;
       width: $v-unit-size;
       padding-right: 0;
       border-bottom-left-radius: $v-window-border-radius;
+      
+      &:focus::after {
+        left: round($v-unit-size/6);
+      }
     }
   }
 
diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/WindowControlButtonFocus.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/WindowControlButtonFocus.java
new file mode 100644
index 0000000000..ce30991be1
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/WindowControlButtonFocus.java
@@ -0,0 +1,25 @@
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Window;
+
+public class WindowControlButtonFocus extends AbstractTestUI {
+    @Override
+    protected void setup(VaadinRequest request) {
+        Window window = new Window("Window", new Label());
+        window.center();
+        addWindow(window);
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 8918;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Window control buttons should have noticeable focus styles.";
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/themes/valo/WindowControlButtonFocusTest.java b/uitest/src/test/java/com/vaadin/tests/themes/valo/WindowControlButtonFocusTest.java
new file mode 100644
index 0000000000..fb095c07b4
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/themes/valo/WindowControlButtonFocusTest.java
@@ -0,0 +1,48 @@
+package com.vaadin.tests.themes.valo;
+
+import java.io.IOException;
+import java.util.Arrays;
+import java.util.List;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.remote.DesiredCapabilities;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.WindowElement;
+import com.vaadin.testbench.parallel.Browser;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class WindowControlButtonFocusTest extends MultiBrowserTest {
+
+    @Override
+    public List<DesiredCapabilities> getBrowsersToTest() {
+        return Arrays.asList(Browser.CHROME.getDesiredCapabilities(),
+                Browser.IE11.getDesiredCapabilities());
+    }
+
+    @Test
+    public void focusMaximize() throws IOException, InterruptedException {
+        openTestURL();
+
+        WebElement window = $(WindowElement.class).first();
+        WebElement maximize = window
+                .findElement(By.className("v-window-maximizebox"));
+
+        executeScript("arguments[0].focus()", maximize);
+        compareScreen(window, "maximize-focused");
+    }
+
+    @Test
+    public void focusClose() throws IOException {
+        openTestURL();
+
+        WebElement window = $(WindowElement.class).first();
+        WebElement close = window
+                .findElement(By.className("v-window-closebox"));
+
+        executeScript("arguments[0].focus()", close);
+        compareScreen(window, "close-focused");
+    }
+
+}