Fix nested buttons in question type selector

functionalTests/designer/add-new-question.ts

@@ -23,7 +23,7 @@ test("Add New Question", async t => {
     .click(getAddNewQuestionButton())
     .expect(Selector("span").withText("question1").visible).ok()
     .expect(getVisibleElement(".svc-question__content.svc-question__content--selected").exists).ok()
-    .click(Selector(".svc-element__add-new-question > button.svc-element__question-type-selector"))
+    .click(Selector(".svc-element__add-new-question button.svc-question-type-selector__button"))
     .wait(100)
     .pressKey("p")
     .click(Selector(".sv-popup:not(.sv-popup--overlay) li").withExactText("Panel").filterVisible())

functionalTests/designer/page-navigator.ts

@@ -3,7 +3,7 @@ import { ClientFunction, Selector } from "testcafe";
 const title = "Page navigator";
 
 export function getAddNewQuestionButton(n = 0) {
-  return Selector(".svc-element__add-new-question > span").withText("Add Question").nth(n);
+  return Selector(".svc-element__add-new-question > .svc-add-new-item-button__text").withText("Add Question").nth(n);
 }
 
 fixture`${title}`.page`${url}`.beforeEach(async (t) => {

functionalTests/designer/responsiveness.ts

@@ -307,7 +307,7 @@ test("Question type popup - wide", async (t) => {
   await setJSON(json);
   await t
     .resizeWindow(1920, 900)
-    .click(Selector("button.svc-element__question-type-selector"))
+    .click(Selector("button.svc-question-type-selector__button"))
     .expect(Selector(".sv-popup:not(.sv-popup--overlay) li").withText("Single-Line Input").visible).ok();
 });
 
@@ -326,7 +326,7 @@ test("Question type popup - narrow", async (t) => {
   await setJSON(json);
   await t
     .resizeWindow(380, 600)
-    .click(Selector("button.svc-element__question-type-selector"))
+    .click(Selector("button.svc-question-type-selector__button"))
     .expect(Selector(".sv-popup.sv-popup--overlay li").withText("Single-Line Input").filterVisible().exists).ok();
 });
 

functionalTests/helper.ts

@@ -131,7 +131,7 @@ export function getSurveyListItemByText(text) {
   return Selector(".sv-popup__content .sv-list__item").withText(text).filterVisible();
 }
 export function getAddNewQuestionButton() {
-  return Selector(".svc-element__add-new-question > span").withText("Add Question");
+  return Selector(".svc-element__add-new-question > .svc-add-new-item-button__text").withText("Add Question");
 }
 
 export function getVisibleElement(selector: string | Selector): Selector {
@@ -148,7 +148,7 @@ export function getSubToolboxItemByText(text: string) {
 }
 export async function addQuestionByAddQuestionButton(t: TestController, text: string) {
   await t
-    .click(Selector(".svc-element__add-new-question .svc-element__question-type-selector"))
+    .click(Selector(".svc-element__add-new-question .svc-question-type-selector"))
     .click(Selector(".svc-list__item span").withExactText(text).filterVisible());
 }
 

packages/survey-creator-angular/src/add-question-type-selector.component.html

@@ -1,8 +1,11 @@
 <ng-template #template>
-  <button type="button" [key2click] (click)="selectQuestionType($event)" [attr.title]="questionTypeSelectorModel.title"
-    [attr.aria-label]="questionTypeSelectorModel.title" class="svc-element__question-type-selector">
-    <svg class="svc-element__question-type-selector-icon" [iconName]="questionTypeSelectorModel.iconName"
-      [size]="'auto'" sv-ng-svg-icon></svg>
+  <span class="svc-question-type-selector">
+    <button type="button" [key2click] (click)="selectQuestionType($event)"
+      [attr.title]="questionTypeSelectorModel.title" [attr.aria-label]="questionTypeSelectorModel.title"
+      class="svc-question-type-selector__button">
+      <svg class="svc-question-type-selector__icon" [iconName]="questionTypeSelectorModel.iconName" [size]="'auto'"
+        sv-ng-svg-icon></svg>
+    </button>
     <sv-ng-popup *ngIf="renderPopup" [popupModel]="questionTypeSelectorModel.popupModel"></sv-ng-popup>
-  </button>
+  </span>
 </ng-template>

packages/survey-creator-core/src/components/page.scss

@@ -394,43 +394,45 @@ svc-page {
     var(--ctr-button-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
 }
 
-.svc-element__question-type-selector {
+.svc-question-type-selector {
   position: absolute;
   inset-inline-end: 0;
-
-  appearance: none;
   display: flex;
-  padding: var(--ctr-surface-button-contextual-button-padding-top, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-right, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-bottom, var(--lbr-spacing-x1))
-    var(--ctr-surface-button-contextual-button-padding-left, var(--lbr-spacing-x1));
-  border-radius: var(--ctr-surface-button-contextual-button-corner-radius, var(--lbr-corner-radius-x05));
   box-sizing: border-box;
   border: none;
+  border-radius: var(--ctr-surface-button-contextual-button-corner-radius, var(--lbr-corner-radius-x05));
   background: transparent;
   cursor: pointer;
 
   margin: var(--ctr-surface-button-contextual-button-margin-vertical, var(--lbr-spacing-x1))
     var(--ctr-surface-button-contextual-button-margin-horizontal, var(--lbr-spacing-x1));
-  outline: none;
   transition: background-color $creator-transition-duration;
 
-  &:hover {
-    background-color: var(
-      --ctr-button-contextual-button-background-color-hovered,
+  &:focus-within {
+    background: var(
+      --ctr-button-contextual-button-background-color-focused,
       var(--sjs-primary-background-10, #19b3941a)
     );
   }
-
-  &:focus {
-    background: var(
-      --ctr-button-contextual-button-background-color-focused,
+  &:hover {
+    background-color: var(
+      --ctr-button-contextual-button-background-color-hovered,
       var(--sjs-primary-background-10, #19b3941a)
     );
   }
 }
+.svc-question-type-selector__button {
+  appearance: none;
+  padding: var(--ctr-surface-button-contextual-button-padding-top, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-right, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-bottom, var(--lbr-spacing-x1))
+    var(--ctr-surface-button-contextual-button-padding-left, var(--lbr-spacing-x1));
+  background: transparent;
+  border: none;
+  outline: none;
+}
 
-.svc-element__question-type-selector-icon {
+.svc-question-type-selector__icon {
   width: var(--ctr-surface-button-contextual-button-icon-width, var(--lbr-size-x3));
   height: var(--ctr-surface-button-contextual-button-icon-height, var(--lbr-size-x3));
   display: flex;