diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss index 5419ae2c38..bbd22fb8f2 100644 --- 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 new file mode 100644 index 0000000000..83f8ee87ab Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/paneldynamic-focused-tab.png differ diff --git a/visualRegressionTests/tests/defaultV2/paneldynamic.ts b/visualRegressionTests/tests/defaultV2/paneldynamic.ts index 66e2f03dd1..686c35460c 100644 --- 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); + }); + }); });