fix: (CXSPA-9091) Fix invalid aria-label at span tag (#19722)

Co-authored-by: Christoph Hinssen <33626130+ChristophHi@users.noreply.github.com>
SAP · Dec 16, 2024 · 2c00c63 · 2c00c63
1 parent 345eaed
commit 2c00c63
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 33 deletions.
diff --git a/...configurator/rulebased/components/product-title/configurator-product-title.component.html b/...configurator/rulebased/components/product-title/configurator-product-title.component.html
@@ -46,25 +46,23 @@
         <div class="cx-detail-title">
           <span
             *ngIf="product.name"
-            [attr.aria-label]="'configurator.a11y.productName' | cxTranslate"
+            [attr.title]="'configurator.a11y.productName' | cxTranslate"
           >
             {{ product.name }}
           </span>
         </div>
         <div class="cx-code">
           <span
             *ngIf="product.code"
-            [attr.aria-label]="'configurator.a11y.productCode' | cxTranslate"
+            [attr.title]="'configurator.a11y.productCode' | cxTranslate"
           >
             {{ product.code }}
           </span>
         </div>
         <div class="cx-description">
           <span
             *ngIf="product.description"
-            [attr.aria-label]="
-              'configurator.a11y.productDescription' | cxTranslate
-            "
+            [attr.title]="'configurator.a11y.productDescription' | cxTranslate"
           >
             {{ product.description }}
           </span>

diff --git a/...figurator/rulebased/components/product-title/configurator-product-title.component.spec.ts b/...figurator/rulebased/components/product-title/configurator-product-title.component.spec.ts
@@ -704,40 +704,40 @@ describe('ConfigProductTitleComponent', () => {
       );
     });
 
-    it("should contain span element with 'aria-label' attribute  for product name that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product name that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         2,
-        'aria-label',
+        'title',
         'configurator.a11y.productName',
         mockProduct.name
       );
     });
 
-    it("should contain span element with 'aria-label' attribute for product code that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product code that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         3,
-        'aria-label',
+        'title',
         'configurator.a11y.productCode',
         mockProduct.code
       );
     });
 
-    it("should contain span element with 'aria-label' attribute for product description that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product description that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         4,
-        'aria-label',
+        'title',
         'configurator.a11y.productDescription',
         mockProduct.description
       );

diff --git a/...product-configurator/rulebased/components/show-more/configurator-show-more.component.html b/...product-configurator/rulebased/components/show-more/configurator-show-more.component.html
@@ -1,16 +1,7 @@
 <ng-container
   *ngIf="text && config.features?.productConfiguratorAttributeTypesV2"
 >
-  <span
-    [attr.aria-label]="
-      'configurator.a11y.itemDescription'
-        | cxTranslate
-          : {
-              item: productName,
-            }
-    "
-    [innerHTML]="textToShow"
-  ></span>
+  <span [innerHTML]="textToShow"></span>
 
   <button (click)="toggleShowMore()" *ngIf="showMore" tabindex="{{ tabIndex }}">
     <ng-container *ngIf="showHiddenText; else less"

diff --git a/...duct-configurator/rulebased/components/show-more/configurator-show-more.component.spec.ts b/...duct-configurator/rulebased/components/show-more/configurator-show-more.component.spec.ts
@@ -143,18 +143,6 @@ describe('ConfiguratorShowMoreComponent', () => {
       fixture.detectChanges();
     });
 
-    it("should contain span element with 'aria-label' attribute that defines an accessible name to label the current element", () => {
-      CommonConfiguratorTestUtilsService.expectElementContainsA11y(
-        expect,
-        htmlElem,
-        'span',
-        undefined,
-        0,
-        'aria-label',
-        'configurator.a11y.itemDescription item:Camera bundle'
-      );
-    });
-
     it("should contain button element with a content 'configurator.button.less'", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,