From 70c85e478746ca074e7c44f5a9eb199d995235e4 Mon Sep 17 00:00:00 2001 From: Koen Van Geert Date: Wed, 27 Nov 2024 14:54:55 +0100 Subject: [PATCH] Accessibility improvement for the add question button --- functionalTests/helper.ts | 6 +- .../src/add-question.component.html | 52 ++++++++++++---- .../src/components/page.scss | 9 +++ .../src/components/question.scss | 30 +++++++++ .../src/add-question.html | 20 +++--- .../src/AddQuestionButton.tsx | 39 ++++++------ .../src/tabs/designer/AddQuestion.vue | 62 ++++++++++++------- 7 files changed, 153 insertions(+), 65 deletions(-) diff --git a/functionalTests/helper.ts b/functionalTests/helper.ts index 9d901373db..db9318a913 100644 --- 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 { await t.hover(Selector("#survey-creator"), { offsetX: 0, offsetY: 0 }); -} \ No newline at end of file +} diff --git a/packages/survey-creator-angular/src/add-question.component.html b/packages/survey-creator-angular/src/add-question.component.html index 12f19c5fd8..4499c36927 100644 --- a/packages/survey-creator-angular/src/add-question.component.html +++ b/packages/survey-creator-angular/src/add-question.component.html @@ -1,17 +1,43 @@ -
- - - {{ adorner.addNewQuestionText }} - - +
+ +
- + - \ No newline at end of file + diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss index b0297b532a..65b4c27b13 100644 --- a/packages/survey-creator-core/src/components/page.scss +++ b/packages/survey-creator-core/src/components/page.scss @@ -334,6 +334,15 @@ svc-page { padding: var(--ctr-surface-button-padding-vertical, calcSize(2)) var(--ctr-surface-button-padding-horizontal-contextual-button, calcSize(10)); border-radius: var(--ctr-surface-button-corner-radius, calcSize(0.5)); + align-items: stretch; + + button:first-of-type { + appearance: none; + border: none; + background: none; + cursor: pointer; + flex: 1; + } } .svc-element__add-new-question:focus { diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 4ea242cf28..e3bd7e6163 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -1109,6 +1109,36 @@ svc-question, .svc-element__add-new-question { margin-top: var(--ctr-survey-panel-add-button-margin-top, calcSize(2)); + display:flex; + align-items: center; + margin-left: 0; + margin-right: 0; + width: auto; + height: calcSize(5); + line-height: calcSize(5); + vertical-align: baseline; + text-align: center; + cursor: pointer; + user-select: none; + + border: none; + box-shadow: none; + padding: calcSize(0.5) calcSize(2); + + &:hover { + outline: none; + } + + .svc-add-new-item-button__text { + display: flex; + align-items: center; + flex-grow: 1; + justify-content: center; + margin: calcSize(1) calcSize(3); + line-height: var(--sjs-line-height-x2, #{calcSize(2)}); + color: var(--ctr-survey-action-button-text-color-positive, $primary); + text-wrap: nowrap; + } } .svc-element__add-new-question-icon { diff --git a/packages/survey-creator-knockout/src/add-question.html b/packages/survey-creator-knockout/src/add-question.html index df6e1ead56..eb535876a9 100644 --- a/packages/survey-creator-knockout/src/add-question.html +++ b/packages/survey-creator-knockout/src/add-question.html @@ -1,9 +1,15 @@ -
- - - - +
+ @@ -12,4 +18,4 @@ - \ No newline at end of file + diff --git a/packages/survey-creator-react/src/AddQuestionButton.tsx b/packages/survey-creator-react/src/AddQuestionButton.tsx index 3c52187948..437b917d88 100644 --- 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,24 +38,28 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action protected renderElement(): JSX.Element { const addButtonClass = this.props.buttonClass || "svc-btn"; return <> - {attachKey2click(
{ - e.stopPropagation(); - this.model.addNewQuestion(this.model, new ReactMouseEvent(e)); - }} onMouseOver={(e) => this.model.hoverStopper && this.model.hoverStopper(e.nativeEvent, e.currentTarget)} > - - - {this.model.addNewQuestionText} - + {attachKey2click()} {this.props.renderPopup !== false ? this.renderTypeSelector() : null} -
)} +
{this.props.renderPopup === false ? this.renderTypeSelector() : null} ; } @@ -66,4 +67,4 @@ export class AddQuestionButtonComponent extends SurveyElementBase<{ item: Action ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", (props) => { return React.createElement(AddQuestionButtonComponent, props); -}); \ No newline at end of file +}); diff --git a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue index bb1832203a..510d36cb99 100644 --- a/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue +++ b/packages/survey-creator-vue/src/tabs/designer/AddQuestion.vue @@ -1,44 +1,60 @@