Skip to content

Commit

Permalink
Fix-master-creator---clean-dropdown-tabindex (#7322)
Browse files Browse the repository at this point in the history 
* fix master creator - clean dropdown tabindex

* tests for tagbox
  • Loading branch information
@novikov82
novikov82 committed Nov 10, 2023
1 parent 888136c commit e9579cb
Show file tree
Hide file tree
Showing 19 changed files with 31 additions and 31 deletions.
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
(change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
</div>
<div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)"
[class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton" [attr.tabindex]="model.inputReadOnly ? -1 : 0">
[class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton" [attr.tabindex]="model.showClearButton ? 0 : -1">
<!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
<!-- /ko -->
<svg [iconName]="model.cssClasses.cleanButtonIconId" [partCss]="model.cssClasses.cleanButtonSvg" [title]="model.clearCaption"
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-angular-ui/src/components/tagbox/tagbox.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</ng-container>
<ng-template [component]="{ name: 'sv-tagbox-filter', data: { model: dropdownModel, question: model } }"></ng-template>
</div>
<div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)" [class]="model.cssClasses.cleanButton" [attr.tabindex]="model.inputReadOnly ? -1 : 0"
<div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)" [class]="model.cssClasses.cleanButton" [attr.tabindex]="model.showClearButton ? 0 : -1"
(click)="clear($event)" [visible]="model.showClearButton">
<!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
<!-- /ko -->
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
v-show="question.showClearButton"
@click="clear"
:tabindex="question.inputReadOnly ? -1 : 0"
:tabindex="question.showClearButton ? 0 : -1"
>
<sv-svg-icon
:class="question.cssClasses.cleanButtonSvg"
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
v-show="question.showClearButton"
@click="clear"
:tabindex="question.inputReadOnly ? -1 : 0"
:tabindex="question.showClearButton ? 0 : -1"
>
<sv-svg-icon
:class="question.cssClasses.cleanButtonSvg"
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/components/dropdown/dropdown.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
event: { blur: blur, focus: focus }"></input>
</div>
<!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
<div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.inputReadOnly ? -1 : 0}">
<div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.showClearButton ? 0 : -1}">
<!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
<!-- /ko -->
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/components/tagbox/tagbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
</div>
</div>
<!-- ko if: (question.allowClear && question.cssClasses.cleanButtonIconId) -->
<div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.inputReadOnly ? -1 : 0} ">
<div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.showClearButton ? 0 : -1} ">
<!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
<!-- /ko -->
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/react/dropdown-base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
className={this.question.cssClasses.cleanButton}
style={style}
onClick={this.clear}
tabIndex={this.question.inputReadOnly ? -1 : 0}
tabIndex={this.question.showClearButton ? 0 : -1}
>
<SvgIcon
className={this.question.cssClasses.cleanButtonSvg}
Expand Down
2 changes: 1 addition & 1 deletion src/vue/components/dropdown/dropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
v-show="question.showClearButton"
@click="clear"
:tabindex="question.inputReadOnly ? -1 : 0"
:tabindex="question.showClearButton ? 0 : -1"
>
<sv-svg-icon
:class="question.cssClasses.cleanButtonSvg"
Expand Down
2 changes: 1 addition & 1 deletion src/vue/components/tagbox/tagbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
v-show="question.showClearButton"
@click="clear"
:tabindex="question.inputReadOnly ? -1 : 0"
:tabindex="question.showClearButton ? 0 : -1"
>
<sv-svg-icon
:class="question.cssClasses.cleanButtonSvg"
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/etalon_dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ registerMarkupTests(
},
snapshot: "dropdown-select",
}, {
name: "Test Dropdown Select question markup",
name: "Test Dropdown Select question markup - touch",
json: {
questions: [
{
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/dropdown-aria-expanded.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/dropdown-input-focused.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;">
<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
<title class="">Clear</title>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/dropdown-input-string.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</div>
<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
12 changes: 6 additions & 6 deletions tests/markup/snapshots/matrixdynamic-default.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -65,7 +65,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -104,7 +104,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -158,7 +158,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -197,7 +197,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -236,7 +236,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
12 changes: 6 additions & 6 deletions tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down Expand Up @@ -71,7 +71,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down Expand Up @@ -116,7 +116,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row1cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row1cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down Expand Up @@ -178,7 +178,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down Expand Up @@ -223,7 +223,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell1i_list" aria-expanded="false" aria-label="Column 2" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell1i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down Expand Up @@ -268,7 +268,7 @@
<div class="sd-dropdown__value">
<input aria-controls="testid0row3cell2i_list" aria-expanded="false" aria-label="Column 3" autocomplete="off" class="sd-dropdown__filter-string-input" id="testid0row3cell2i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sd-dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sd-dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear" class="">
</use>
Expand Down
4 changes: 2 additions & 2 deletions tests/markup/snapshots/matrixdynamic-totals.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row1cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down Expand Up @@ -74,7 +74,7 @@
<div class="sv_q_dropdown__value">
<input aria-controls="testid0row3cell0i_list" aria-expanded="false" aria-label="Column 1" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
</div>
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/tagbox-mobile.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
</div>
</div>
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv_q_tagbox_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/tagbox-without-search.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
</div>
</div>
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv_q_tagbox_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down
2 changes: 1 addition & 1 deletion tests/markup/snapshots/tagbox.snap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
</div>
</div>
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="0">
<div class="sv_q_dropdown_clean-button sv_q_tagbox_clean-button" style="display:none;" tabindex="-1">
<svg class="sv_q_dropdown_clean-button-svg sv_q_tagbox_clean-button-svg sv-svg-icon" role="img">
<use xlink:href="#icon-clear_16x16" class="">
</use>
Expand Down

0 comments on commit e9579cb

Please sign in to comment.