[CST-19328] add lang attribute in metadata-values.component

Author: Andrea Barbasso

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -4,7 +4,7 @@
     Choose a template. Priority: markdown, link, browse link.
     -->
       <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? browselink : simple)));
-        context: {value: mdValue.value, img}">
+        context: {value: mdValue.value, img, lang: mdValue.language}">
     </ng-container>
     @if (!last) {
       <span class="separator" [innerHTML]="separator"></span>
@@ -13,14 +13,15 @@
 </ds-metadata-field-wrapper>
 
 <!-- Render value as markdown -->
-<ng-template #markdown let-value="value">
-  <span class="dont-break-out" [dsMarkdown]="value">
+<ng-template #markdown let-value="value" let-lang="lang">
+  <span class="dont-break-out" [dsMarkdown]="value" [attr.lang]="lang">
   </span>
 </ng-template>
 
 <!-- Render value as a link (href and label) -->
-<ng-template #link let-value="value">
+<ng-template #link let-value="value" let-lang="lang">
   <a class="dont-break-out ds-simple-metadata-link"
+    [attr.lang]="lang"
     [href]="value"
     [attr.target]="getLinkAttributes(value).target"
     [attr.rel]="getLinkAttributes(value).rel" role="link" tabindex="0">
@@ -29,8 +30,9 @@
 </ng-template>
 
 <!-- Render value as a link with icon -->
-<ng-template #linkImg let-img="img" let-value="value">
-  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank" role="link" tabindex="0">
+<ng-template #linkImg let-img="img" let-value="value" let-lang="lang">
+  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link"
+     target="_blank" role="link" tabindex="0" [attr.lang]="lang">
     <img class="link-logo"
       [alt]="img.alt | translate"
       [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
@@ -40,13 +42,14 @@
 </ng-template>
 
 <!-- Render simple value in a span  -->
-<ng-template #simple let-value="value">
-  <span class="dont-break-out preserve-line-breaks">{{value}}</span>
+<ng-template #simple let-value="value" let-lang="lang">
+  <span class="dont-break-out preserve-line-breaks" [attr.lang]="lang">{{value}}</span>
 </ng-template>
 
 <!-- Render value as a link to browse index -->
-<ng-template #browselink let-value="value">
+<ng-template #browselink let-value="value" let-lang="lang">
   <a class="dont-break-out preserve-line-breaks ds-browse-link"
-    [routerLink]="['/browse', browseDefinition.id]"
-  [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
+     [attr.lang]="lang"
+     [routerLink]="['/browse', browseDefinition.id]"
+     [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{ value }}</a>
 </ng-template>

src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts

@@ -99,4 +99,20 @@ describe('MetadataValuesComponent', () => {
     expect(result.rel).toBe('noopener noreferrer');
   });
 
+  it('should set the lang attribute for each rendered metadata value', () => {
+    const valueSpans = fixture.debugElement.queryAll(By.css('span.dont-break-out.preserve-line-breaks'));
+    expect(valueSpans.length).toBe(mockMetadata.length);
+    valueSpans.forEach(spanDebugEl => {
+      expect(spanDebugEl.attributes.lang).toBe('en_US');
+    });
+  });
+
+  it('should not set the lang attribute when a metadata value language is missing', () => {
+    comp.mdValues = [{ value: 'No language value' } as MetadataValue];
+    fixture.detectChanges();
+    const valueSpans = fixture.debugElement.queryAll(By.css('span.dont-break-out.preserve-line-breaks'));
+    expect(valueSpans.length).toBe(1);
+    expect(valueSpans[0].attributes.lang).toBeUndefined();
+  });
+
 });