Work for #4847: implement focus state for expanded panel in property grid

packages/survey-creator-core/src/property-grid-theme/blocks/spg-panel.scss

@@ -25,15 +25,11 @@
   cursor: default;
 }
 
-.spg-panel__title--expandable:not(.spg-panel__title[aria-expanded=true]) {
-
-  &:hover,
-  &:focus {
-    background-color: $background-dim;
-  }
+.spg-panel__title--collapsed:hover,
+.spg-panel__title--expandable:focus {
+  background-color: $background-dim;
 }
 
-.spg-panel__title[aria-expanded=true],
 .spg-panel__title--expanded {
   color: $foreground;
   font-weight: 600;

packages/survey-creator-core/src/property-grid-theme/property-grid.ts

@@ -23,7 +23,8 @@ export var propertyGridCss = {
   panel: {
     title: "spg-title spg-panel__title",
     titleExpandable: "spg-panel__title--expandable",
-    titleOnExpand: "spg-panel__title--expanded",
+    titleExpanded: "spg-panel__title--expanded",
+    titleCollapsed: "spg-panel__title--collapsed",
     titleOnError: "spg-panel__title--error",
     description: "spg-description spg-panel__description",
     container: "spg-panel spg-row__panel",

visualRegressionTests/tests/designer/multiple-text.ts

@@ -1,4 +1,4 @@
-import { Selector } from "testcafe";
+import { ClientFunction, Selector } from "testcafe";
 import { url, setJSON, getPropertyGridCategory, generalGroupName, wrapVisualTest, takeElementScreenshot } from "../../helper";
 
 const title = "MultipleText Screenshot";
@@ -38,6 +38,7 @@ test("Multiple text items", async (t) => {
     await t
       .click(Selector(".sd-question"))
       .click(getPropertyGridCategory("Items"));
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("multiple-text-items.png", Selector(".svc-side-bar .spg-panel").nth(1), t, comparer);
   });
 });

visualRegressionTests/tests/designer/pg-editors.ts

@@ -664,7 +664,24 @@ test("Check accepted file types hint link", async (t) => {
     await takeElementScreenshot("file-accepted-types-hint.png", Selector("[data-name='acceptedTypes']"), t, comparer);
   });
 });
-
+test("Check property grid panel' header states", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await setJSON({});
+    await t.resizeWindow(1920, 1920);
+    const headerSelector = Selector("h4[aria-label=General]").nth(0);
+    await t
+      .click(headerSelector);
+    await takeElementScreenshot("pg-panel-header-expanded-focused.png", headerSelector, t, comparer);
+    await t.pressKey("tab");
+    await takeElementScreenshot("pg-panel-header-expanded.png", headerSelector, t, comparer);
+    await t
+      .click(headerSelector);
+    await takeElementScreenshot("pg-panel-header-collapsed-focused.png", headerSelector, t, comparer);
+    await t.pressKey("tab");
+    await resetHoverToCreator(t);
+    await takeElementScreenshot("pg-panel-header-collapsed.png", headerSelector, t, comparer);
+  });
+});
 test("Dropdown input in property grid", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     await t.resizeWindow(1240, 870);
@@ -677,4 +694,3 @@ test("Dropdown input in property grid", async (t) => {
     await takeElementScreenshot("pg-dropdown-editor-input.png", Selector(".spg-dropdown[aria-label='Survey language']"), t, comparer);
   });
 });
-

visualRegressionTests/tests/designer/theme-tab.ts

@@ -66,25 +66,30 @@ test("theme setting property grid", async (t) => {
     const westResizer = Selector(".svc-resizer-west");
     await t.drag(westResizer, -150, 0);
 
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-general-group.png", expandedGroup, t, comparer);
 
     await t.click(getPropertyGridCategory("General"));
     await t.click(getPropertyGridCategory("Header"));
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-header-group.png", expandedGroup, t, comparer);
 
     await t.click(expandedGroup.find(".sv-button-group__item-caption").withText("Advanced"));
     await takeElementScreenshot("theme-editor-property-grid-header-group-advanced.png", expandedGroup, t, comparer);
 
     await t.click(getPropertyGridCategory("Header"));
     await t.click(getPropertyGridCategory("Background"));
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-background-group.png", expandedGroup, t, comparer);
 
     await t.click(getPropertyGridCategory("Background"));
     await t.click(getPropertyGridCategory("Appearance"));
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-appearance-group.png", expandedGroup, t, comparer);
 
     await t.click(getPropertyGridCategory("Appearance"));
     await t.click(getPropertyGridCategory("Advanced"));
+    await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-advanced-group.png", expandedGroup, t, comparer);
   });
 });