diff --git a/src/app/item-page/item-page.module.ts b/src/app/item-page/item-page.module.ts
index 227dc727e4f..fbc64816ac5 100644
--- a/src/app/item-page/item-page.module.ts
+++ b/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({
diff --git a/src/app/item-page/item-shared.module.ts b/src/app/item-page/item-shared.module.ts
index 9c2bbba6194..db8745cbaab 100644
--- a/src/app/item-page/item-shared.module.ts
+++ b/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
diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html
new file mode 100644
index 00000000000..3466b478818
--- /dev/null
+++ b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.html
@@ -0,0 +1,8 @@
+
+
+
+ {{value | camelCaseToLowerCaseWords }}
+
+
+
+
diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.spec.ts
new file mode 100644
index 00000000000..457a254328e
--- /dev/null
+++ b/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;
+
+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);
+ });
+});
diff --git a/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts b/src/app/item-page/simple/field-components/specific-field/accessibility/item-page-accessibility-field.component.ts
new file mode 100644
index 00000000000..0cd28e6d4ac
--- /dev/null
+++ b/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;
+
+}
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 542cbd7db43..f6b2f823322 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -275,15 +275,16 @@ Permanent Link(s)
[fields]="['dc.type']"
[label]="'Types'">
-
-
-
-
+
+
-
+ [label]="'Accessibility Hazard'"
+ [separator]="', '">
+
diff --git a/src/app/pipes/camel-case-to-lower-case-words.pipe.ts b/src/app/pipes/camel-case-to-lower-case-words.pipe.ts
new file mode 100644
index 00000000000..69eb8a27cb9
--- /dev/null
+++ b/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(/(?