UFAL/Release hotfix 2026 03 11

src/app/access-control/epeople-registry/epeople-registry.component.html

@@ -26,7 +26,7 @@ <h2 id="search" class="border-bottom pb-2">
         </div>
         <div class="flex-grow-1 mr-3 ml-3">
           <div class="form-group input-group">
-            <label id="query" for="query" class="sr-only">{{labelPrefix + 'search.placeholder' | translate}}</label>
+            <label id="query-label" for="query" class="sr-only">{{labelPrefix + 'search.placeholder' | translate}}</label>
             <input type="text" name="query" id="query" formControlName="query"
                    class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
                    [placeholder]="(labelPrefix + 'search.placeholder' | translate)">

src/app/bitstream-page/bitstream-page.resolver.ts

@@ -12,7 +12,8 @@ import { getFirstCompletedRemoteData } from '../core/shared/operators';
  * Requesting them as embeds will limit the number of requests
  */
  export const BITSTREAM_PAGE_LINKS_TO_FOLLOW: FollowLinkConfig<Bitstream>[] = [
-  followLink('bundle', {}, followLink('primaryBitstream'), followLink('item')),
+  followLink('bundle', {}, followLink('item')),
+  followLink('bundle', {}, followLink('primaryBitstream')),
   followLink('format')
 ];
 

src/app/item-page/clarin-ref-featured-services/clarin-ref-featured-services.component.html

@@ -13,7 +13,7 @@
       </div>
 
       <div class="d-flex align-items-start clarin-ref-box-footer-services pt-1">
-        <div class="btn-group pr-2" ngbDropdown *ngFor="let featuredService of (featuredServices | async)">
+        <div class="btn-group pr-2" ngbDropdown *ngFor="let featuredService of (featuredServices | async); let i = index">
           <a class="btn btn-danger clarin-ref-box-services-button"
              type="button"
              target="_blank"
@@ -22,13 +22,13 @@
           </a>
           <button type="button"
                   class="btn btn-danger dropdown-toggle dropdown-toggle-split clarin-ref-box-services-button"
-                  id="resultdropdown"
+                  id="resultdropdown-{{ i }}"
                   ngbDropdownToggle
                   data-bs-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false">
           </button>
-          <div ngbDropdownMenu aria-labelledby="resultdropdown" class="lindat-dropdown-menu">
+          <div ngbDropdownMenu [attr.aria-labelledby]="'resultdropdown-' + i" class="lindat-dropdown-menu">
             <a
               class="dropdown-item"
               target="_blank"

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -15,19 +15,19 @@
              [attr.aria-label]="'item.edit.bitstreams.bundle.table.aria-label' | translate: { bundle: bundleName } ">
         <thead [class.visually-hidden]="!isFirstTable">
         <tr class="header-row font-weight-bold">
-          <th id="name" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
+          <th id="name-{{ sanitizedBundleName }}" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
             {{'item.edit.bitstreams.headers.name' | translate}}
           </th>
-          <th id="description" scope="col" class="{{ columnSizes.columns[1].buildClasses() }}">
+          <th id="description-{{ sanitizedBundleName }}" scope="col" class="{{ columnSizes.columns[1].buildClasses() }}">
             {{'item.edit.bitstreams.headers.description' | translate}}
           </th>
-          <th id="format" scope="col" class="{{ columnSizes.columns[2].buildClasses() }}">
+          <th id="format-{{ sanitizedBundleName }}" scope="col" class="{{ columnSizes.columns[2].buildClasses() }}">
             {{'item.edit.bitstreams.headers.format' | translate}}
           </th>
-          <th id="actions" scope="col" class="{{ columnSizes.columns[3].buildClasses() }} text-center">
+          <th id="actions-{{ sanitizedBundleName }}" scope="col" class="{{ columnSizes.columns[3].buildClasses() }} text-center">
             {{'item.edit.bitstreams.headers.actions' | translate}}
           </th>
-          <th id="synchronized" scope="col" class="{{ columnSizes.columns[4].buildClasses() }} text-center">
+          <th id="synchronized-{{ sanitizedBundleName }}" scope="col" class="{{ columnSizes.columns[4].buildClasses() }} text-center">
             {{'item.edit.bitstreams.headers.synchronized' | translate}}
           </th>
         </tr>
@@ -50,19 +50,19 @@
               </button>
               <div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-right btn-sm p-0"
                    placement="bottom-right">
-                <button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle
+                <button class="btn btn-outline-secondary" id="paginationControls-bundle-{{ sanitizedBundleName }}" ngbDropdownToggle
                         [title]="'pagination.options.description' | translate"
                         [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true"
                         aria-expanded="false">
                   <i class="fas fa-cog" aria-hidden="true"></i>
                 </button>
 
-                <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu"
+                <ul id="paginationControlsDropdownMenu-bundle-{{ sanitizedBundleName }}" [attr.aria-labelledby]="'paginationControls-bundle-' + sanitizedBundleName" role="menu"
                     ngbDropdownMenu>
                   <li role="menuitem">
-                    <span class="dropdown-header" id="pagination-control_results-per-page"
+                    <span class="dropdown-header" id="pagination-control_results-per-page-bundle-{{ sanitizedBundleName }}"
                           role="heading">{{ 'pagination.results-per-page' | translate}}</span>
-                    <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                    <ul [attr.aria-labelledby]="'pagination-control_results-per-page-bundle-' + sanitizedBundleName" class="list-unstyled" role="listbox">
                       <li *ngFor="let size of paginationOptions.pageSizeOptions" role="option"
                           [attr.aria-selected]="size === (pageSize$ | async)">
                         <button (click)="doPageSizeChange(size)" class="dropdown-item">
@@ -85,7 +85,7 @@
               (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()">
 
             <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
-                scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
+                scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name-{{ sanitizedBundleName }}">
                 <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0" cdkDragHandle
                      (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
                   <i class="fas fa-grip-vertical fa-fw"
@@ -94,15 +94,15 @@
                 <span class="dont-break-out">{{ entry.name }}</span>
             </th>
             <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} description">
+                headers="{{ entry.nameStripped }} {{ bundleName }} description-{{ sanitizedBundleName }}">
               <span class="dont-break-out">{{ entry.description }}</span>
             </td>
             <td class="row-element {{ columnSizes.columns[2].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} format">
+                headers="{{ entry.nameStripped }} {{ bundleName }} format-{{ sanitizedBundleName }}">
               <span class="dont-break-out">{{ (entry.format | async)?.shortDescription }}</span>
             </td>
             <td class="row-element {{ columnSizes.columns[3].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} actions">
+                headers="{{ entry.nameStripped }} {{ bundleName }} actions-{{ sanitizedBundleName }}">
               <div class="text-center w-100">
                 <div class="btn-group relationship-action-buttons">
                   <a [href]="entry.downloadUrl"
@@ -133,7 +133,7 @@
               </div>
             </td>
             <td class="{{columnSizes.columns[4].buildClasses()}} row-element"
-                headers="{{ entry.nameStripped }} {{ bundleName }} synchronized">
+                headers="{{ entry.nameStripped }} {{ bundleName }} synchronized-{{ sanitizedBundleName }}">
               <div class="d-flex align-items-center justify-content-center">
                 <span class="text-center">
                   <i [class]="isBitstreamSynchronized(entry) ? 'fas fa-check' : 'fas fa-times'"></i>

src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts

@@ -107,6 +107,12 @@ export class ItemEditBitstreamBundleComponent implements OnInit, OnDestroy {
    */
   bundleName: string;
 
+  /**
+   * Sanitized bundle name (whitespace removed) for use in HTML element IDs.
+   * HTML IDs cannot contain spaces, so this ensures valid id/headers/aria-labelledby tokens.
+   */
+  sanitizedBundleName: string;
+
   /**
    * The number of bitstreams in the bundle
    */
@@ -189,6 +195,7 @@ export class ItemEditBitstreamBundleComponent implements OnInit, OnDestroy {
     this.viewContainerRef.createEmbeddedView(this.bundleView);
     this.itemPageRoute = getItemPageRoute(this.item);
     this.bundleName = this.dsoNameService.getName(this.bundle);
+    this.sanitizedBundleName = this.bundleName.replace(/\s+/g, '');
     this.bundleUrl = this.bundle.self;
 
     this.initializePagination();

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

@@ -1,16 +1,16 @@
 <div *ngVar="item?.allMetadataValues('local.sponsor') as sponsorMvs">
-  <div *ngFor="let sponsor of sponsorMvs; let lastItem = last">
+  <div *ngFor="let sponsor of sponsorMvs; let i = index; let lastItem = last">
     <div *ngVar="sponsor?.split(SPONSOR_VALUE_SEPARATOR) as sponsorMetadataValueParts">
       <div class="sponsor-padding">
-        <span id="organization-value">{{ getValueOrError(sponsorMetadataValueParts?.[2], ORGANIZATION_ERROR) }}</span>
+        <span id="organization-value-{{ i }}">{{ getValueOrError(sponsorMetadataValueParts?.[2], ORGANIZATION_ERROR) }}</span>
       </div>
       <div class="sponsor-padding">
         <span>{{ 'item.page.acknowledgement.project-code' | translate }}</span>
-        <span id="project-code-value" class="pl-1">{{ getValueOrError(sponsorMetadataValueParts?.[1], PROJECT_CODE_ERROR) }}</span>
+        <span id="project-code-value-{{ i }}" class="pl-1">{{ getValueOrError(sponsorMetadataValueParts?.[1], PROJECT_CODE_ERROR) }}</span>
       </div>
       <div class="sponsor-padding">
         <span>{{ 'item.page.acknowledgement.project-name' | translate }}</span>
-        <span id="project-name-value" class="pl-1">{{ getValueOrError(sponsorMetadataValueParts?.[3], PROJECT_NAME_ERROR) }}</span>
+        <span id="project-name-value-{{ i }}" class="pl-1">{{ getValueOrError(sponsorMetadataValueParts?.[3], PROJECT_NAME_ERROR) }}</span>
       </div>
       <div *ngIf="!lastItem" class="pb-3"></div>
     </div>

src/app/item-page/simple/field-components/clarin-sponsor-item-field/clarin-sponsor-item-field.component.spec.ts

@@ -41,9 +41,9 @@ describe('ClarinSponsorItemFieldComponent', () => {
     component.item = mockItemWithMetadataFieldsAndValue(['local.sponsor'], EU_FUND);
     fixture.detectChanges();
 
-    expect(fixture.debugElement.query(By.css('#organization-value')).nativeElement.textContent).toContain(ORGANIZATION);
-    expect(fixture.debugElement.query(By.css('#project-code-value')).nativeElement.textContent).toContain(PROJECT_CODE);
-    expect(fixture.debugElement.query(By.css('#project-name-value')).nativeElement.textContent).toContain(PROJECT_NAME);
+    expect(fixture.debugElement.query(By.css('#organization-value-0')).nativeElement.textContent).toContain(ORGANIZATION);
+    expect(fixture.debugElement.query(By.css('#project-code-value-0')).nativeElement.textContent).toContain(PROJECT_CODE);
+    expect(fixture.debugElement.query(By.css('#project-name-value-0')).nativeElement.textContent).toContain(PROJECT_NAME);
   });
 
   it('should render national fund', () => {
@@ -54,8 +54,8 @@ describe('ClarinSponsorItemFieldComponent', () => {
 
     component.item = mockItemWithMetadataFieldsAndValue(['local.sponsor'], NATIONAL_FUND) as any;
     fixture.detectChanges();
-    expect(fixture.debugElement.query(By.css('#organization-value')).nativeElement.textContent).toContain(ORGANIZATION);
-    expect(fixture.debugElement.query(By.css('#project-code-value')).nativeElement.textContent).toContain(PROJECT_CODE);
-    expect(fixture.debugElement.query(By.css('#project-name-value')).nativeElement.textContent).toContain(PROJECT_NAME);
+    expect(fixture.debugElement.query(By.css('#organization-value-0')).nativeElement.textContent).toContain(ORGANIZATION);
+    expect(fixture.debugElement.query(By.css('#project-code-value-0')).nativeElement.textContent).toContain(PROJECT_CODE);
+    expect(fixture.debugElement.query(By.css('#project-name-value-0')).nativeElement.textContent).toContain(PROJECT_NAME);
   });
 });

src/app/item-page/simple/field-components/preview-section/file-description/file-tree-view/file-tree-view.component.html

@@ -11,7 +11,7 @@
 
   <ng-template #fileTemplate>
     <i class="far fa-file fa-sm pr-1" style="color: #a0a0a0"></i>
-    <span id="folderName">{{ node.name }}</span>
+    <span>{{ node.name }}</span>
     <span class="size pull-right">{{ node.size }}</span>
   </ng-template>
 

src/app/item-page/simple/field-components/preview-section/file-description/file-tree-view/file-tree-view.component.spec.ts

@@ -46,7 +46,7 @@ describe('FileTreeViewComponent', () => {
 
   it('should display the node name', () => {
     waitForAsync(() => {
-      const nodeNameElement = fixture.debugElement.query(By.css('#folderName')).nativeElement;
+      const nodeNameElement = fixture.debugElement.query(By.css('span')).nativeElement;
       expect(nodeNameElement.textContent).toContain('TestFolder');
     });
   });

src/app/shared/ds-select/ds-select.component.html

@@ -3,13 +3,13 @@
   <div ngbDropdown class="btn-group" (openChange)="toggled.emit($event)">
 
     <div class="input-group-prepend" *ngIf="label">
-      <span id="dsSelectMenuLabel" class="input-group-text">
+      <span id="dsSelectMenuLabel-{{ uniqueId }}" class="input-group-text">
         {{ label | translate }}
       </span>
     </div>
 
-    <button aria-describedby="dsSelectMenuLabel"
-            id="dsSelectMenuButton"
+    <button [attr.aria-describedby]="label ? 'dsSelectMenuLabel-' + uniqueId : null"
+            id="dsSelectMenuButton-{{ uniqueId }}"
             class="btn btn-outline-primary selection"
             (blur)="close.emit($event)"
             (click)="close.emit($event)"
@@ -20,8 +20,8 @@
 
     <div ngbDropdownMenu
          class="dropdown-menu"
-         id="dsSelectDropdownMenu"
-         aria-labelledby="dsSelectMenuButton">
+         id="dsSelectDropdownMenu-{{ uniqueId }}"
+         [attr.aria-labelledby]="'dsSelectMenuButton-' + uniqueId">
       <div>
         <ng-content select=".menu"></ng-content>
       </div>

src/app/shared/ds-select/ds-select.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
+let nextDsSelectId = 0;
+
 /**
  * Component which represent a DSpace dropdown selector.
  */
@@ -10,6 +12,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class DsSelectComponent {
 
+  /**
+   * Unique identifier for the component instance.
+   */
+  uniqueId = `ds-select-${nextDsSelectId++}`;
+
   /**
    * An optional label for the dropdown selector.
    */

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -3,7 +3,7 @@
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   <label *ngIf="!isCheckbox && hasLabel"
-         [id]="'label_' + model.id"
+         [id]="'label_' + id"
          [for]="id"
          [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
          [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts

@@ -377,4 +377,78 @@ describe('DsDynamicFormControlContainerComponent test suite', () => {
     expect(testFn(formModel[25])).toEqual(DsDynamicFormGroupComponent);
   });
 
+  describe('unique id generation', () => {
+    afterEach(() => {
+      DsDynamicFormControlContainerComponent.resetIdCounters();
+    });
+
+    it('should return the base element ID for the first instance of a given id', () => {
+      // testModel (formModel[8]) has id 'input' — first instance keeps original
+      expect(component.id).toBe(component.model.id);
+    });
+
+    it('should return a suffixed ID for the second instance of the same base id', () => {
+      // Simulate two separate container instances with the same base id.
+      // The first call to the getter registers 'input' → suffix 0 (original).
+      expect(component.id).toBe('input');
+
+      // Create a second component-like access: directly exercise the getter
+      // on a fresh component that shares the same model id.
+      const secondComponent = Object.create(component);
+      secondComponent._cachedId = undefined;
+      secondComponent._baseId = undefined;
+      // model with the same id but a new instance
+      secondComponent.model = new DynamicInputModel({ id: 'input' });
+      expect(secondComponent.id).toBe('input_1');
+    });
+
+    it('should not interfere between different base ids', () => {
+      expect(component.id).toBe('input'); // registers 'input'
+
+      const otherComponent = Object.create(component);
+      otherComponent._cachedId = undefined;
+      otherComponent._baseId = undefined;
+      otherComponent.model = new DynamicInputModel({ id: 'email' });
+      expect(otherComponent.id).toBe('email'); // first 'email' → original
+    });
+
+    it('should return the same id on repeated access (idempotent)', () => {
+      const first = component.id;
+      const second = component.id;
+      expect(first).toBe(second);
+    });
+
+    it('should remove the id state entry so the next instance reuses the base id', () => {
+      expect(component.id).toBe('input');
+
+      // Destroy the only active instance — state entry should be deleted
+      component.ngOnDestroy();
+      // A new component with the same base id should receive the original base id (no suffix)
+      const newComponent = Object.create(component);
+      newComponent._cachedId = undefined;
+      newComponent._baseId = undefined;
+      newComponent.model = new DynamicInputModel({ id: 'input' });
+      expect(newComponent.id).toBe('input');
+    });
+
+    it('should keep the id state entry when other instances with the same base id are still active', () => {
+      // Register two instances with the same base id
+      expect(component.id).toBe('input');
+
+      const secondComponent = Object.create(component);
+      secondComponent._cachedId = undefined;
+      secondComponent._baseId = undefined;
+      secondComponent.model = new DynamicInputModel({ id: 'input' });
+      expect(secondComponent.id).toBe('input_1');
+
+      component.ngOnDestroy();// destroy only the first instance
+      // A third component with the same base id should still get a suffixed id
+      const thirdComponent = Object.create(component);
+      thirdComponent._cachedId = undefined;
+      thirdComponent._baseId = undefined;
+      thirdComponent.model = new DynamicInputModel({ id: 'input' });
+      expect(thirdComponent.id).toBe('input_2');
+    });
+  });
+
 });