individually styled the DQCheck data requirements

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

@@ -1,7 +1,7 @@
 <ds-metadata-field-wrapper [label]="label | translate">
   <ng-container *ngFor="let mdValue of mdValues; let last=last;">
-    <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? (shouldRenderAsBadge(mdValue) ? badge : (shouldRenderAsButton(mdValue) ? buttonlink : browselink)) : simple)));
-      context: {value: mdValue.value, img, mdValue: mdValue, sentenceTemplateParts: sentenceTemplateParts}">
+    <ng-container *ngTemplateOutlet="isDQCheckRequirement ? isDQCheckRequirementTemplate : (renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? (shouldRenderAsBadge(mdValue) ? badge : (shouldRenderAsButton(mdValue) ? buttonlink : browselink)) : simple)));
+      context: {value: mdValue.value, img: img, mdValue: mdValue, sentenceTemplateParts: sentenceTemplateParts}">
     </ng-container>
     <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
   </ng-container>
@@ -105,3 +105,13 @@
     {{ value.includes('::') ? getLastItem(value) : value }}
   </span>
 </ng-template>
+
+<!-- Simplified render for isDQCheckRequirement -->
+<ng-template #isDQCheckRequirementTemplate let-value="value" let-mdValue="mdValue">
+  <a class="dqcheck-requirement"
+     [routerLink]="['/browse', browseDefinition.id]"
+     [queryParams]="getQueryParams(value)">
+    {{ value.includes('::') ? getLastItem(value) : value }}
+  </a>
+</ng-template>
+

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

@@ -5,7 +5,9 @@ $tropical-indigo: #9381ff;
 $quinacridone-magenta: #8A3D63;
 
 .ds-metadata-value {
-  &.btn, &.badge {
+
+  &.btn,
+  &.badge {
     margin: 0.2rem;
     padding: 0.375rem 0.75rem;
     font-size: 0.875rem;
@@ -17,7 +19,7 @@ $quinacridone-magenta: #8A3D63;
     text-align: center;
     vertical-align: middle;
     user-select: none;
-    
+
     &:hover {
       transform: translateY(-1px);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -28,7 +30,8 @@ $quinacridone-magenta: #8A3D63;
       border: 1px solid $redwood;
       background-color: transparent;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: $snow;
         background-color: $redwood;
       }
@@ -39,7 +42,8 @@ $quinacridone-magenta: #8A3D63;
       border: 1px solid $china-rose;
       background-color: $china-rose;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: $china-rose;
         background-color: $snow;
       }
@@ -50,7 +54,8 @@ $quinacridone-magenta: #8A3D63;
       border: 1px solid $puce;
       background-color: $puce;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: $black-bean;
         background-color: $snow;
       }
@@ -61,7 +66,8 @@ $quinacridone-magenta: #8A3D63;
       border: 1px solid $tropical-indigo;
       background-color: $tropical-indigo;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         color: $black-bean;
         background-color: $snow;
       }
@@ -81,58 +87,84 @@ $quinacridone-magenta: #8A3D63;
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
+      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transform: translateX(-100%);
       transition: transform 0.5s;
-        }
+    }
 
-        &:hover::after {
+    &:hover::after {
       transform: translateX(100%);
-        }
-      }
     }
+  }
+}
+
+.ds-browse-link {
+  // Ensure sufficient color contrast (WCAG 1.4.3)
+  color: $redwood;
+  text-decoration: underline;
+  text-underline-offset: 0.2em; // Improve underline visibility
+  transition: all 0.3s ease;
+  cursor: pointer;
+  // Ensure interactive elements are operable (WCAG 2.1)
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.5rem;
+  border: 1px solid transparent; // Added for smooth transition
+
+  // Remove outline for mouse, keep for keyboard (WCAG 2.4.7)
+  &:focus-visible {
+    color: darken($redwood, 25%);
+    text-decoration: underline;
+    outline: 3px solid darken($redwood, 25%);
+    outline-offset: 3px;
+    border-radius: 2px;
+
+    // High contrast mode support
+    @media screen and (-ms-high-contrast: active) {
+      outline: 2px solid currentColor;
+    }
+  }
 
-    .ds-browse-link {
-      // Ensure sufficient color contrast (WCAG 1.4.3)
-      color: $redwood;
-      text-decoration: underline;
-      text-underline-offset: 0.2em; // Improve underline visibility
-      transition: all 0.3s ease;
-      cursor: pointer;
-      // Ensure interactive elements are operable (WCAG 2.1)
-      min-height: 44px;
-      min-width: 44px;
-      padding: 0.5rem;
-      border: 1px solid transparent; // Added for smooth transition
-
-      // Remove outline for mouse, keep for keyboard (WCAG 2.4.7)
-      &:focus-visible {
-      color: darken($redwood, 25%);
-      text-decoration: underline;
-      outline: 3px solid darken($redwood, 25%);
-      outline-offset: 3px;
-      border-radius: 2px;
-      // High contrast mode support
-      @media screen and (-ms-high-contrast: active) {
-        outline: 2px solid currentColor;
-      }
-      }
+  &:hover {
+    color: darken($redwood, 25%);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    border: 1px solid darken($redwood, 25%); // Added box outline on hover
+    border-radius: 2px;
+  }
 
-      &:hover {
-      color: darken($redwood, 25%);
-      text-decoration: underline;
-      text-decoration-thickness: 2px;
-      border: 1px solid darken($redwood, 25%); // Added box outline on hover
-      border-radius: 2px;
-      }
+  &:active {
+    color: darken($redwood, 30%);
+    transform: scale(0.98);
+  }
 
-      &:active {
-      color: darken($redwood, 30%);
-      transform: scale(0.98);
-      }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    transform: none;
+  }
+}
+
+.dqcheck-requirement {
+  display: inline-block;
+  background-color: #f0f0f0;
+  color: #333333;
+  padding: 0.2rem 0.4rem;
+  border-radius: 1px;
+  font-family: 'Courier New', Courier, monospace;
+  cursor: pointer;
+  text-decoration: none;
+  margin: 0.2rem;  
+  position: relative;
+
+  &:hover,
+  &:focus {
+    background-color: #e0e0e0;
+    outline: none; 
+    box-shadow: 0 0 0 2px #8ACE00; 
+    margin: 0.2rem;
+  }
 
-      @media (prefers-reduced-motion: reduce) {
-      transition: none;
-      transform: none;
-      }
-    }
+  &:active {
+    background-color: #d0d0d0;
+  }
+}

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

@@ -6,6 +6,8 @@ import {
   NgClass
 } from '@angular/common';
 import {
+  TemplateRef,
+  ViewChild,
   Component,
   Inject,
   Input,
@@ -40,6 +42,9 @@ import { ImageField } from '../../simple/field-components/specific-field/image-f
   imports: [MetadataFieldWrapperComponent, NgFor, NgTemplateOutlet, NgIf, RouterLink, AsyncPipe, TranslateModule, MarkdownDirective, NgClass],
 })
 export class MetadataValuesComponent implements OnChanges {
+
+    @ViewChild('isDQCheckRequirementTemplate') isDQCheckRequirementTemplate: TemplateRef<any>;
+
 
   constructor(
     @Inject(APP_CONFIG) private appConfig: AppConfig,
@@ -78,6 +83,10 @@ export class MetadataValuesComponent implements OnChanges {
    */
   renderMarkdown;
 
+  /**
+   * Input flag to apply special styling
+   */
+  @Input() isDQCheckRequirement: boolean = false;
 
   @Input() browseDefinition?: BrowseDefinition;
 
@@ -210,6 +219,5 @@ export class MetadataValuesComponent implements OnChanges {
    */
   shouldRenderAsBadge(mdValue: MetadataValue): boolean {
     return this.renderAsBadge;
-  }
-
+  }  
 }

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

@@ -69,4 +69,9 @@ export class GenericItemPageFieldComponent extends ItemPageFieldComponent {
    */
   @Input() sentenceTemplate?: string;
 
+  /**
+   * Flag to indicate if the DQ check requirement is enabled
+   */
+  @Input() isDQCheckRequirement = false;
+
 }

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

@@ -11,5 +11,6 @@
     [renderAsBadge]="renderAsBadge"
     [entityType]="entityType"
     [sentenceTemplate]="sentenceTemplate"
+    [isDQCheckRequirement]="isDQCheckRequirement"
   ></ds-metadata-values>
 </div>

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

@@ -90,6 +90,11 @@ export class ItemPageFieldComponent {
      */
     @Input() sentenceTemplate?: string;
 
+    /**
+     * Flag to indicate special styling for 'local.dqcheck.requirement'
+     */
+    isDQCheckRequirement: boolean = false;
+
     /**
      * Return browse definition that matches any field used in this component if it is configured as a browse
      * link in dspace.cfg (webui.browse.link.<n>)

src/themes/PEDSpace/app/item-page/simple/item-types/dqcheck/dqcheck.component.html

@@ -50,7 +50,7 @@
     <div class="col-12 col-md-8">
 
       <ds-generic-item-page-field [item]="object" [fields]="['local.dqcheck.requirement']" [separator]="','"
-      [label]="'item.preview.local.dqcheck.requirement'">
+      [label]="'item.preview.local.dqcheck.requirement'" [isDQCheckRequirement]="'true'">
       </ds-generic-item-page-field>
 
       <ds-item-page-abstract-field [item]="object" [label]="'item.page.abstract'"></ds-item-page-abstract-field>