[CST-19328] add lang attribute in representation components

Author: Andrea Barbasso

src/app/core/shared/metadata-representation/item/item-metadata-representation.model.ts

@@ -41,4 +41,11 @@ export class ItemMetadataRepresentation extends Item implements MetadataRepresen
     return this.virtualMetadata.value;
   }
 
+  /**
+   * Get the language of the value to display
+   */
+  getLanguage(): string {
+    return this.virtualMetadata.language || null;
+  }
+
 }

src/app/core/shared/metadata-representation/metadata-representation.model.ts

@@ -37,4 +37,9 @@ export interface MetadataRepresentation {
    */
   getValue(): string;
 
+  /**
+   * Fetches the language of the metadata
+   */
+  getLanguage(): string;
+
 }

src/app/core/shared/metadata-representation/metadatum/metadatum-representation.model.ts

@@ -47,4 +47,11 @@ export class MetadatumRepresentation extends MetadataValue implements MetadataRe
     return this.value;
   }
 
+  /**
+   * Get the value language
+   */
+  getLanguage(): string {
+    return this.language || null;
+  }
+
 }

src/app/shared/metadata-representation/metadata-representation-loader.component.spec.ts

@@ -36,6 +36,10 @@ class TestType implements MetadataRepresentation {
   getValue(): string {
     return '';
   }
+
+  getLanguage(): string {
+    return '';
+  }
 }
 
 describe('MetadataRepresentationLoaderComponent', () => {

src/app/shared/metadata.directive.spec.ts

@@ -26,7 +26,14 @@ describe('MetadataDirective', () => {
   let span: HTMLSpanElement;
 
   function createMetadata(value?: string, language?: string): MetadataValue {
-    return { uuid: '123', value: value as any, language: language as any, place: undefined as any, authority: undefined as any, confidence: undefined as any } as MetadataValue;
+    return {
+      uuid: '123',
+      value: value,
+      language: language,
+      place: undefined,
+      authority: undefined,
+      confidence: undefined,
+    } as MetadataValue;
   }
 
   beforeEach(async () => {
@@ -71,14 +78,14 @@ describe('MetadataDirective', () => {
   });
 
   it('removes lang attribute when language missing', () => {
-    host.mv = createMetadata('Value', undefined as any);
+    host.mv = createMetadata('Value', undefined);
     fixture.detectChanges();
     expect(span.innerHTML).toBe('Value');
     expect(span.hasAttribute('lang')).toBeFalse();
   });
 
   it('renders empty string when value is undefined', () => {
-    host.mv = createMetadata(undefined as any, 'en');
+    host.mv = createMetadata(undefined, 'en');
     fixture.detectChanges();
     expect(span.innerHTML).toBe('');
     expect(span.getAttribute('lang')).toBe('en');

src/app/shared/metadata.directive.ts

@@ -8,24 +8,54 @@ import {
 
 import { MetadataValue } from '../core/shared/metadata.models';
 
+/**
+ * A directive that sets the innerHTML and lang attribute of the host element
+ * based on the provided `MetadataValue`.
+ *
+ * - The `innerHTML` is set to the `value` property of the `MetadataValue`.
+ * - The `lang` attribute is set to the `language` property of the `MetadataValue`.
+ * - If the `MetadataValue` is null or undefined, the `innerHTML` is cleared and the `lang` attribute is removed.
+ */
 @Directive({
   selector: '[dsMetadata]',
   standalone: true,
 })
 export class MetadataDirective {
+  /**
+   * Stores the current `MetadataValue` provided to the directive.
+   */
   private _metadataValue?: MetadataValue;
 
+  /**
+   * Reference to the host DOM element.
+   */
   private el = inject(ElementRef);
+
+  /**
+   * Angular Renderer2 instance for safely manipulating the DOM.
+   */
   private renderer = inject(Renderer2);
 
   /**
-   * Accepts a MetadataValue. Sets the host element's innerHTML to the metadata value and the lang attribute to the metadata language.
+   * Input property for the directive. Accepts a `MetadataValue` object.
+   * When set, it updates the host element's `innerHTML` and `lang` attribute.
+   *
+   * @param value - The `MetadataValue` object containing the `value` and `language`.
    */
   @Input() set dsMetadata(value: MetadataValue | null | undefined) {
     this._metadataValue = value ?? undefined;
     this.updateHost();
   }
 
+  /**
+   * Updates the host element's `innerHTML` and `lang` attribute based on the current `MetadataValue`.
+   * - If `MetadataValue` is provided:
+   *   - Sets `innerHTML` to `MetadataValue.value` (or an empty string if `value` is null/undefined).
+   *   - Sets the `lang` attribute to `MetadataValue.language` (or removes it if `language` is null/undefined).
+   * - If `MetadataValue` is null/undefined:
+   *   - Clears the `innerHTML`.
+   *   - Removes the `lang` attribute.
+   */
   private updateHost(): void {
     if (this._metadataValue) {
       const val = this._metadataValue.value ?? '';
@@ -41,4 +71,3 @@ export class MetadataDirective {
     }
   }
 }
-

src/app/shared/object-list/metadata-representation-list-element/browse-link/browse-link-metadata-list-element.component.html

@@ -3,6 +3,7 @@
     <a
       target="_blank" class="dont-break-out"
       [routerLink]="['/browse/', mdRepresentation.browseDefinition.id]"
+      [attr.lang]="mdRepresentation.getLanguage()"
       [queryParams]="getQueryParams()">
       {{mdRepresentation.getValue()}}
     </a>

src/app/shared/object-list/metadata-representation-list-element/browse-link/browse-link-metadata-list-element.component.spec.ts

@@ -66,6 +66,22 @@ describe('BrowseLinkMetadataListElementComponent', () => {
     it('should NOT match isLink', () => {
       expect(comp.isLink()).toBe(false);
     });
+
+    it('should set lang attribute when language is provided', () => {
+      (comp.mdRepresentation as any).language = 'en';
+      fixture.detectChanges();
+      const anchor: HTMLAnchorElement = fixture.debugElement.nativeElement.querySelector('a');
+      expect(anchor.getAttribute('lang')).toBe('en');
+    });
+
+    it('should remove lang attribute when language becomes undefined', () => {
+      (comp.mdRepresentation as any).language = 'fr';
+      fixture.detectChanges();
+      (comp.mdRepresentation as any).language = undefined;
+      fixture.detectChanges();
+      const anchor: HTMLAnchorElement = fixture.debugElement.nativeElement.querySelector('a');
+      expect(anchor.getAttribute('lang')).toBeNull();
+    });
   });
 
   describe('with metadata with an url', () => {

src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html

@@ -1,25 +1,27 @@
 <div>
   <!-- Because this template is used by default, we will additionally test for representation type and display accordingly -->
   @if ((mdRepresentation.representationType==='plain_text') && !isLink()) {
-    <span class="dont-break-out">
+    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage()">
       {{mdRepresentation.getValue()}}
     </span>
   }
   @if ((mdRepresentation.representationType==='plain_text') && isLink()) {
     <a class="dont-break-out"
+      [attr.lang]="mdRepresentation.getLanguage()"
       target="_blank" [href]="mdRepresentation.getValue()" role="link" tabindex="0">
       {{mdRepresentation.getValue()}}
     </a>
   }
   @if ((mdRepresentation.representationType==='authority_controlled')) {
-    <span class="dont-break-out">{{mdRepresentation.getValue()}}</span>
+    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage()">{{mdRepresentation.getValue()}}</span>
   }
   @if ((mdRepresentation.representationType==='browse_link')) {
     <a
       class="dont-break-out ds-browse-link"
       [routerLink]="['/browse/', mdRepresentation.browseDefinition.id]"
       [queryParams]="getQueryParams()"
       role="link"
+      [attr.lang]="mdRepresentation.getLanguage()"
       tabindex="0">
       {{mdRepresentation.getValue()}}
     </a>

src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.spec.ts

@@ -51,4 +51,20 @@ describe('PlainTextMetadataListElementComponent', () => {
     expect(fixture.debugElement.query(By.css('a.ds-browse-link')).nativeElement.innerHTML).toContain(mockMetadataRepresentation.value);
   });
 
+  it('should set lang attribute when language is provided', () => {
+    (comp.mdRepresentation as any).language = 'en';
+    fixture.detectChanges();
+    const el: HTMLElement = fixture.debugElement.nativeElement.querySelector('.dont-break-out');
+    expect(el.getAttribute('lang')).toBe('en');
+  });
+
+  it('should remove lang attribute when language becomes undefined', () => {
+    (comp.mdRepresentation as any).language = 'fr';
+    fixture.detectChanges();
+    (comp.mdRepresentation as any).language = undefined;
+    fixture.detectChanges();
+    const el: HTMLElement = fixture.debugElement.nativeElement.querySelector('.dont-break-out');
+    expect(el.getAttribute('lang')).toBeNull();
+  });
+
 });