work for imagepicker a11y (#9235)

* work for imagepicker a11y * Update markup etalons --------- Co-authored-by: dmitrykurmanov <[email protected]>
surveyjs · Dec 30, 2024 · bcbf9a9 · bcbf9a9
1 parent a837642
commit bcbf9a9
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 10 deletions.
diff --git a/packages/survey-angular-ui/src/questions/imagepicker-item.component.html b/packages/survey-angular-ui/src/questions/imagepicker-item.component.html
@@ -6,7 +6,7 @@
         />
         <div [class]="question.cssClasses.itemDecorator">
             <div [class]="question.cssClasses.imageContainer">
-              <span *ngIf="question.cssClasses.checkedItemDecorator" [class]="question.cssClasses.checkedItemDecorator">
+              <span *ngIf="question.cssClasses.checkedItemDecorator" [class]="question.cssClasses.checkedItemDecorator" aria-hidden="true">
                 <svg *ngIf="question.cssClasses.checkedItemSvgIconId" [class]="question.cssClasses.checkedItemSvgIcon" [iconName]="question.cssClasses.checkedItemSvgIconId" [size]="'auto'" sv-ng-svg-icon></svg>
               </span>
               <img *ngIf="model.locImageLink.renderedHtml && !model.contentNotLoaded && question.contentMode === 'image'" [class]="question.cssClasses.image" [attr.src]="model.locImageLink.renderedHtml" [attr.width]="question.renderedImageWidth" [attr.height]="question.renderedImageHeight" [attr.alt]="model.locText.renderedHtml"  [style.objectFit]="question.imageFit" (load)="question.onContentLoaded(model, $event)" (error)="model.onErrorHandler()"/>

diff --git a/packages/survey-react-ui/src/imagepicker.tsx b/packages/survey-react-ui/src/imagepicker.tsx
@@ -210,7 +210,7 @@ export class SurveyQuestionImagePickerItem extends ReactSurveyElement {
           <div className={this.question.cssClasses.itemDecorator}>
             <div className={this.question.cssClasses.imageContainer}>
               {!!this.question.cssClasses.checkedItemDecorator ?
-                <span className={this.question.cssClasses.checkedItemDecorator}>
+                <span className={this.question.cssClasses.checkedItemDecorator} aria-hidden="true">
                   {!!this.question.cssClasses.checkedItemSvgIconId ? <SvgIcon size={"auto"} className={this.question.cssClasses.checkedItemSvgIcon} iconName={this.question.cssClasses.checkedItemSvgIconId}></SvgIcon> : null}
                 </span> : null}
               {control}

diff --git a/packages/survey-vue3-ui/src/ImagepickerItem.vue b/packages/survey-vue3-ui/src/ImagepickerItem.vue
@@ -36,6 +36,7 @@
           <span
             v-if="question.cssClasses.checkedItemDecorator"
             :class="question.cssClasses.checkedItemDecorator"
+            aria-hidden="true"
           >
             <SvComponent
               :is="'sv-svg-icon'"

diff --git a/src/knockout/templates/question-imagepicker.html b/src/knockout/templates/question-imagepicker.html
@@ -27,7 +27,7 @@
             <div data-bind="css: question.cssClasses.itemDecorator">
                 <div data-bind="css: question.cssClasses.imageContainer">
                   <!-- ko if: question.cssClasses.checkedItemDecorator -->
-                  <span data-bind="css: question.cssClasses.checkedItemDecorator">
+                  <span data-bind="css: question.cssClasses.checkedItemDecorator" aria-hidden="true">
                     <!-- ko if: question.cssClasses.checkedItemSvgIconId -->
                     <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.checkedItemSvgIcon, iconName: question.cssClasses.checkedItemSvgIconId, size: 'auto' } } -->
                     <!-- /ko -->

diff --git a/src/vue/imagepicker-item.vue b/src/vue/imagepicker-item.vue
@@ -32,7 +32,7 @@
           :class="question.cssClasses.itemControl"
         /><div :class="question.cssClasses.itemDecorator">
           <div :class="question.cssClasses.imageContainer">
-            <span v-if="question.cssClasses.checkedItemDecorator" :class="this.question.cssClasses.checkedItemDecorator">
+            <span v-if="question.cssClasses.checkedItemDecorator" :class="this.question.cssClasses.checkedItemDecorator" aria-hidden="true">
               <sv-svg-icon v-if="question.cssClasses.checkedItemSvgIconId" v-bind:class="question.cssClasses.checkedItemSvgIcon" size="auto" :iconName="question.cssClasses.checkedItemSvgIconId"></sv-svg-icon>
             </span>
             <img

diff --git a/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-1-v2.snap.html
@@ -5,7 +5,7 @@
 			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
 			<div class="sd-imagepicker__item-decorator">
 				<div class="sd-imagepicker__image-container">
-					<span class="sd-imagepicker__check-decorator">
+					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 							<use xlink:href="#icon-check-24x24" class="">
 							</use>
@@ -21,7 +21,7 @@
 				<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
 				<div class="sd-imagepicker__item-decorator">
 					<div class="sd-imagepicker__image-container">
-						<span class="sd-imagepicker__check-decorator">
+						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 								<use xlink:href="#icon-check-24x24" class="">
 								</use>

diff --git a/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html b/tests/markup/snapshots/imagepicker-colCount-2-v2.snap.html
@@ -6,7 +6,7 @@
 				<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
 				<div class="sd-imagepicker__item-decorator">
 					<div class="sd-imagepicker__image-container">
-						<span class="sd-imagepicker__check-decorator">
+						<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 							<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 								<use xlink:href="#icon-check-24x24" class="">
 								</use>
@@ -24,7 +24,7 @@
 					<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
 					<div class="sd-imagepicker__item-decorator">
 						<div class="sd-imagepicker__image-container">
-							<span class="sd-imagepicker__check-decorator">
+							<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 								<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 									<use xlink:href="#icon-check-24x24" class="">
 									</use>

diff --git a/tests/markup/snapshots/imagepicker-no-image-v2.snap.html b/tests/markup/snapshots/imagepicker-no-image-v2.snap.html
@@ -5,7 +5,7 @@
 			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_0" name="question1_testid0" type="radio" value="item1">
 			<div class="sd-imagepicker__item-decorator">
 				<div class="sd-imagepicker__image-container">
-					<span class="sd-imagepicker__check-decorator">
+					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 							<use xlink:href="#icon-check-24x24" class="">
 							</use>
@@ -26,7 +26,7 @@
 			<input aria-invalid="false" aria-label="question1" aria-required="false" class="sd-imagepicker__control sd-visuallyhidden" disabled="" id="testid0i_1" name="question1_testid0" type="radio" value="item2">
 			<div class="sd-imagepicker__item-decorator">
 				<div class="sd-imagepicker__image-container">
-					<span class="sd-imagepicker__check-decorator">
+					<span aria-hidden="true" class="sd-imagepicker__check-decorator">
 						<svg class="sd-imagepicker__check-icon sv-svg-icon" role="img">
 							<use xlink:href="#icon-check-24x24" class="">
 							</use>