ECOMMONS-1640

src/app/item-page/item-page.module.ts

@@ -62,7 +62,10 @@ import {
 } from './full/field-components/file-section/themed-full-file-section.component';
 import {
   ItemPageKalturaFieldComponent
-} from "./simple/field-components/specific-field/kaltura/item-page-kaltura-field.component";
+} from './simple/field-components/specific-field/kaltura/item-page-kaltura-field.component';
+import {
+  ItemPageAccessibilityFieldComponent
+} from './simple/field-components/specific-field/accessibility/item-page-accessibility-field.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -106,7 +109,8 @@ const DECLARATIONS = [
   ItemAlertsComponent,
   ThemedItemAlertsComponent,
   BitstreamRequestACopyPageComponent,
-  ItemPageKalturaFieldComponent
+  ItemPageKalturaFieldComponent,
+  ItemPageAccessibilityFieldComponent,
 ];
 
 @NgModule({

src/app/item-page/item-shared.module.ts

@@ -17,10 +17,12 @@ import {
   ThemedMetadataRepresentationListComponent
 } from './simple/metadata-representation-list/themed-metadata-representation-list.component';
 
+import {CamelCaseToLowerCaseWordsPipe} from '../pipes/camel-case-to-lower-case-words.pipe';
+
 const ENTRY_COMPONENTS = [
   ItemVersionsDeleteModalComponent,
   ItemVersionsSummaryModalComponent,
-
+  CamelCaseToLowerCaseWordsPipe,
 ];
 
 const COMPONENTS = [
@@ -32,6 +34,7 @@ const COMPONENTS = [
   MetadataRepresentationListComponent,
   ThemedMetadataRepresentationListComponent,
   RelatedItemsComponent,
+  CamelCaseToLowerCaseWordsPipe,
 ];
 
 @NgModule({
@@ -42,7 +45,7 @@ const COMPONENTS = [
     CommonModule,
     SearchModule,
     SharedModule,
-    TranslateModule
+    TranslateModule,
   ],
   exports: [
     ...COMPONENTS

src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html

@@ -0,0 +1,8 @@
+<div class="item-page-accessibility-field">
+  <ds-metadata-field-wrapper [label]="label | translate">
+    <ng-container *ngFor="let value of item?.allMetadataValues(fields); let last=last;">
+      <span class="dont-break-out preserve-line-breaks">{{value | camelCaseToLowerCaseWords }}</span>
+      <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
+    </ng-container>
+  </ds-metadata-field-wrapper>
+</div>

src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts

@@ -0,0 +1,31 @@
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {ChangeDetectionStrategy, NO_ERRORS_SCHEMA} from '@angular/core';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {TranslateLoaderMock} from '../../../../../shared/testing/translate-loader.mock';
+import {MetadataValuesComponent} from '../../../../field-components/metadata-values/metadata-values.component';
+import {ItemPageAccessibilityFieldComponent} from './item-page-accessibility-field.component';
+
+let fixture: ComponentFixture<ItemPageAccessibilityFieldComponent>;
+
+const mockValue = 'test value';
+
+describe('ItemPageAccessibilityFieldComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot({
+        loader: {
+          provide: TranslateLoader,
+          useClass: TranslateLoaderMock
+        }
+      })],
+      declarations: [ItemPageAccessibilityFieldComponent, MetadataValuesComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(ItemPageAccessibilityFieldComponent, {
+      set: {changeDetection: ChangeDetectionStrategy.Default}
+    }).compileComponents();
+  }));
+
+  it('should display display the correct metadata value', () => {
+    expect(fixture.nativeElement.innerHTML).toContain(mockValue);
+  });
+});

src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input } from '@angular/core';
+
+import { Item } from '../../../../../core/shared/item.model';
+import { ItemPageFieldComponent } from '../item-page-field.component';
+
+@Component({
+  selector: 'ds-item-page-accessibility-field',
+  templateUrl: './item-page-accessibility-field.component.html'
+})
+/**
+ * This component can be used to represent accessibility metadata on a simple item page.
+ * It expects 4 parameters: The item, a separator, the metadata keys and an i18n key
+ */
+export class ItemPageAccessibilityFieldComponent extends ItemPageFieldComponent {
+
+  /**
+   * The item to display metadata for
+   */
+  @Input() item: Item;
+
+  /**
+   * Separator string between multiple values of the metadata fields defined
+   * @type {string}
+   */
+  @Input() separator: string;
+
+  /**
+   * Fields (schema.element.qualifier) used to render their values.
+   */
+  @Input() fields: string[];
+
+  /**
+   * Label i18n key for the rendered metadata
+   */
+  @Input() label: string;
+
+}

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -275,15 +275,16 @@ <h5>Permanent Link(s)</h5>
                                 [fields]="['dc.type']"
                                 [label]="'Types'">
     </ds-generic-item-page-field>
-
-    <ds-generic-item-page-field [item]="object"
+    <ds-item-page-accessibility-field [item]="object"
                                 [fields]="['schema.accessibilityFeature']"
-                                [label]="'Accessibility Feature'">
-    </ds-generic-item-page-field>
-    <ds-generic-item-page-field [item]="object"
+                                [label]="'Accessibility Feature'"
+                                [separator]="', '">
+    </ds-item-page-accessibility-field>
+    <ds-item-page-accessibility-field [item]="object"
                                 [fields]="['schema.accessibilityHazard']"
-                                [label]="'Accessibility Hazard'">
-    </ds-generic-item-page-field>
+                                [label]="'Accessibility Hazard'"
+                                      [separator]="', '">
+    </ds-item-page-accessibility-field>
     <ds-generic-item-page-field [item]="object"
                                 [fields]="['schema.accessibilitySummary']"
                                 [label]="'Accessibility Summary'">

src/app/pipes/camel-case-to-lower-case-words.pipe.ts

@@ -0,0 +1,20 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  standalone: false,
+  // eslint-disable-next-line @angular-eslint/pipe-prefix
+  name: 'camelCaseToLowerCaseWords'
+})
+export class CamelCaseToLowerCaseWordsPipe implements PipeTransform {
+
+  // Define the list of values to ignore
+  private readonly ignoreValues = ['ChemML', 'MathML'];
+  transform(value: string): string {
+    if (!value) {return value;}
+    if (this.ignoreValues.includes(value)) {return value;}
+    let words = value.split(/(?<![A-Z])(?=[A-Z])/).join(' ').toLowerCase();
+    // capitalize PDF
+    words = words.replace(/pdf/gi, 'PDF');
+    return words;
+  }
+}