PR: A11Y Dropdpwn + Icons (#7269)

* work for the #7259 * work for the #7259 * work for the #7259 (func tests)
surveyjs · Nov 9, 2023 · 11a2f08 · 11a2f08
1 parent d61f4f2
commit 11a2f08
Show file tree

Hide file tree

Showing 55 changed files with 144 additions and 137 deletions.
diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
@@ -34,7 +34,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">
+            [class]="model.cssClasses.cleanButton" (click)="clear($event)" [visible]="model.showClearButton" [attr.tabindex]="model.inputReadOnly ? -1 : 0">
             <!-- 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"
@@ -46,7 +46,7 @@
         <sv-ng-string *ngIf="model.selectedItemLocText" [model]="model.selectedItemLocText"></sv-ng-string>
         <div>{{ model.readOnlyText }}</div>
     </div>
-    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton" (pointerdown)="chevronPointerDown($event)">
+    <div *ngIf="model.cssClasses.chevronButtonIconId" [class]="model.cssClasses.chevronButton" (pointerdown)="chevronPointerDown($event)" aria-hidden="true">
         <svg [iconName]="model.cssClasses.chevronButtonIconId" [partCss]="model.cssClasses.chevronButtonSvg" [size]="'auto'" sv-ng-svg-icon></svg>
     </div>
 </div>
diff --git a/packages/survey-angular-ui/src/components/svg-icon/svg-icon.component.ts b/packages/survey-angular-ui/src/components/svg-icon/svg-icon.component.ts
@@ -39,9 +39,6 @@ export class SvgIconComponent implements OnChanges {
   @HostBinding("[attr.role]") get rootRole(): string {
     return "img";
   }
-  @HostBinding("[attr.aria-label]") get ariaLabel(): string {
-    return <string>this.title;
-  }
   ngOnChanges(): void {
     const el = this.viewContaierRef.element.nativeElement;
     el.innerHTML = "";

diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html
@@ -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"
+        <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)" [class]="model.cssClasses.cleanButton" [attr.tabindex]="model.inputReadOnly ? -1 : 0"
             (click)="clear($event)" [visible]="model.showClearButton">
             <!-- ko component: { name: 'sv-svg-icon', params: { css: model.cssClasses.cleanButtonSvg, iconName: model.cssClasses.cleanButtonIconId, size: 'auto' } } -->
             <!-- /ko -->

diff --git a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
@@ -78,6 +78,7 @@
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
         v-show="question.showClearButton"
         @click="clear"
+        :tabindex="question.inputReadOnly ? -1 : 0"
       >
         <sv-svg-icon
           :class="question.cssClasses.cleanButtonSvg"
@@ -108,6 +109,7 @@
       :class="question.cssClasses.chevronButton"
       v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
+      aria-hidden="true"
     >
       <sv-svg-icon
         :class="question.cssClasses.chevronButtonSvg"

diff --git a/packages/survey-vue3-ui/src/components/svg-icon/SvgIcon.vue b/packages/survey-vue3-ui/src/components/svg-icon/SvgIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg ref="svgIconElement" class="sv-svg-icon" role="img" :aria-label="title">
+  <svg ref="svgIconElement" class="sv-svg-icon" role="img">
     <use></use>
   </svg>
 </template>

diff --git a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
@@ -39,6 +39,7 @@
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
         v-show="question.showClearButton"
         @click="clear"
+        :tabindex="question.inputReadOnly ? -1 : 0"
       >
         <sv-svg-icon
           :class="question.cssClasses.cleanButtonSvg"

diff --git a/src/knockout/components/dropdown/dropdown.html b/src/knockout/components/dropdown/dropdown.html
@@ -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 ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.inputReadOnly ? -1 : 0}">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>
@@ -75,7 +75,7 @@
   </div>
   <!-- /ko -->
   <!-- ko if: question.cssClasses.chevronButtonIconId -->
-  <div data-bind="css: question.cssClasses.chevronButton, event: {pointerdown: chevronPointerDown}">
+  <div data-bind="css: question.cssClasses.chevronButton, event: {pointerdown: chevronPointerDown}" aria-hidden="true">
     <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.chevronButtonSvg, iconName: question.cssClasses.chevronButtonIconId, size: 'auto' } } -->
     <!-- /ko -->
   </div>

diff --git a/src/knockout/components/svg-icon/svg-icon.html b/src/knockout/components/svg-icon/svg-icon.html
@@ -1,3 +1,3 @@
 <!-- ko if: hasIcon -->
-<svg class="sv-svg-icon" data-bind="css: css, attr: { 'aria-label': title }" role="img"><use></use></svg>
+<svg class="sv-svg-icon" data-bind="css: css" role="img"><use></use></svg>
 <!-- /ko -->
diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html
@@ -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 ">
+    <div data-bind="css: question.cssClasses.cleanButton, click: clear, visible: question.showClearButton, attr: {tabindex: question.inputReadOnly ? -1 : 0} ">
       <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.cleanButtonSvg, iconName: question.cssClasses.cleanButtonIconId, size: 'auto', title: question.clearCaption } } -->
       <!-- /ko -->
     </div>

diff --git a/src/react/components/svg-icon/svg-icon.tsx b/src/react/components/svg-icon/svg-icon.tsx
@@ -30,7 +30,7 @@ export class SvgIcon extends React.Component<any, any> {
     }
     return (
       this.props.iconName ?
-        <svg className={ className } style={this.props.style} onClick={this.props.onClick} ref={this.svgIconRef} role="img" aria-label={this.props.title}><use></use></svg>
+        <svg className={ className } style={this.props.style} onClick={this.props.onClick} ref={this.svgIconRef} role="img"><use></use></svg>
         : null
     );
   }

diff --git a/src/react/dropdown-base.tsx b/src/react/dropdown-base.tsx
@@ -146,6 +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}
       >
         <SvgIcon
           className={this.question.cssClasses.cleanButtonSvg}
@@ -162,6 +163,7 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
 
     return (
       <div className={this.question.cssClasses.chevronButton}
+        aria-hidden="true"
         onPointerDown={this.chevronPointerDown}>
         <SvgIcon
           className={this.question.cssClasses.chevronButtonSvg}

diff --git a/src/vue/components/dropdown/dropdown.vue b/src/vue/components/dropdown/dropdown.vue
@@ -65,6 +65,7 @@
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
         v-show="question.showClearButton"
         @click="clear"
+        :tabindex="question.inputReadOnly ? -1 : 0"
       >
         <sv-svg-icon
           :class="question.cssClasses.cleanButtonSvg"
@@ -90,6 +91,7 @@
       :class="question.cssClasses.chevronButton"
           v-on:pointerdown="chevronPointerDown"
       v-if="question.cssClasses.chevronButtonIconId"
+      aria-hidden="true"
     >
       <sv-svg-icon
         :class="question.cssClasses.chevronButtonSvg"

diff --git a/src/vue/components/svg-icon/svg-icon.vue b/src/vue/components/svg-icon/svg-icon.vue
@@ -1,5 +1,5 @@
 <template>
-    <svg ref="svgIcon" class="sv-svg-icon" role="img" :aria-label="title"><use></use></svg>
+    <svg ref="svgIcon" class="sv-svg-icon" role="img"><use></use></svg>
 </template>
 
 <script lang="ts">

diff --git a/src/vue/components/tagbox/tagbox.vue b/src/vue/components/tagbox/tagbox.vue
@@ -33,6 +33,7 @@
         v-if="question.allowClear && question.cssClasses.cleanButtonIconId"
         v-show="question.showClearButton"
         @click="clear"
+        :tabindex="question.inputReadOnly ? -1 : 0"
       >
         <sv-svg-icon
           :class="question.cssClasses.cleanButtonSvg"

diff --git a/testCafe/questions/dropdown.js b/testCafe/questions/dropdown.js
@@ -710,6 +710,7 @@ frameworks.forEach((framework) => {
       .expect(popupContainer.visible).notOk()
       .expect(questionValueInput.value).eql("Volkswagen")
 
+      .pressKey("tab")
       .pressKey("tab")
       .pressKey("2")
       .pressKey("down")
@@ -849,6 +850,7 @@ frameworks.forEach((framework) => {
       .expect(popupContainer.visible).notOk()
       .expect(questionValueText.textContent).eql("Volkswagen")
 
+      .pressKey("tab")
       .pressKey("tab")
       .pressKey("down")
       .pressKey("down")

diff --git a/tests/markup/snapshots/dropdown-aria-expanded.snap.html b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
@@ -4,8 +4,8 @@
 			<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..." 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="0">
+				<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>

diff --git a/tests/markup/snapshots/dropdown-input-string.snap.html b/tests/markup/snapshots/dropdown-input-string.snap.html
@@ -11,8 +11,8 @@
 				</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="" 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="0">
+				<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>

diff --git a/tests/markup/snapshots/dropdown-select-clear-button.snap.html b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
@@ -5,8 +5,8 @@
 				<span class="sv-string-viewer">item1</span>
 				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
 			</div>
-			<div class="sv_q_dropdown_clean-button">
-				<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
+			<div class="sv_q_dropdown_clean-button" tabindex="0">
+				<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>

diff --git a/tests/markup/snapshots/dropdown-with-markdown.snap.html b/tests/markup/snapshots/dropdown-with-markdown.snap.html
@@ -5,8 +5,8 @@
 				<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
 				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
 			</div>
-			<div class="sv_q_dropdown_clean-button">
-				<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
+			<div class="sv_q_dropdown_clean-button" tabindex="0">
+				<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>

diff --git a/tests/markup/snapshots/dropdown-with-none-value.snap.html b/tests/markup/snapshots/dropdown-with-none-value.snap.html
@@ -5,8 +5,8 @@
 				<span class="sv-string-viewer">None</span>
 				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
 			</div>
-			<div class="sv_q_dropdown_clean-button">
-				<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
+			<div class="sv_q_dropdown_clean-button" tabindex="0">
+				<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>

diff --git a/tests/markup/snapshots/dropdown-with-other-value.snap.html b/tests/markup/snapshots/dropdown-with-other-value.snap.html
@@ -5,8 +5,8 @@
 				<span class="sv-string-viewer">Other (describe)</span>
 				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
 			</div>
-			<div class="sv_q_dropdown_clean-button">
-				<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
+			<div class="sv_q_dropdown_clean-button" tabindex="0">
+				<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>

diff --git a/tests/markup/snapshots/file-2-png.snap.html b/tests/markup/snapshots/file-2-png.snap.html
@@ -10,7 +10,7 @@
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
 							<label aria-label="Replace file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" for="testid0i" tabindex="0">
-								<svg aria-label="Replace file" class="sv-svg-icon" role="img">
+								<svg class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Replace file</title>
@@ -22,7 +22,7 @@
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
 						<div class="sv-action__content">
 							<button class="sd-context-btn" role="button" tabindex="0" title="Take Photo" type="button">
-								<svg aria-label="Take Photo" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-takepicture_24x24" class="">
 									</use>
 									<title class="">Take Photo</title>
@@ -33,7 +33,7 @@
 					<div class="sv-action" id="sv-file-clean">
 						<div class="sv-action__content">
 							<button class="sd-context-btn sd-context-btn--negative" role="button" tabindex="0" title="Clear" type="button">
-								<svg aria-label="Clear" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-clear" class="">
 									</use>
 									<title class="">Clear</title>
@@ -50,7 +50,7 @@
 					<img alt="File preview" src="#item1.png">
 						<div class="sd-context-btn sd-context-btn--negative sd-file__remove-file-button">
 							<span class="sd-hidden">Remove this file</span>
-							<svg aria-label="Remove this file" class="sv-svg-icon" role="img">
+							<svg class="sv-svg-icon" role="img">
 								<use xlink:href="#icon-delete" class="">
 								</use>
 								<title class="">Remove this file</title>

diff --git a/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html b/tests/markup/snapshots/file-2-zip-png-file-navigator.snap.html
@@ -10,7 +10,7 @@
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
 							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" for="testid0i" tabindex="0">
-								<svg aria-label="Select File" class="sv-svg-icon" role="img">
+								<svg class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
@@ -22,7 +22,7 @@
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
 						<div class="sv-action__content">
 							<button class="sd-context-btn" role="button" tabindex="0" title="Take Photo" type="button">
-								<svg aria-label="Take Photo" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-takepicture_24x24" class="">
 									</use>
 									<title class="">Take Photo</title>
@@ -33,7 +33,7 @@
 					<div class="sv-action" id="sv-file-clean">
 						<div class="sv-action__content">
 							<button class="sd-context-btn sd-context-btn--negative" role="button" tabindex="0" title="Clear" type="button">
-								<svg aria-label="Clear" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-clear" class="">
 									</use>
 									<title class="">Clear</title>
@@ -53,7 +53,7 @@
 					</svg>
 					<div class="sd-context-btn sd-context-btn--negative sd-file__remove-file-button">
 						<span class="sd-hidden">Remove this file</span>
-						<svg aria-label="Remove this file" class="sv-svg-icon" role="img">
+						<svg class="sv-svg-icon" role="img">
 							<use xlink:href="#icon-delete" class="">
 							</use>
 							<title class="">Remove this file</title>
@@ -69,7 +69,7 @@
 					<img alt="File preview" src="#item2.png">
 						<div class="sd-context-btn sd-context-btn--negative sd-file__remove-file-button">
 							<span class="sd-hidden">Remove this file</span>
-							<svg aria-label="Remove this file" class="sv-svg-icon" role="img">
+							<svg class="sv-svg-icon" role="img">
 								<use xlink:href="#icon-delete" class="">
 								</use>
 								<title class="">Remove this file</title>

diff --git a/tests/markup/snapshots/file-2-zip-png-ro.snap.html b/tests/markup/snapshots/file-2-zip-png-ro.snap.html
@@ -10,7 +10,7 @@
 					<div class="sv-action" id="sv-file-choose-file">
 						<div class="sv-action__content">
 							<label aria-label="Select File" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" for="testid0i" tabindex="0">
-								<svg aria-label="Select File" class="sv-svg-icon" role="img">
+								<svg class="sv-svg-icon" role="img">
 									<use xlink:href="#icon-choosefile" class="">
 									</use>
 									<title class="">Select File</title>
@@ -22,7 +22,7 @@
 					<div class="sv-action sv-action--hidden" id="sv-file-start-camera">
 						<div class="sv-action__content">
 							<button class="sd-context-btn" disabled="" role="button" tabindex="0" title="Take Photo" type="button">
-								<svg aria-label="Take Photo" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-takepicture_24x24" class="">
 									</use>
 									<title class="">Take Photo</title>
@@ -33,7 +33,7 @@
 					<div class="sv-action" id="sv-file-clean">
 						<div class="sv-action__content">
 							<button class="sd-context-btn sd-context-btn--negative" disabled="" role="button" tabindex="0" title="Clear" type="button">
-								<svg aria-label="Clear" class="sd-action__icon sv-svg-icon" role="img">
+								<svg class="sd-action__icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-clear" class="">
 									</use>
 									<title class="">Clear</title>