Accessibility improvement for the add question button

surveyjs · Nov 27, 2024 · 4ad218a · 4ad218a
1 parent 801de14
commit 4ad218a
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 65 deletions.
diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts
@@ -43,7 +43,7 @@ export const getItemValueByIndex = ClientFunction((questionName, index) => {
 });
 
 export const handleShiftEnter = ClientFunction((selector: string) => {
-  document.querySelector(selector).addEventListener("keypress", function (e: any) {
+  document.querySelector(selector).addEventListener("keypress", function(e: any) {
     if (e.charCode === 13 && e.shiftKey) {
       var editorEl = document.querySelector(selector) as any;
       var selection = window.getSelection() as any;
@@ -127,7 +127,7 @@ export function getListItemByText(text) {
   return Selector(".sv-popup__content .sv-list .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 > button").withText("Add Question");
 }
 
 export function getVisibleElement(selector: string | Selector): Selector {
@@ -219,4 +219,4 @@ export function getDropdownValue(selector: string | Selector = ".sd-input.sd-dro
 
 export async function resetHoverToCreator(t: TestController): Promise<void> {
   await t.hover(Selector("#survey-creator"), { offsetX: 0, offsetY: 0 });
-}
+}
diff --git a/packages/survey-creator-angular/src/add-question.component.html b/packages/survey-creator-angular/src/add-question.component.html
@@ -1,17 +1,43 @@
 <ng-template #template>
-  <div *ngIf="adorner.showAddQuestionButton" [class]="'svc-element__add-new-question ' + buttonClass" [key2click]
-    (click)="addNewQuestion($event)"
-    (mouseover)="adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)"
-    data-bind="clickBubble: false">
-    <svg class="svc-panel__add-new-question-icon" [iconName]="('icon-add_24x24')" [size]="'auto'" sv-ng-svg-icon></svg>
-    <span class="svc-add-new-item-button__text">
-      {{ adorner.addNewQuestionText }}
-    </span>
-    <ng-template *ngIf="renderPopup"
-      [component]="{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }">
+  <div
+    *ngIf="adorner.showAddQuestionButton"
+    [class]="'svc-element__add-new-question ' + buttonClass"
+    (mouseover)="
+      adorner.hoverStopper && adorner.hoverStopper($event, $event.currentTarget)
+    "
+  >
+    <button [key2click] (click)="addNewQuestion($event)">
+      <svg
+        class="svc-panel__add-new-question-icon"
+        [iconName]="'icon-add_24x24'"
+        [size]="'auto'"
+        sv-ng-svg-icon
+      ></svg>
+      <span class="svc-add-new-item-button__text">
+        {{ adorner.addNewQuestionText }}
+      </span>
+    </button>
+    <ng-template
+      *ngIf="renderPopup"
+      [component]="{
+        name: 'svc-add-question-type-selector',
+        data: {
+          questionTypeSelectorModel: adorner.questionTypeSelectorModel,
+          renderPopup: renderPopup
+        }
+      }"
+    >
     </ng-template>
   </div>
-  <ng-template *ngIf="!renderPopup"
-    [component]="{ name: 'svc-add-question-type-selector', data: { questionTypeSelectorModel: adorner.questionTypeSelectorModel, renderPopup: renderPopup } }">
+  <ng-template
+    *ngIf="!renderPopup"
+    [component]="{
+      name: 'svc-add-question-type-selector',
+      data: {
+        questionTypeSelectorModel: adorner.questionTypeSelectorModel,
+        renderPopup: renderPopup
+      }
+    }"
+  >
   </ng-template>
-</ng-template>
+</ng-template>
diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss
@@ -326,6 +326,15 @@ svc-page {
 .svc-element__add-new-question {
   -webkit-tap-highlight-color: transparent;
   height: auto;
+  align-items: stretch;
+
+  button:first-of-type {
+    appearance: none;
+    border: none;
+    background: none;
+    cursor: pointer;
+    flex: 1;
+  }
 }
 
 .svc-add-new-item-button__text {

diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss
@@ -1098,6 +1098,7 @@ svc-question,
   justify-content: center;
 
   .svc-element__add-new-question {
+    display:flex;
     align-items: center;
     margin-top: calcSize(2);
     margin-left: 0;

diff --git a/packages/survey-creator-knockout/src/add-question.html b/packages/survey-creator-knockout/src/add-question.html
@@ -1,9 +1,15 @@
-<div
-  data-bind="css: 'svc-element__add-new-question ' + buttonClass, click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}">
-  <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
-  <!-- /ko -->
-  <span class="svc-add-new-item-button__text" data-bind="text: data.addNewQuestionText">
-  </span>
+<div data-bind="css: 'svc-element__add-new-question ' + buttonClass">
+  <button
+    data-bind="click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}"
+  >
+    <!-- ko component: { name: 'sv-svg-icon', params: { css: 'svc-panel__add-new-question-icon', iconName: 'icon-add_24x24', size: 'auto' } } -->
+    <!-- /ko -->
+    <span
+      class="svc-add-new-item-button__text"
+      data-bind="text: data.addNewQuestionText"
+    >
+    </span>
+  </button>
   <!-- ko if: $data.renderPopup -->
   <!-- ko component: { name: "svc-add-question-type-selector", params: { questionTypeSelectorModel: data.questionTypeSelectorModel, renderPopup: renderPopup } } -->
   <!-- /ko -->
@@ -12,4 +18,4 @@
 <!-- ko ifnot: $data.renderPopup -->
 <!-- ko component: { name: "svc-add-question-type-selector", params: { questionTypeSelectorModel: data.questionTypeSelectorModel, renderPopup: renderPopup } } -->
 <!-- /ko -->
-<!-- /ko -->
+<!-- /ko -->
diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx
@@ -1,15 +1,12 @@
 import * as React from "react";
-import { Action, Base, IAction, PageModel, SurveyModel } from "survey-core";
+import { Action } from "survey-core";
 import {
   attachKey2click,
   Popup,
-  SurveyActionBar,
   ReactElementFactory,
-  SurveyPage,
   SvgIcon,
   SurveyElementBase
 } from "survey-react-ui";
-import { ReactMouseEvent } from "./events";
 
 export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action, buttonClass?: string, renderPopup?: boolean }, any> {
   public get model() {
@@ -41,29 +38,33 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action
   protected renderElement(): JSX.Element {
     const addButtonClass = this.props.buttonClass || "svc-btn";
     return <>
-      {attachKey2click(<div
+      <div
         className={"svc-element__add-new-question " + addButtonClass}
-        onClick={(e) => {
-          e.stopPropagation();
-          this.model.addNewQuestion(this.model, new ReactMouseEvent(e));
-        }}
         onMouseOver={(e) => this.model.hoverStopper && this.model.hoverStopper(e.nativeEvent, e.currentTarget)}
       >
-        <SvgIcon
-          className={"svc-panel__add-new-question-icon"}
-          iconName={"icon-add_24x24"}
-          size={"auto"}
-        ></SvgIcon>
-        <span className="svc-add-new-item-button__text">
-          {this.model.addNewQuestionText}
-        </span>
+        {attachKey2click(<button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            this.model.addNewQuestion(this.model, e);
+          }}
+        >
+          <SvgIcon
+            className={"svc-panel__add-new-question-icon"}
+            iconName={"icon-add_24x24"}
+            size={"auto"}
+          ></SvgIcon>
+          <span className="svc-add-new-item-button__text">
+            {this.model.addNewQuestionText}
+          </span>
+        </button>)}
         {this.props.renderPopup !== false ? this.renderTypeSelector() : null}
-      </div>)}
+      </div>
       {this.props.renderPopup === false ? this.renderTypeSelector() : null}
     </>;
   }
 }
 
 ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", (props) => {
   return React.createElement(AddQuestionButtonComponent, props);
-});
+});
diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue
@@ -1,44 +1,60 @@
 <template>
   <div
     :class="rootCss"
-    v-on:click="
-      (e) => {
-        item.data.addNewQuestion(item, e);
-        e.stopPropagation();
-      }
+    v-on:mouseover="
+      (e) =>
+        item.data.hoverStopper && item.data.hoverStopper(e, e.currentTarget)
     "
-    v-key2click
-    v-on:mouseover="(e) => item.data.hoverStopper && item.data.hoverStopper(e, e.currentTarget)"
   >
-    <SvComponent
-      :is="'sv-svg-icon'"
-      class="svc-panel__add-new-question-icon"
-      :iconName="'icon-add_24x24'"
-      :size="'auto'"
-    ></SvComponent>
-    <span class="svc-add-new-item-button__text">
-      {{ item.data.addNewQuestionText }}
-    </span>
+    <button
+      v-on:click="
+        (e) => {
+          item.data.addNewQuestion(item, e);
+          e.stopPropagation();
+        }
+      "
+      v-key2click
+    >
+      <SvComponent
+        :is="'sv-svg-icon'"
+        class="svc-panel__add-new-question-icon"
+        :iconName="'icon-add_24x24'"
+        :size="'auto'"
+      ></SvComponent>
+      <span class="svc-add-new-item-button__text">
+        {{ item.data.addNewQuestionText }}
+      </span>
+    </button>
     <SvComponent
       :is="'svc-add-question-type-selector'"
-      v-if="needRenderPopup" 
-      :questionTypeSelectorModel="item.data.questionTypeSelectorModel" :renderPopup="needRenderPopup"
+      v-if="needRenderPopup"
+      :questionTypeSelectorModel="item.data.questionTypeSelectorModel"
+      :renderPopup="needRenderPopup"
     ></SvComponent>
   </div>
   <SvComponent
     :is="'svc-add-question-type-selector'"
-    v-if="!needRenderPopup" :questionTypeSelectorModel="item.data.questionTypeSelectorModel" :renderPopup="needRenderPopup"
+    v-if="!needRenderPopup"
+    :questionTypeSelectorModel="item.data.questionTypeSelectorModel"
+    :renderPopup="needRenderPopup"
   ></SvComponent>
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
 import type { Action } from "survey-core";
-import type {} from "survey-creator-core";
 import { key2ClickDirective as vKey2click } from "survey-vue3-ui";
 import { SvComponent } from "survey-vue3-ui";
 import { useBase } from "survey-vue3-ui";
-const props = defineProps<{ item: Action, buttonClass?: string, renderPopup?: any}>();
+const props = defineProps<{
+  item: Action;
+  buttonClass?: string;
+  renderPopup?: any;
+}>();
 useBase(() => props.item.data);
-const rootCss = computed(() => 'svc-element__add-new-question ' + (props.buttonClass || 'svc-btn'));
-const needRenderPopup = computed(() => props.renderPopup === undefined || props.renderPopup !== false);
+const rootCss = computed(
+  () => "svc-element__add-new-question " + (props.buttonClass || "svc-btn")
+);
+const needRenderPopup = computed(
+  () => props.renderPopup === undefined || props.renderPopup !== false
+);
 </script>