Merge pull request #7600 from surveyjs/bug/7596-dyn-panel-tab-focus

Bug/7596 Dynamic panel has wrong focus for tabs
surveyjs · Dec 28, 2023 · b9bcbf1 · b9bcbf1
2 parents f095bce + dfb1b19
commit b9bcbf1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -197,7 +197,9 @@
     overflow-x: hidden;
     white-space: nowrap;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
+        outline: none;
         box-shadow: inset 0px -2px 0px $primary;
     }
 }

diff --git a/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-focused-tab.png b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-focused-tab.png
diff --git a/visualRegressionTests/tests/defaultV2/paneldynamic.ts b/visualRegressionTests/tests/defaultV2/paneldynamic.ts
@@ -427,4 +427,35 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("paneldynamic-confirm-dialog", Selector(".sv-popup--confirm-delete .sv-popup__body-content"), t, comparer);
     });
   });
+  test("tab focused state for panel dynamic", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1280, 900);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "paneldynamic",
+                "name": "question1",
+                "templateElements": [
+                  {
+                    "type": "text",
+                    "name": "question2"
+                  }
+                ],
+                "panelCount": 4,
+                "minPanelCount": 4,
+                "renderMode": "tab"
+              }
+            ]
+          }
+        ]
+      });
+      await t
+        .click(Selector("button[title='Panel 1']"))
+        .pressKey("tab");
+      await takeElementScreenshot("paneldynamic-focused-tab", Selector(".sd-question--paneldynamic"), t, comparer);
+    });
+  });
 });