Fix wrapping div getting focused in CheckBoxGroup and RadioButtonGroup (#11021)

Fixes #9731

3 files changed, 31 insertions, 0 deletions

diff --git a/client/src/main/java/com/vaadin/client/widgets/ChildFocusAwareFlowPanel.java b/client/src/main/java/com/vaadin/client/widgets/ChildFocusAwareFlowPanel.java
index 244fb5e604..87350345de 100644
--- a/client/src/main/java/com/vaadin/client/widgets/ChildFocusAwareFlowPanel.java
+++ b/client/src/main/java/com/vaadin/client/widgets/ChildFocusAwareFlowPanel.java
@@ -90,6 +90,8 @@ public class ChildFocusAwareFlowPanel extends FocusableFlowPanel
     public ChildFocusAwareFlowPanel() {
         eventBus = new HandlerManager(this);
         getElement().getStyle().setOutlineStyle(OutlineStyle.NONE);
+        // The panel itself should not be focused.
+        getElement().setTabIndex(-1);
         super.addFocusHandler(handler);
         super.addBlurHandler(handler);
     }
diff --git a/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupFocusTest.java b/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupFocusTest.java
index ad9b600a32..742b55210a 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupFocusTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/checkboxgroup/CheckBoxGroupFocusTest.java
@@ -1,8 +1,12 @@
 package com.vaadin.tests.components.checkboxgroup;
 
+import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 
+import org.junit.Assert;
 import org.junit.Test;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.interactions.Actions;
 
 import com.vaadin.testbench.elements.ButtonElement;
 import com.vaadin.testbench.elements.CheckBoxGroupElement;
@@ -27,4 +31,15 @@ public class CheckBoxGroupFocusTest extends FocusTest {
         assertTrue(isFocusInsideElement(checkBoxGroup));
     }
 
+    @Test
+    public void focusDoesNotGoIntoWrapperElement() {
+        openTestURL();
+        new Actions(getDriver()).sendKeys(Keys.TAB, Keys.TAB, Keys.TAB)
+                .perform();
+        assertTrue("Focus not in the second check box group.",
+                isFocusInsideElement($(CheckBoxGroupElement.class).last()));
+        assertEquals("Focus should not be in the wrapping div.", "input",
+                getFocusedElement().getTagName());
+    }
+
 }
diff --git a/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupFocusTest.java b/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupFocusTest.java
index ca5e3565d0..27970740d3 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupFocusTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/radiobuttongroup/RadioButtonGroupFocusTest.java
@@ -1,10 +1,15 @@
 package com.vaadin.tests.components.radiobuttongroup;
 
+import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertTrue;
 
+import org.junit.Assert;
 import org.junit.Test;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.interactions.Actions;
 
 import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.CheckBoxGroupElement;
 import com.vaadin.testbench.elements.RadioButtonGroupElement;
 import com.vaadin.tests.components.FocusTest;
 
@@ -27,4 +32,13 @@ public class RadioButtonGroupFocusTest extends FocusTest {
         assertTrue(isFocusInsideElement(radioButtonGroup2));
     }
 
+    @Test
+    public void focusDoesNotGoIntoWrapperElement() {
+        openTestURL();
+        new Actions(getDriver()).sendKeys(Keys.TAB).perform();
+        assertTrue("Focus not in the second radio button group.",
+                isFocusInsideElement($(RadioButtonGroupElement.class).last()));
+        assertEquals("Focus should not be in the wrapping div.", "input",
+                getFocusedElement().getTagName());
+    }
 }