#6320 Do not keep buttons focused after click (#6322)

* #6320 Do not keep buttons focused after click Fixes #6320 * #6320 Do not keep buttons focused after click Fixes #6320 * #6320 - update screenshots
surveyjs · Dec 25, 2024 · 6063a5f · 6063a5f
1 parent f663b96
commit 6063a5f
Show file tree

Hide file tree

Showing 7 changed files with 6 additions and 3 deletions.
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -107,7 +107,7 @@ svc-page {
   }
   //hovered and focused state
   &:hover,
-  &:focus {
+  &:focus-visible {
     background-color: var(--ctr-survey-page-toolbar-item-background-color-hovered, $background-dim);
   }
 

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -72,7 +72,7 @@ svc-question {
   }
   //hovered and focused state
   &:hover,
-  &:focus {
+  &:focus-visible {
     background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
   }
 
@@ -1328,7 +1328,7 @@ svc-question,
   background-color: transparent;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     opacity: initial;
     background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-hovered, $background-dim);
   }

diff --git a/...alRegressionTests-V2/tests/designer/etalons/page-adorner-collapsed-selected.png b/...alRegressionTests-V2/tests/designer/etalons/page-adorner-collapsed-selected.png
diff --git a/visualRegressionTests-V2/tests/designer/etalons/question-button-after-click.png b/visualRegressionTests-V2/tests/designer/etalons/question-button-after-click.png
diff --git a/visualRegressionTests/tests/designer/etalons/page-adorner-collapsed-selected.png b/visualRegressionTests/tests/designer/etalons/page-adorner-collapsed-selected.png
diff --git a/visualRegressionTests/tests/designer/etalons/question-button-after-click.png b/visualRegressionTests/tests/designer/etalons/question-button-after-click.png
diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts
@@ -2548,6 +2548,9 @@ test("Check question button states", async (t) => {
     await t.click(button);
     await takeElementScreenshot("question-button-checked.png", button, t, comparer);
     await t.click(button);
+    await t.hover(Selector(".svc-question__content"));
+    await takeElementScreenshot("question-button-after-click.png", button, t, comparer);
+    await t.pressKey("tab shift+tab");
     await takeElementScreenshot("question-button-focused.png", button, t, comparer);
     await ClientFunction(() => {
       const question = window["creator"].survey.getQuestionByName("q1");