Bump webpack from 5.101.0 to 5.101.3 in the webpack group

Bumps the webpack group with 1 update: [webpack](https://github.com/webpack/webpack).


Updates `webpack` from 5.101.0 to 5.101.3
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.101.0...v5.101.3)

---
updated-dependencies:
- dependency-name: webpack
  dependency-version: 5.101.3
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: webpack
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.json

@@ -12,7 +12,6 @@
     "eslint-plugin-rxjs",
     "eslint-plugin-simple-import-sort",
     "eslint-plugin-import-newlines",
-    "eslint-plugin-jsonc",
     "dspace-angular-ts",
     "dspace-angular-html"
   ],
@@ -302,10 +301,13 @@
         "*.json5"
       ],
       "extends": [
-        "plugin:jsonc/recommended-with-jsonc"
+        "plugin:jsonc/recommended-with-json5"
       ],
       "rules": {
-        "no-irregular-whitespace": "error",
+        // The ESLint core no-irregular-whitespace rule doesn't work well in JSON
+        // See: https://ota-meshi.github.io/eslint-plugin-jsonc/rules/no-irregular-whitespace.html
+        "no-irregular-whitespace": "off",
+        "jsonc/no-irregular-whitespace": "error",
         "no-trailing-spaces": "error",
         "jsonc/comma-dangle": [
           "error",

.github/workflows/build.yml

@@ -29,6 +29,8 @@ jobs:
       DSPACE_CACHE_SERVERSIDE_ANONYMOUSCACHE_MAX: 0
       # Tell Cypress to run e2e tests using the same UI URL
       CYPRESS_BASE_URL: http://127.0.0.1:4000
+      # Disable the cookie consent banner in e2e tests to avoid errors because of elements hidden by it
+      DSPACE_INFO_ENABLECOOKIECONSENTPOPUP: false
       # When Chrome version is specified, we pin to a specific version of Chrome
       # Comment this out to use the latest release
       #CHROME_VERSION: "90.0.4430.212-1"
@@ -190,12 +192,115 @@ jobs:
       # Get homepage and verify that the <meta name="title"> tag includes "DSpace".
       # If it does, then SSR is working, as this tag is created by our MetadataService.
       # This step also prints entire HTML of homepage for easier debugging if grep fails.
-      - name: Verify SSR (server-side rendering)
+      - name: Verify SSR (server-side rendering) on Homepage
         run: |
           result=$(wget -O- -q http://127.0.0.1:4000/home)
           echo "$result"
           echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep DSpace
 
+      # Get a specific community in our test data and verify that the "<h1>" tag includes "Publications" (the community name).
+      # If it does, then SSR is working.
+      - name: Verify SSR on a Community page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/communities/0958c910-2037-42a9-81c7-dca80e3892b4)
+          echo "$result"
+          echo "$result" | grep -oE "<h1 [^>]*>[^><]*</h1>" | grep Publications
+
+      # Get a specific collection in our test data and verify that the "<h1>" tag includes "Articles" (the collection name).
+      # If it does, then SSR is working.
+      - name: Verify SSR on a Collection page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/collections/282164f5-d325-4740-8dd1-fa4d6d3e7200)
+          echo "$result"
+          echo "$result" | grep -oE "<h1 [^>]*>[^><]*</h1>" | grep Articles
+
+      # Get a specific publication in our test data and verify that the <meta name="title"> tag includes
+      # the title of this publication. If it does, then SSR is working.
+      - name: Verify SSR on a Publication page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/publication/6160810f-1e53-40db-81ef-f6621a727398)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "An Economic Model of Mortality Salience"
+
+      # Get a specific person in our test data and verify that the <meta name="title"> tag includes
+      # the name of the person. If it does, then SSR is working.
+      - name: Verify SSR on a Person page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/person/b1b2c768-bda1-448a-a073-fc541e8b24d9)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Simmons, Cameron"
+
+      # Get a specific project in our test data and verify that the <meta name="title"> tag includes
+      # the name of the project. If it does, then SSR is working.
+      - name: Verify SSR on a Project page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/project/46ccb608-a74c-4bf6-bc7a-e29cc7defea9)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "University Research Fellowship"
+
+      # Get a specific orgunit in our test data and verify that the <meta name="title"> tag includes
+      # the name of the orgunit. If it does, then SSR is working.
+      - name: Verify SSR on an OrgUnit page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/orgunit/9851674d-bd9a-467b-8d84-068deb568ccf)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Law and Development"
+
+      # Get a specific journal in our test data and verify that the <meta name="title"> tag includes
+      # the name of the journal. If it does, then SSR is working.
+      - name: Verify SSR on a Journal page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journal/d4af6c3e-53d0-4757-81eb-566f3b45d63a)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology"
+
+      # Get a specific journal volume in our test data and verify that the <meta name="title"> tag includes
+      # the name of the volume. If it does, then SSR is working.
+      - name: Verify SSR on a Journal Volume page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journalvolume/07c6249f-4bf7-494d-9ce3-6ffdb2aed538)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology Volume 28 (2017)"
+
+      # Get a specific journal issue in our test data and verify that the <meta name="title"> tag includes
+      # the name of the issue. If it does, then SSR is working.
+      - name: Verify SSR on a Journal Issue page
+        run: |
+          result=$(wget -O- -q http://127.0.0.1:4000/entities/journalissue/44c29473-5de2-48fa-b005-e5029aa1a50b)
+          echo "$result"
+          echo "$result" | grep -oE "<meta name=\"title\" [^>]*>" | grep "Environmental &amp; Architectural Phenomenology Vol. 28, No. 1"
+
+      # Verify 301 Handle redirect behavior
+      # Note: /handle/123456789/260 is the same test Publication used by our e2e tests
+      - name: Verify 301 redirect from '/handle' URLs
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/handle/123456789/260 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "301" ]]
+
+      # Verify 403 error code behavior
+      - name: Verify 403 error code from '/403'
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/403 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "403" ]]
+
+      # Verify 404 error code behavior
+      - name: Verify 404 error code from '/404' and on invalid pages
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/404 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          result2=$(wget --server-response --quiet http://127.0.0.1:4000/invalidurl 2>&1 | head -1 | awk '{print $2}')
+          echo "$result2"
+          [[ "$result" -eq "404" && "$result2" -eq "404" ]]
+
+      # Verify 500 error code behavior
+      - name: Verify 500 error code from '/500'
+        run: |
+          result=$(wget --server-response --quiet http://127.0.0.1:4000/500 2>&1 | head -1 | awk '{print $2}')
+          echo "$result"
+          [[ "$result" -eq "500" ]]
+
       - name: Stop running app
         run: kill -9 $(lsof -t -i:4000)
 

.github/workflows/codescan.yml

@@ -40,14 +40,14 @@ jobs:
       # Initializes the CodeQL tools for scanning.
       # https://github.com/github/codeql-action
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: javascript
 
       # Autobuild attempts to build any compiled languages
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       # Perform GitHub Code Scanning.
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3

config/config.example.yml

@@ -23,10 +23,24 @@ ssr:
   # Determining which styles are critical is a relatively expensive operation; this option is
   # disabled (false) by default to boost server performance at the expense of loading smoothness.
   inlineCriticalCss: false
-  # Path prefixes to enable SSR for. By default these are limited to paths of primary DSpace objects.
-  # NOTE: The "/handle/" path ensures Handle redirects work via SSR.  The "/reload/" path ensures
-  # hard refreshes (e.g. after login) trigger SSR while fully reloading the page.
-  paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/', '/reload/' ]
+  # Patterns to be run as regexes against the path of the page to check if SSR is allowed.
+  # If the path match any of the regexes it will be served directly in CSR.
+  # By default, excludes community and collection browse, global browse, global search, community list, statistics and various administrative tools.
+  excludePathPatterns:
+    - pattern: "^/communities/[a-f0-9-]{36}/browse(/.*)?$"
+      flag: "i"
+    - pattern: "^/collections/[a-f0-9-]{36}/browse(/.*)?$"
+      flag: "i"
+    - pattern: "^/browse/"
+    - pattern: "^/search$"
+    - pattern: "^/community-list$"
+    - pattern: "^/admin/"
+    - pattern: "^/processes/?"
+    - pattern: "^/notifications/"
+    - pattern: "^/statistics/?"
+    - pattern: "^/access-control/"
+    - pattern: "^/health$"
+
   # Whether to enable rendering of Search component on SSR.
   # If set to true the component will be included in the HTML returned from the server side rendering.
   # If set to false the component will not be included in the HTML returned from the server side rendering.
@@ -353,12 +367,20 @@ item:
 
 # Community Page Config
 community:
+  # Default tab to be shown when browsing a Community. Valid values are: comcols, search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true
 
 # Collection Page Config
 collection:
+  # Default tab to be shown when browsing a Collection. Valid values are: search, or browse_<field>
+  # <field> must be any of the configured "browse by" fields, e.g., dateissued, author, title, or subject
+  # When the default tab is not the 'search' tab, the search tab is moved to the last position
+  defaultBrowseTab: search
   # Search tab config
   searchSection:
     showSidebar: true
@@ -550,3 +572,8 @@ liveRegion:
   messageTimeOutDurationMs: 30000
   # The visibility of the live region. Setting this to true is only useful for debugging purposes.
   isVisible: false
+
+# Configuration for storing accessibility settings, used by the AccessibilitySettingsService
+accessibility:
+  # The duration in days after which the accessibility settings cookie expires
+  cookieExpirationDuration: 7

cypress/e2e/header.cy.ts

@@ -15,24 +15,24 @@ describe('Header', () => {
     cy.visit('/');
 
     // Click the language switcher (globe) in header
-    cy.get('a[data-test="lang-switch"]').click();
+    cy.get('button[data-test="lang-switch"]').click();
     // Click on the "Deusch" language in dropdown
-    cy.get('#language-menu-list li').contains('Deutsch').click();
+    cy.get('#language-menu-list div[role="option"]').contains('Deutsch').click();
 
     // HTML "lang" attribute should switch to "de"
     cy.get('html').invoke('attr', 'lang').should('eq', 'de');
 
     // Login menu should now be in German
-    cy.get('a[data-test="login-menu"]').contains('Anmelden');
+    cy.get('[data-test="login-menu"]').contains('Anmelden');
 
     // Change back to English from language switcher
-    cy.get('a[data-test="lang-switch"]').click();
-    cy.get('#language-menu-list li').contains('English').click();
+    cy.get('button[data-test="lang-switch"]').click();
+    cy.get('#language-menu-list div[role="option"]').contains('English').click();
 
     // HTML "lang" attribute should switch to "en"
     cy.get('html').invoke('attr', 'lang').should('eq', 'en');
 
     // Login menu should now be in English
-    cy.get('a[data-test="login-menu"]').contains('Log In');
+    cy.get('[data-test="login-menu"]').contains('Log In');
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "8.1.0",
+  "version": "8.3.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -66,8 +66,8 @@
     "@angular/platform-browser-dynamic": "^17.3.11",
     "@angular/platform-server": "^17.3.11",
     "@angular/router": "^17.3.11",
-    "@angular/ssr": "^17.3.11",
-    "@babel/runtime": "7.26.0",
+    "@angular/ssr": "^17.3.17",
+    "@babel/runtime": "7.28.4",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
@@ -78,14 +78,14 @@
     "@ngx-translate/core": "^14.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "angulartics2": "^12.2.0",
-    "axios": "^1.7.9",
+    "axios": "^1.11.0",
     "bootstrap": "^4.6.1",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
-    "compression": "^1.7.5",
+    "compression": "^1.8.1",
     "cookie-parser": "1.4.7",
-    "core-js": "^3.40.0",
+    "core-js": "^3.45.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.3.1",
@@ -94,9 +94,9 @@
     "express-rate-limit": "^5.1.3",
     "fast-json-patch": "^3.1.1",
     "filesize": "^6.1.0",
-    "http-proxy-middleware": "^2.0.7",
+    "http-proxy-middleware": "^2.0.9",
     "http-terminator": "^3.2.0",
-    "isbot": "^5.1.21",
+    "isbot": "^5.1.30",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
@@ -109,7 +109,7 @@
     "mirador": "^3.4.3",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.16.0",
-    "morgan": "^1.10.0",
+    "morgan": "^1.10.1",
     "ng2-file-upload": "5.0.0",
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^16.0.0",
@@ -119,20 +119,20 @@
     "nouislider": "^15.7.1",
     "pem": "1.14.8",
     "reflect-metadata": "^0.2.2",
-    "rxjs": "^7.8.0",
+    "rxjs": "^7.8.2",
     "uuid": "^8.3.2",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.14.0"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~17.0.2",
-    "@angular-devkit/build-angular": "^17.3.11",
+    "@angular-devkit/build-angular": "^17.3.17",
     "@angular-eslint/builder": "17.5.3",
     "@angular-eslint/bundled-angular-compiler": "17.5.3",
     "@angular-eslint/eslint-plugin": "17.5.3",
     "@angular-eslint/eslint-plugin-template": "17.5.3",
     "@angular-eslint/schematics": "17.5.3",
     "@angular-eslint/template-parser": "17.5.3",
-    "@angular/cli": "^17.3.11",
+    "@angular/cli": "^17.3.17",
     "@angular/compiler-cli": "^17.3.11",
     "@angular/language-service": "^17.3.11",
     "@cypress/schematic": "^1.5.0",
@@ -147,28 +147,28 @@
     "@types/grecaptcha": "^3.0.9",
     "@types/jasmine": "~3.6.0",
     "@types/js-cookie": "2.2.6",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^14.14.9",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@typescript-eslint/rule-tester": "^7.2.0",
     "@typescript-eslint/utils": "^7.2.0",
-    "axe-core": "^4.10.2",
+    "axe-core": "^4.10.3",
     "compression-webpack-plugin": "^9.2.0",
     "copy-webpack-plugin": "^6.4.1",
     "cross-env": "^7.0.3",
     "csstype": "^3.1.3",
     "cypress": "^13.17.0",
-    "cypress-axe": "^1.5.0",
+    "cypress-axe": "^1.7.0",
     "deep-freeze": "0.0.1",
     "eslint": "^8.39.0",
     "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-dspace-angular-html": "link:./lint/dist/src/rules/html",
     "eslint-plugin-dspace-angular-ts": "link:./lint/dist/src/rules/ts",
-    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-import-newlines": "^1.3.1",
     "eslint-plugin-jsdoc": "^45.0.0",
-    "eslint-plugin-jsonc": "^2.18.2",
+    "eslint-plugin-jsonc": "^2.20.1",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -183,7 +183,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ng-mocks": "^14.13.2",
+    "ng-mocks": "^14.13.5",
     "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
     "postcss": "^8.5",
@@ -195,13 +195,13 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "sass": "~1.83.4",
+    "sass": "~1.92.1",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
     "typescript": "~5.4.5",
-    "webpack": "5.97.1",
+    "webpack": "5.102.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.2.2"
   }
 }

server.ts

@@ -58,6 +58,7 @@ import {
   REQUEST,
   RESPONSE,
 } from './src/express.tokens';
+import { SsrExcludePatterns } from "./src/config/ssr-config.interface";
 
 /*
  * Set path for the browser application's dist folder
@@ -221,7 +222,7 @@ export function app() {
  * The callback function to serve server side angular
  */
 function ngApp(req, res, next) {
-  if (environment.ssr.enabled && req.method === 'GET' && (req.path === '/' || environment.ssr.paths.some(pathPrefix => req.path.startsWith(pathPrefix)))) {
+  if (environment.ssr.enabled && req.method === 'GET' && (req.path === '/' || !isExcludedFromSsr(req.path, environment.ssr.excludePathPatterns))) {
     // Render the page to user via SSR (server side rendering)
     serverSideRender(req, res, next);
   } else {
@@ -560,8 +561,8 @@ function createHttpsServer(keys) {
  * Create an HTTP server with the configured port and host.
  */
 function run() {
-  const port = environment.ui.port || 4000;
-  const host = environment.ui.host || '/';
+  const port = environment.ui.port;
+  const host = environment.ui.host;
 
   // Start up the Node server
   const server = app();
@@ -627,6 +628,21 @@ function start() {
   }
 }
 
+/**
+ * Check if SSR should be skipped for path
+ *
+ * @param path
+ * @param excludePathPattern
+ */
+function isExcludedFromSsr(path: string, excludePathPattern: SsrExcludePatterns[]): boolean {
+  const patterns = excludePathPattern.map(p =>
+    new RegExp(p.pattern, p.flag || '')
+  );
+  return patterns.some((regex) => {
+    return regex.test(path)
+  });
+}
+
 /*
  * The callback function to serve health check requests
  */

src/app/access-control/bulk-access/bulk-access.component.spec.ts

@@ -1,4 +1,7 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  Component,
+  NO_ERRORS_SCHEMA,
+} from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
@@ -62,10 +65,17 @@ describe('BulkAccessComponent', () => {
     'file': {  },
   };
 
-  const mockSettings: any = jasmine.createSpyObj('AccessControlFormContainerComponent',  {
-    getValue: jasmine.createSpy('getValue'),
-    reset: jasmine.createSpy('reset'),
-  });
+  @Component({
+    selector: 'ds-bulk-access-settings',
+    template: '',
+    exportAs: 'dsBulkSettings',
+    standalone: true,
+  })
+  class MockBulkAccessSettingsComponent {
+    isFormValid = jasmine.createSpy('isFormValid').and.returnValue(false);
+    getValue = jasmine.createSpy('getValue');
+    reset = jasmine.createSpy('reset');
+  }
   const selection: any[] = [{ indexableObject: { uuid: '1234' } }, { indexableObject: { uuid: '5678' } }];
   const selectableListState: SelectableListState = { id: 'test', selection };
   const expectedIdList = ['1234', '5678'];
@@ -93,6 +103,9 @@ describe('BulkAccessComponent', () => {
             BulkAccessSettingsComponent,
           ],
         },
+        add: {
+          imports: [MockBulkAccessSettingsComponent],
+        },
       })
       .compileComponents();
   });
@@ -109,13 +122,12 @@ describe('BulkAccessComponent', () => {
     fixture.destroy();
   });
 
-  describe('when there are no elements selected', () => {
+  describe('when there are no elements selected and step two form is invalid', () => {
 
     beforeEach(() => {
 
       (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListStateEmpty));
       fixture.detectChanges();
-      component.settings = mockSettings;
     });
 
     it('should create', () => {
@@ -138,7 +150,6 @@ describe('BulkAccessComponent', () => {
 
       (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListState));
       fixture.detectChanges();
-      component.settings = mockSettings;
     });
 
     it('should create', () => {
@@ -149,15 +160,29 @@ describe('BulkAccessComponent', () => {
       expect(component.objectsSelected$.value).toEqual(expectedIdList);
     });
 
-    it('should enable the execute button when there are objects selected', () => {
+    it('should not enable the execute button when there are objects selected and step two form is invalid', () => {
       component.objectsSelected$.next(['1234']);
-      expect(component.canExport()).toBe(true);
+      expect(component.canExport()).toBe(false);
     });
 
     it('should call the settings reset method when reset is called', () => {
       component.reset();
       expect(component.settings.reset).toHaveBeenCalled();
     });
+  });
+  describe('when there are elements selected and the step two form is valid', () => {
+
+    beforeEach(() => {
+
+      (component as any).selectableListService.getSelectableList.and.returnValue(of(selectableListState));
+      fixture.detectChanges();
+      (component as any).settings.isFormValid.and.returnValue(true);
+    });
+
+    it('should enable the execute button when there are objects selected and step two form is valid', () => {
+      component.objectsSelected$.next(['1234']);
+      expect(component.canExport()).toBe(true);
+    });
 
     it('should call the bulkAccessControlService executeScript method when submit is called', () => {
       (component.settings as any).getValue.and.returnValue(mockFormState);

src/app/access-control/bulk-access/bulk-access.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   OnInit,
   ViewChild,
@@ -31,6 +32,7 @@ import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.com
     BtnDisabledDirective,
   ],
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BulkAccessComponent implements OnInit {
 
@@ -70,7 +72,7 @@ export class BulkAccessComponent implements OnInit {
   }
 
   canExport(): boolean {
-    return this.objectsSelected$.value?.length > 0;
+    return this.objectsSelected$.value?.length > 0  && this.settings?.isFormValid();
   }
 
   /**

src/app/access-control/bulk-access/settings/bulk-access-settings.component.ts

@@ -43,4 +43,8 @@ export class BulkAccessSettingsComponent {
     this.controlForm.reset();
   }
 
+  isFormValid() {
+    return this.controlForm.isValid();
+  }
+
 }

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts

@@ -1,6 +1,5 @@
 import {
   AsyncPipe,
-  NgClass,
   NgFor,
   NgIf,
 } from '@angular/common';
@@ -88,7 +87,6 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
     NgFor,
     AsyncPipe,
     TranslateModule,
-    NgClass,
     ThemedLoadingComponent,
     PaginationComponent,
     RouterLink,

src/app/accessibility/accessibility-settings.config.ts

@@ -0,0 +1,11 @@
+import { Config } from '../../config/config.interface';
+
+/**
+ * Configuration interface used by the AccessibilitySettingsService
+ */
+export class AccessibilitySettingsConfig implements Config {
+  /**
+   * The duration in days after which the accessibility settings cookie expires
+   */
+  cookieExpirationDuration: number;
+}

src/app/accessibility/accessibility-settings.service.spec.ts

@@ -0,0 +1,419 @@
+import {
+  fakeAsync,
+  flush,
+} from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { AppConfig } from '../../config/app-config.interface';
+import { AuthService } from '../core/auth/auth.service';
+import { EPersonDataService } from '../core/eperson/eperson-data.service';
+import { EPerson } from '../core/eperson/models/eperson.model';
+import { CookieService } from '../core/services/cookie.service';
+import { KlaroServiceStub } from '../shared/cookies/klaro.service.stub';
+import { CookieServiceMock } from '../shared/mocks/cookie.service.mock';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$,
+} from '../shared/remote-data.utils';
+import { AuthServiceStub } from '../shared/testing/auth-service.stub';
+import {
+  ACCESSIBILITY_COOKIE,
+  ACCESSIBILITY_SETTINGS_METADATA_KEY,
+  AccessibilitySettings,
+  AccessibilitySettingsFormValues,
+  AccessibilitySettingsService,
+  FullAccessibilitySettings,
+} from './accessibility-settings.service';
+
+
+describe('accessibilitySettingsService', () => {
+  let service: AccessibilitySettingsService;
+  let cookieService: CookieServiceMock;
+  let authService: AuthServiceStub;
+  let ePersonService: EPersonDataService;
+  let klaroService: KlaroServiceStub;
+  let appConfig: AppConfig;
+
+  beforeEach(() => {
+    cookieService = new CookieServiceMock();
+    authService = new AuthServiceStub();
+    klaroService = new KlaroServiceStub();
+    appConfig = { accessibility: { cookieExpirationDuration: 10 } } as AppConfig;
+
+    klaroService.getSavedPreferences.and.returnValue(of({ accessibility: true }));
+
+    ePersonService = jasmine.createSpyObj('ePersonService', {
+      createPatchFromCache: of([{
+        op: 'add',
+        value: null,
+      }]),
+      patch: of({}),
+    });
+
+    service = new AccessibilitySettingsService(
+      cookieService as unknown as CookieService,
+      authService as unknown as AuthService,
+      ePersonService,
+      klaroService,
+      appConfig,
+    );
+  });
+
+  describe('get', () => {
+    it('should return the setting if it is set', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(settings));
+
+      service.get('notificationTimeOut', 'default').subscribe(value =>
+        expect(value).toEqual('1000'),
+      );
+    });
+
+    it('should return the default value if the setting is not set', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(settings));
+
+      service.get('liveRegionTimeOut', 'default').subscribe(value =>
+        expect(value).toEqual('default'),
+      );
+    });
+  });
+
+  describe('getAsNumber', () => {
+    it('should return the setting as number if the value for the setting can be parsed to a number', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of('1000'));
+
+      service.getAsNumber('notificationTimeOut').subscribe(value =>
+        expect(value).toEqual(1000),
+      );
+    });
+
+    it('should return the default value if no value is set for the setting', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of(null));
+
+      service.getAsNumber('notificationTimeOut', 123).subscribe(value =>
+        expect(value).toEqual(123),
+      );
+    });
+
+    it('should return the default value if the value for the setting can not be parsed to a number', () => {
+      service.get = jasmine.createSpy('get').and.returnValue(of('text'));
+
+      service.getAsNumber('notificationTimeOut', 123).subscribe(value =>
+        expect(value).toEqual(123),
+      );
+    });
+  });
+
+  describe('getAll', () => {
+    it('should attempt to get the settings from metadata first', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromAuthenticatedUserMetadata).toHaveBeenCalled();
+    });
+
+    it('should attempt to get the settings from the cookie if the settings from metadata are empty', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromCookie).toHaveBeenCalled();
+    });
+
+    it('should not attempt to get the settings from the cookie if the settings from metadata are not empty', () => {
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of(settings));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe();
+      expect(service.getAllSettingsFromCookie).not.toHaveBeenCalled();
+    });
+
+    it('should return an empty object if both are empty', () => {
+      service.getAllSettingsFromAuthenticatedUserMetadata =
+        jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata').and.returnValue(of({ }));
+
+      service.getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({ });
+
+      service.getAll().subscribe(value => expect(value).toEqual({}));
+    });
+  });
+
+  describe('getAllSettingsFromCookie', () => {
+    it('should retrieve the settings from the cookie', () => {
+      cookieService.get = jasmine.createSpy();
+
+      service.getAllSettingsFromCookie();
+      expect(cookieService.get).toHaveBeenCalledWith(ACCESSIBILITY_COOKIE);
+    });
+  });
+
+  describe('getAllSettingsFromAuthenticatedUserMetadata', () => {
+    it('should retrieve all settings from the user\'s metadata', () => {
+      const settings = { 'liveRegionTimeOut': '1000' };
+
+      const user = new EPerson();
+      user.setMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY, null, JSON.stringify(settings));
+
+      authService.getAuthenticatedUserFromStoreIfAuthenticated =
+        jasmine.createSpy('getAuthenticatedUserFromStoreIfAuthenticated').and.returnValue(of(user));
+
+      service.getAllSettingsFromAuthenticatedUserMetadata().subscribe(value =>
+        expect(value).toEqual(settings),
+      );
+    });
+  });
+
+  describe('set', () => {
+    it('should correctly update the chosen setting', () => {
+      service.updateSettings = jasmine.createSpy('updateSettings');
+
+      service.set('liveRegionTimeOut', '500');
+      expect(service.updateSettings).toHaveBeenCalledWith({ liveRegionTimeOut: '500' });
+    });
+  });
+
+  describe('setSettings', () => {
+    beforeEach(() => {
+      service.setSettingsInCookie = jasmine.createSpy('setSettingsInCookie').and.returnValue(of('cookie'));
+    });
+
+    it('should attempt to set settings in metadata', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('failed'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInAuthenticatedUserMetadata).toHaveBeenCalledWith(settings);
+    });
+
+    it('should set settings in cookie if metadata failed', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of(false));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInCookie).toHaveBeenCalled();
+    });
+
+    it('should not set settings in cookie if metadata succeeded', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('metadata'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe();
+      expect(service.setSettingsInCookie).not.toHaveBeenCalled();
+    });
+
+    it('should return \'metadata\' if settings are stored in metadata', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of('metadata'));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe(value =>
+        expect(value).toEqual('metadata'),
+      );
+    });
+
+    it('should return \'cookie\' if settings are stored in cookie', () => {
+      service.setSettingsInAuthenticatedUserMetadata =
+        jasmine.createSpy('setSettingsInAuthenticatedUserMetadata').and.returnValue(of(false));
+
+      const settings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.setSettings(settings).subscribe(value =>
+        expect(value).toEqual('cookie'),
+      );
+    });
+  });
+
+  describe('updateSettings', () => {
+    it('should call setSettings with the updated settings', () => {
+      const beforeSettings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+      };
+
+      service.getAll = jasmine.createSpy('getAll').and.returnValue(of(beforeSettings));
+      service.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+
+      const newSettings: AccessibilitySettings = {
+        liveRegionTimeOut: '2000',
+      };
+
+      const combinedSettings: AccessibilitySettings = {
+        notificationTimeOut: '1000',
+        liveRegionTimeOut: '2000',
+      };
+
+      service.updateSettings(newSettings).subscribe();
+      expect(service.setSettings).toHaveBeenCalledWith(combinedSettings);
+    });
+  });
+
+  describe('setSettingsInAuthenticatedUserMetadata', () => {
+    beforeEach(() => {
+      service.setSettingsInMetadata = jasmine.createSpy('setSettingsInMetadata').and.returnValue(of(null));
+    });
+
+    it('should store settings in metadata when the user is authenticated', fakeAsync(() => {
+      const user = new EPerson();
+      authService.getAuthenticatedUserFromStoreIfAuthenticated = jasmine.createSpy().and.returnValue(of(user));
+
+      service.setSettingsInAuthenticatedUserMetadata({}).subscribe();
+      flush();
+
+      expect(service.setSettingsInMetadata).toHaveBeenCalled();
+    }));
+
+    it('should emit "failed" when the user is not authenticated', fakeAsync(() => {
+      authService.getAuthenticatedUserFromStoreIfAuthenticated = jasmine.createSpy().and.returnValue(of(null));
+
+      service.setSettingsInAuthenticatedUserMetadata({})
+        .subscribe(value => expect(value).toEqual('failed'));
+      flush();
+
+      expect(service.setSettingsInMetadata).not.toHaveBeenCalled();
+    }));
+  });
+
+  describe('setSettingsInMetadata', () => {
+    const ePerson = new EPerson();
+
+    beforeEach(() => {
+      ePerson.setMetadata = jasmine.createSpy('setMetadata');
+      ePerson.removeMetadata = jasmine.createSpy('removeMetadata');
+    });
+
+    it('should set the settings in metadata', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePerson.setMetadata).toHaveBeenCalled();
+    });
+
+    it('should remove the metadata when the settings are emtpy', () => {
+      service.setSettingsInMetadata(ePerson, {}).subscribe();
+      expect(ePerson.setMetadata).not.toHaveBeenCalled();
+      expect(ePerson.removeMetadata).toHaveBeenCalled();
+    });
+
+    it('should create a patch with the metadata changes', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePersonService.createPatchFromCache).toHaveBeenCalled();
+    });
+
+    it('should send the patch request', () => {
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' }).subscribe();
+      expect(ePersonService.patch).toHaveBeenCalled();
+    });
+
+    it('should emit "metadata" when the update succeeded', fakeAsync(() => {
+      ePersonService.patch = jasmine.createSpy().and.returnValue(createSuccessfulRemoteDataObject$({}));
+
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' })
+        .subscribe(value => {
+          expect(value).toEqual('metadata');
+        });
+
+      flush();
+    }));
+
+    it('should emit "failed" when the update failed', fakeAsync(() => {
+      ePersonService.patch = jasmine.createSpy().and.returnValue(createFailedRemoteDataObject$());
+
+      service.setSettingsInMetadata(ePerson, { ['liveRegionTimeOut']: '500' })
+        .subscribe(value => {
+          expect(value).toEqual('failed');
+        });
+
+      flush();
+    }));
+  });
+
+  describe('setSettingsInCookie', () => {
+    beforeEach(() => {
+      cookieService.set = jasmine.createSpy('set');
+      cookieService.remove = jasmine.createSpy('remove');
+    });
+
+    it('should fail to store settings in the cookie when the user has not accepted the cookie', fakeAsync(() => {
+      klaroService.getSavedPreferences.and.returnValue(of({ accessibility: false }));
+
+      service.setSettingsInCookie({ ['liveRegionTimeOut']: '500' }).subscribe(value => {
+        expect(value).toEqual('failed');
+      });
+      flush();
+      expect(cookieService.set).not.toHaveBeenCalled();
+    }));
+
+    it('should store the settings in a cookie', fakeAsync(() => {
+      service.setSettingsInCookie({ ['liveRegionTimeOut']: '500' }).subscribe(value => {
+        expect(value).toEqual('cookie');
+      });
+      flush();
+      expect(cookieService.set).toHaveBeenCalled();
+    }));
+
+    it('should remove the cookie when the settings are empty', fakeAsync(() => {
+      service.setSettingsInCookie({}).subscribe(value => {
+        expect(value).toEqual('cookie');
+      });
+
+      flush();
+
+      expect(cookieService.set).not.toHaveBeenCalled();
+      expect(cookieService.remove).toHaveBeenCalled();
+    }));
+  });
+
+  describe('convertFormValuesToStoredValues', () => {
+    it('should reset the notificationTimeOut when timeOut is enabled but set to "0"', () => {
+      const formValues: AccessibilitySettingsFormValues = {
+        notificationTimeOutEnabled: true,
+        notificationTimeOut: '0',
+        liveRegionTimeOut: null,
+      };
+
+      const storedValues: FullAccessibilitySettings = service.convertFormValuesToStoredValues(formValues);
+      expect('notificationTimeOut' in storedValues).toBeFalse();
+    });
+  });
+
+  it('should keep the notificationTimeOut when timeOut is enabled and differs from "0"', () => {
+    const formValues: AccessibilitySettingsFormValues = {
+      notificationTimeOutEnabled: true,
+      notificationTimeOut: '3',
+      liveRegionTimeOut: null,
+    };
+
+    const storedValues: FullAccessibilitySettings = service.convertFormValuesToStoredValues(formValues);
+    expect('notificationTimeOut' in storedValues).toBeTrue();
+  });
+});

src/app/accessibility/accessibility-settings.service.stub.ts

@@ -0,0 +1,45 @@
+import { of } from 'rxjs';
+
+import { AccessibilitySettingsService } from './accessibility-settings.service';
+
+export function getAccessibilitySettingsServiceStub(): AccessibilitySettingsService {
+  return new AccessibilitySettingsServiceStub() as unknown as AccessibilitySettingsService;
+}
+
+export class AccessibilitySettingsServiceStub {
+  getAllAccessibilitySettingKeys = jasmine.createSpy('getAllAccessibilitySettingKeys').and.returnValue([]);
+
+  get = jasmine.createSpy('get').and.returnValue(of(null));
+
+  getAsNumber = jasmine.createSpy('getAsNumber').and.returnValue(of(0));
+
+  getAll = jasmine.createSpy('getAll').and.returnValue(of({}));
+
+  getAllSettingsFromCookie = jasmine.createSpy('getAllSettingsFromCookie').and.returnValue({});
+
+  getAllSettingsFromAuthenticatedUserMetadata = jasmine.createSpy('getAllSettingsFromAuthenticatedUserMetadata')
+    .and.returnValue(of({}));
+
+  set = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+
+  updateSettings = jasmine.createSpy('updateSettings').and.returnValue(of('cookie'));
+
+  setSettingsInAuthenticatedUserMetadata = jasmine.createSpy('setSettingsInAuthenticatedUserMetadata')
+    .and.returnValue(of(false));
+
+  setSettingsInMetadata = jasmine.createSpy('setSettingsInMetadata').and.returnValue(of(false));
+
+  setSettingsInCookie = jasmine.createSpy('setSettingsInCookie');
+
+  getInputType = jasmine.createSpy('getInputType').and.returnValue('text');
+
+  convertFormValuesToStoredValues = jasmine.createSpy('convertFormValuesToStoredValues').and.returnValue({});
+
+  convertStoredValuesToFormValues = jasmine.createSpy('convertStoredValuesToFormValues').and.returnValue({});
+
+  getDefaultValue = jasmine.createSpy('getPlaceholder').and.returnValue('placeholder');
+
+  isValid = jasmine.createSpy('isValid').and.returnValue(true);
+
+  formValuesValid = jasmine.createSpy('allValid').and.returnValue(true);
+}

src/app/accessibility/accessibility-settings.service.ts

@@ -0,0 +1,381 @@
+import {
+  Inject,
+  Injectable,
+  Optional,
+} from '@angular/core';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+  combineLatest,
+  Observable,
+  of,
+  switchMap,
+} from 'rxjs';
+import {
+  map,
+  take,
+} from 'rxjs/operators';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../config/app-config.interface';
+import { environment } from '../../environments/environment';
+import { AuthService } from '../core/auth/auth.service';
+import { EPersonDataService } from '../core/eperson/eperson-data.service';
+import { EPerson } from '../core/eperson/models/eperson.model';
+import { CookieService } from '../core/services/cookie.service';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { KlaroService } from '../shared/cookies/klaro.service';
+import {
+  hasNoValue,
+  hasValue,
+  isNotEmpty,
+} from '../shared/empty.util';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+
+/**
+ * Name of the cookie used to store the settings locally
+ */
+export const ACCESSIBILITY_COOKIE = 'dsAccessibilityCookie';
+
+/**
+ * Name of the metadata field to store settings on the ePerson
+ */
+export const ACCESSIBILITY_SETTINGS_METADATA_KEY = 'dspace.accessibility.settings';
+
+/**
+ * Array containing all possible accessibility settings.
+ * When adding new settings, make sure to add the new setting to the accessibility-settings component form.
+ * The converter methods to convert from stored format to form format (and vice-versa) need to be updated as well.
+ */
+export const accessibilitySettingKeys = ['notificationTimeOut', 'liveRegionTimeOut'] as const;
+
+/**
+ * Type representing the possible accessibility settings
+ */
+export type AccessibilitySetting = typeof accessibilitySettingKeys[number];
+
+/**
+ * Type representing an object that contains accessibility settings values for all accessibility settings.
+ */
+export type FullAccessibilitySettings = { [key in AccessibilitySetting]: string };
+
+/**
+ * Type representing an object that contains accessibility settings values for some accessibility settings.
+ */
+export type AccessibilitySettings = Partial<FullAccessibilitySettings>;
+
+/**
+ * The accessibility settings object format used by the accessibility-settings component form.
+ */
+export interface AccessibilitySettingsFormValues {
+  notificationTimeOutEnabled: boolean,
+  notificationTimeOut: string,
+  liveRegionTimeOut: string,
+}
+
+/**
+ * Service handling the retrieval and configuration of accessibility settings.
+ *
+ * This service stores the configured settings in either a cookie or on the user's metadata depending on whether
+ * the user is authenticated.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class AccessibilitySettingsService {
+
+  constructor(
+    protected cookieService: CookieService,
+    protected authService: AuthService,
+    protected ePersonService: EPersonDataService,
+    @Optional() protected klaroService: KlaroService,
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+  ) {
+  }
+
+  /**
+   * Get the stored value for the provided {@link AccessibilitySetting}. If the value does not exist or if it is empty,
+   * the provided defaultValue is emitted instead.
+   */
+  get(setting: AccessibilitySetting, defaultValue: string = null): Observable<string> {
+    return this.getAll().pipe(
+      map(settings => settings[setting]),
+      map(value => isNotEmpty(value) ? value : defaultValue),
+    );
+  }
+
+  /**
+   * Get the stored value for the provided {@link AccessibilitySetting} as a number. If the stored value
+   * could not be converted to a number, the value of the defaultValue parameter is emitted instead.
+   */
+  getAsNumber(setting: AccessibilitySetting, defaultValue: number = null): Observable<number> {
+    return this.get(setting).pipe(
+      map(value => hasValue(value) ? parseInt(value, 10) : NaN),
+      map(number => !isNaN(number) ? number : defaultValue),
+    );
+  }
+
+  /**
+   * Get all currently stored accessibility settings
+   */
+  getAll(): Observable<AccessibilitySettings> {
+    return this.getAllSettingsFromAuthenticatedUserMetadata().pipe(
+      map(value => isNotEmpty(value) ? value : this.getAllSettingsFromCookie()),
+      map(value => isNotEmpty(value) ? value : {}),
+    );
+  }
+
+  /**
+   * Get all settings from the accessibility settings cookie
+   */
+  getAllSettingsFromCookie(): AccessibilitySettings {
+    return this.cookieService.get(ACCESSIBILITY_COOKIE);
+  }
+
+  /**
+   * Attempts to retrieve all settings from the authenticated user's metadata.
+   * Returns an empty object when no user is authenticated.
+   */
+  getAllSettingsFromAuthenticatedUserMetadata(): Observable<AccessibilitySettings> {
+    return this.authService.getAuthenticatedUserFromStoreIfAuthenticated().pipe(
+      take(1),
+      map(user => hasValue(user) && hasValue(user.firstMetadataValue(ACCESSIBILITY_SETTINGS_METADATA_KEY)) ?
+        JSON.parse(user.firstMetadataValue(ACCESSIBILITY_SETTINGS_METADATA_KEY)) :
+        {},
+      ),
+    );
+  }
+
+  /**
+   * Set a single accessibility setting value, leaving all other settings unchanged.
+   * When setting all values, {@link AccessibilitySettingsService#setSettings} should be used.
+   * When updating multiple values, {@link AccessibilitySettingsService#updateSettings} should be used.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  set(setting: AccessibilitySetting, value: string): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.updateSettings({ [setting]: value });
+  }
+
+  /**
+   * Set all accessibility settings simultaneously.
+   * This method removes existing settings if they are missing from the provided {@link AccessibilitySettings} object.
+   * Removes all settings if the provided object is empty.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  setSettings(settings: AccessibilitySettings): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.setSettingsInAuthenticatedUserMetadata(settings).pipe(
+      take(1),
+      map(saveLocation => saveLocation === 'metadata'),
+      switchMap((savedInMetadata) =>
+        savedInMetadata ? ofMetadata() : this.setSettingsInCookie(settings),
+      ),
+    );
+  }
+
+  /**
+   * Update multiple accessibility settings simultaneously.
+   * This method does not change the settings that are missing from the provided {@link AccessibilitySettings} object.
+   *
+   * Returns 'cookie' when the changes were stored in the cookie.
+   * Returns 'metadata' when the changes were stored in metadata.
+   * Returns 'failed' when both options failed.
+   */
+  updateSettings(settings: AccessibilitySettings): Observable<'metadata' | 'cookie' | 'failed'> {
+    return this.getAll().pipe(
+      take(1),
+      map(currentSettings => Object.assign({}, currentSettings, settings)),
+      switchMap(newSettings => this.setSettings(newSettings)),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings on the currently authorized user's metadata.
+   * Emits false when no user is authenticated or when the metadata update failed.
+   * Emits 'metadata' when the metadata update succeeded, and 'failed' otherwise.
+   */
+  setSettingsInAuthenticatedUserMetadata(settings: AccessibilitySettings): Observable<'metadata' | 'failed'> {
+    return this.authService.getAuthenticatedUserFromStoreIfAuthenticated().pipe(
+      take(1),
+      switchMap(user => {
+        if (hasValue(user)) {
+          // EPerson has to be cloned, otherwise the EPerson's metadata can't be modified
+          const clonedUser = cloneDeep(user);
+          return this.setSettingsInMetadata(clonedUser, settings);
+        } else {
+          return ofFailed();
+        }
+      }),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings on the user's metadata.
+   * Emits false when the update failed, true when the update succeeded.
+   */
+  setSettingsInMetadata(
+    user: EPerson,
+    settings: AccessibilitySettings,
+  ): Observable<'metadata' | 'failed'> {
+    if (isNotEmpty(settings)) {
+      user.setMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY, null, JSON.stringify(settings));
+    } else {
+      user.removeMetadata(ACCESSIBILITY_SETTINGS_METADATA_KEY);
+    }
+
+    return this.ePersonService.createPatchFromCache(user).pipe(
+      take(1),
+      switchMap(operations =>
+        isNotEmpty(operations) ? this.ePersonService.patch(user, operations) : createSuccessfulRemoteDataObject$({})),
+      getFirstCompletedRemoteData(),
+      switchMap(rd => rd.hasSucceeded ? ofMetadata() : ofFailed()),
+    );
+  }
+
+  /**
+   * Attempts to set the provided settings in a cookie.
+   * Emits 'failed' when setting in a cookie failed due to the cookie not being accepted, 'cookie' when it succeeded.
+   */
+  setSettingsInCookie(settings: AccessibilitySettings): Observable<'cookie' | 'failed'> {
+    if (hasNoValue(this.klaroService)) {
+      return of('failed');
+    }
+
+    return this.klaroService.getSavedPreferences().pipe(
+      map(preferences => preferences.accessibility),
+      map((accessibilityCookieAccepted: boolean) => {
+        if (accessibilityCookieAccepted) {
+          if (isNotEmpty(settings)) {
+            this.cookieService.set(ACCESSIBILITY_COOKIE, settings, { expires: this.appConfig.accessibility.cookieExpirationDuration });
+          } else {
+            this.cookieService.remove(ACCESSIBILITY_COOKIE);
+          }
+
+          return 'cookie';
+        } else {
+          return 'failed';
+        }
+      }),
+    );
+  }
+
+  /**
+   * Clears all settings in the cookie and attempts to clear settings in metadata.
+   * Emits an array mentioning which settings succeeded or failed.
+   */
+  clearSettings(): Observable<['cookie' | 'failed', 'metadata' | 'failed']> {
+    return combineLatest([
+      this.setSettingsInCookie({}),
+      this.setSettingsInAuthenticatedUserMetadata({}),
+    ]);
+  }
+
+  /**
+   * Retrieve the default value to be used for the provided AccessibilitySetting.
+   * Returns an empty string when no default value is specified for the provided setting.
+   */
+  getDefaultValue(setting: AccessibilitySetting): string {
+    switch (setting) {
+      case 'notificationTimeOut':
+        return millisecondsToSeconds(environment.notifications.timeOut.toString());
+      case 'liveRegionTimeOut':
+        return millisecondsToSeconds(environment.liveRegion.messageTimeOutDurationMs.toString());
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Convert values in the provided accessibility settings object to values ready to be stored.
+   */
+  convertFormValuesToStoredValues(settings: AccessibilitySettingsFormValues): FullAccessibilitySettings {
+    const storedValues = {
+      notificationTimeOut: settings.notificationTimeOutEnabled ?
+        secondsToMilliseconds(settings.notificationTimeOut) : '0',
+      liveRegionTimeOut: secondsToMilliseconds(settings.liveRegionTimeOut),
+    };
+
+    // When the user enables the timeout but does not change the timeout duration from 0,
+    // it is removed from the values to be stored so the default value is used.
+    // Keeping it at 0 would mean the notifications are not automatically removed.
+    if (settings.notificationTimeOutEnabled && settings.notificationTimeOut === '0') {
+      delete storedValues.notificationTimeOut;
+    }
+
+    return storedValues;
+  }
+
+  /**
+   * Convert values in the provided accessibility settings object to values ready to show in the form.
+   */
+  convertStoredValuesToFormValues(settings: AccessibilitySettings): AccessibilitySettingsFormValues {
+    return {
+      notificationTimeOutEnabled: parseFloat(settings.notificationTimeOut) !== 0,
+      notificationTimeOut: millisecondsToSeconds(settings.notificationTimeOut),
+      liveRegionTimeOut: millisecondsToSeconds(settings.liveRegionTimeOut),
+    };
+  }
+
+  /**
+   * Returns true if the provided AccessibilitySetting is valid in regard to the provided formValues.
+   */
+  isValid(setting: AccessibilitySetting, formValues: AccessibilitySettingsFormValues): boolean {
+    switch (setting) {
+      case 'notificationTimeOut':
+        return formValues.notificationTimeOutEnabled ?
+          hasNoValue(formValues.notificationTimeOut) || parseFloat(formValues.notificationTimeOut) > 0 :
+          true;
+      case 'liveRegionTimeOut':
+        return hasNoValue(formValues.liveRegionTimeOut) || parseFloat(formValues.liveRegionTimeOut) > 0;
+      default:
+        throw new Error(`Unhandled accessibility setting during validity check: ${setting}`);
+    }
+  }
+
+  /**
+   * Returns true if all settings in the provided AccessibilitySettingsFormValues object are valid
+   */
+  formValuesValid(formValues: AccessibilitySettingsFormValues) {
+    return accessibilitySettingKeys.every(setting => this.isValid(setting, formValues));
+  }
+}
+
+/**
+ * Converts a string representing seconds to a string representing milliseconds
+ * Returns null if the input could not be parsed to a float
+ */
+function secondsToMilliseconds(secondsStr: string): string {
+  const seconds = parseFloat(secondsStr);
+  if (isNaN(seconds)) {
+    return null;
+  } else {
+    return (seconds * 1000).toString();
+  }
+}
+
+/**
+ * Converts a string representing milliseconds to a string representing seconds
+ * Returns null if the input could not be parsed to a float
+ */
+function millisecondsToSeconds(millisecondsStr: string): string {
+  const milliseconds = parseFloat(millisecondsStr);
+  if (isNaN(milliseconds)) {
+    return null;
+  } else {
+    return (milliseconds / 1000).toString();
+  }
+}
+
+function ofMetadata(): Observable<'metadata'> {
+  return of('metadata');
+}
+
+function ofFailed(): Observable<'failed'> {
+  return of('failed');
+}

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
+<div *ngIf="activeMetadataField$ | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
     <h2>{{messagePrefix + '.create' | translate}}</h2>

src/app/admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts

@@ -22,7 +22,7 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
-import { combineLatest } from 'rxjs';
+import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 import { MetadataField } from '../../../../core/metadata/metadata-field.model';
@@ -113,6 +113,8 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
    */
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
+  activeMetadataField$: Observable<MetadataField>;
+
   constructor(public registryService: RegistryService,
               private formBuilderService: FormBuilderService,
               private translateService: TranslateService) {
@@ -121,71 +123,66 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
   /**
    * Initialize the component, setting up the necessary Models for the dynamic form
    */
-  ngOnInit() {
-    combineLatest([
-      this.translateService.get(`${this.messagePrefix}.element`),
-      this.translateService.get(`${this.messagePrefix}.qualifier`),
-      this.translateService.get(`${this.messagePrefix}.scopenote`),
-    ]).subscribe(([element, qualifier, scopenote]) => {
-      this.element = new DynamicInputModel({
-        id: 'element',
-        label: element,
-        name: 'element',
-        validators: {
-          required: null,
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: true,
-        errorMessages: {
-          pattern: 'error.validation.metadata.element.invalid-pattern',
-          maxLength: 'error.validation.metadata.element.max-length',
-        },
-      });
-      this.qualifier = new DynamicInputModel({
-        id: 'qualifier',
-        label: qualifier,
-        name: 'qualifier',
-        validators: {
-          pattern: '^[^. ,]*$',
-          maxLength: 64,
-        },
-        required: false,
-        errorMessages: {
-          pattern: 'error.validation.metadata.qualifier.invalid-pattern',
-          maxLength: 'error.validation.metadata.qualifier.max-length',
-        },
-      });
-      this.scopeNote = new DynamicTextAreaModel({
-        id: 'scopeNote',
-        label: scopenote,
-        name: 'scopeNote',
-        required: false,
-        rows: 5,
-      });
-      this.formModel = [
-        new DynamicFormGroupModel(
-          {
-            id: 'metadatadatafieldgroup',
-            group:[this.element, this.qualifier, this.scopeNote],
-          }),
-      ];
-      this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
-      this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
-        if (field == null) {
-          this.clearFields();
-        } else {
-          this.formGroup.patchValue({
-            metadatadatafieldgroup: {
-              element: field.element,
-              qualifier: field.qualifier,
-              scopeNote: field.scopeNote,
-            },
-          });
-          this.element.disabled = true;
-          this.qualifier.disabled = true;
-        }
-      });
+  ngOnInit(): void {
+    this.activeMetadataField$ = this.registryService.getActiveMetadataField();
+    this.element = new DynamicInputModel({
+      id: 'element',
+      label: this.translateService.instant(`${this.messagePrefix}.element`),
+      name: 'element',
+      validators: {
+        required: null,
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: true,
+      errorMessages: {
+        pattern: 'error.validation.metadata.element.invalid-pattern',
+        maxLength: 'error.validation.metadata.element.max-length',
+      },
+    });
+    this.qualifier = new DynamicInputModel({
+      id: 'qualifier',
+      label: this.translateService.instant(`${this.messagePrefix}.qualifier`),
+      name: 'qualifier',
+      validators: {
+        pattern: '^[^. ,]*$',
+        maxLength: 64,
+      },
+      required: false,
+      errorMessages: {
+        pattern: 'error.validation.metadata.qualifier.invalid-pattern',
+        maxLength: 'error.validation.metadata.qualifier.max-length',
+      },
+    });
+    this.scopeNote = new DynamicTextAreaModel({
+      id: 'scopeNote',
+      label: this.translateService.instant(`${this.messagePrefix}.scopenote`),
+      name: 'scopeNote',
+      required: false,
+      rows: 5,
+    });
+    this.formModel = [
+      new DynamicFormGroupModel(
+        {
+          id: 'metadatadatafieldgroup',
+          group:[this.element, this.qualifier, this.scopeNote],
+        }),
+    ];
+    this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
+    this.registryService.getActiveMetadataField().subscribe((field: MetadataField): void => {
+      if (field == null) {
+        this.clearFields();
+      } else {
+        this.formGroup.patchValue({
+          metadatadatafieldgroup: {
+            element: field.element,
+            qualifier: field.qualifier,
+            scopeNote: field.scopeNote,
+          },
+        });
+        this.element.disabled = true;
+        this.qualifier.disabled = true;
+      }
     });
   }
 

src/app/admin/admin-routes.ts

@@ -11,8 +11,8 @@ import {
   REGISTRIES_MODULE_PATH,
   REPORTS_MODULE_PATH,
 } from './admin-routing-paths';
-import { AdminSearchPageComponent } from './admin-search-page/admin-search-page.component';
-import { AdminWorkflowPageComponent } from './admin-workflow-page/admin-workflow-page.component';
+import { ThemedAdminSearchPageComponent } from './admin-search-page/themed-admin-search-page.component';
+import { ThemedAdminWorkflowPageComponent } from './admin-workflow-page/themed-admin-workflow-page.component';
 
 export const ROUTES: Route[] = [
   {
@@ -28,13 +28,13 @@ export const ROUTES: Route[] = [
   {
     path: 'search',
     resolve: { breadcrumb: i18nBreadcrumbResolver },
-    component: AdminSearchPageComponent,
+    component: ThemedAdminSearchPageComponent,
     data: { title: 'admin.search.title', breadcrumbKey: 'admin.search' },
   },
   {
     path: 'workflow',
     resolve: { breadcrumb: i18nBreadcrumbResolver },
-    component: AdminWorkflowPageComponent,
+    component: ThemedAdminWorkflowPageComponent,
     data: { title: 'admin.workflow.title', breadcrumbKey: 'admin.workflow' },
   },
   {

src/app/admin/admin-search-page/admin-search-page.component.ts

@@ -4,7 +4,7 @@ import { Context } from '../../core/shared/context.model';
 import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
-  selector: 'ds-admin-search-page',
+  selector: 'ds-base-admin-search-page',
   templateUrl: './admin-search-page.component.html',
   styleUrls: ['./admin-search-page.component.scss'],
   standalone: true,

src/app/admin/admin-search-page/admin-search.module.ts

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+
+import { JournalEntitiesModule } from '../../entity-groups/journal-entities/journal-entities.module';
+import { ResearchEntitiesModule } from '../../entity-groups/research-entities/research-entities.module';
+import { SearchModule } from '../../shared/search/search.module';
+import { SharedModule } from '../../shared/shared.module';
+import { AdminSearchPageComponent } from './admin-search-page.component';
+import { CollectionAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component';
+import { CommunityAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component';
+import { ItemAdminSearchResultGridElementComponent } from './admin-search-results/admin-search-result-grid-element/item-search-result/item-admin-search-result-grid-element.component';
+import { CollectionAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component';
+import { CommunityAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component';
+import { ItemAdminSearchResultListElementComponent } from './admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component';
+import { ItemAdminSearchResultActionsComponent } from './admin-search-results/item-admin-search-result-actions.component';
+import { ThemedAdminSearchPageComponent } from './themed-admin-search-page.component';
+
+const ENTRY_COMPONENTS = [
+  // put only entry components that use custom decorator
+  ItemAdminSearchResultListElementComponent,
+  CommunityAdminSearchResultListElementComponent,
+  CollectionAdminSearchResultListElementComponent,
+  ItemAdminSearchResultGridElementComponent,
+  CommunityAdminSearchResultGridElementComponent,
+  CollectionAdminSearchResultGridElementComponent,
+  ItemAdminSearchResultActionsComponent,
+];
+
+@NgModule({
+  imports: [
+    SearchModule,
+    SharedModule.withEntryComponents(),
+    JournalEntitiesModule.withEntryComponents(),
+    ResearchEntitiesModule.withEntryComponents(),
+  ],
+  declarations: [
+    ThemedAdminSearchPageComponent,
+    AdminSearchPageComponent,
+    ...ENTRY_COMPONENTS,
+  ],
+})
+export class AdminSearchModule {
+  /**
+   * NOTE: this method allows to resolve issue with components that using a custom decorator
+   * which are not loaded during SSR otherwise
+   */
+  static withEntryComponents() {
+    return {
+      ngModule: SharedModule,
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
+    };
+  }
+}

src/app/admin/admin-search-page/themed-admin-search-page.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminSearchPageComponent } from './admin-search-page.component';
+
+/**
+ * Themed wrapper for {@link AdminSearchPageComponent}
+ */
+@Component({
+  selector: 'ds-admin-search-page',
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [AdminSearchPageComponent],
+})
+export class ThemedAdminSearchPageComponent extends ThemedComponent<AdminSearchPageComponent> {
+
+  protected getComponentName(): string {
+    return 'AdminSearchPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-search-page/admin-search-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-search-page.component');
+  }
+
+}

src/app/admin/admin-workflow-page/admin-workflow-page.component.ts

@@ -4,7 +4,7 @@ import { Context } from '../../core/shared/context.model';
 import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
-  selector: 'ds-admin-workflow-page',
+  selector: 'ds-base-admin-workflow-page',
   templateUrl: './admin-workflow-page.component.html',
   styleUrls: ['./admin-workflow-page.component.scss'],
   standalone: true,

src/app/admin/admin-workflow-page/admin-workflow.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+
+import { SearchModule } from '../../shared/search/search.module';
+import { SharedModule } from '../../shared/shared.module';
+import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
+import { WorkflowItemSearchResultAdminWorkflowGridElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component';
+import { WorkflowItemSearchResultAdminWorkflowListElementComponent } from './admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component';
+import { WorkflowItemAdminWorkflowActionsComponent } from './admin-workflow-search-results/workflow-item-admin-workflow-actions.component';
+import { ThemedAdminWorkflowPageComponent } from './themed-admin-workflow-page.component';
+
+const ENTRY_COMPONENTS = [
+  // put only entry components that use custom decorator
+  WorkflowItemSearchResultAdminWorkflowListElementComponent,
+  WorkflowItemSearchResultAdminWorkflowGridElementComponent,
+];
+
+@NgModule({
+  imports: [
+    SearchModule,
+    SharedModule.withEntryComponents(),
+  ],
+  declarations: [
+    ThemedAdminWorkflowPageComponent,
+    AdminWorkflowPageComponent,
+    WorkflowItemAdminWorkflowActionsComponent,
+    ...ENTRY_COMPONENTS,
+  ],
+  exports: [
+    AdminWorkflowPageComponent,
+  ],
+})
+export class AdminWorkflowModuleModule {
+  /**
+   * NOTE: this method allows to resolve issue with components that using a custom decorator
+   * which are not loaded during SSR otherwise
+   */
+  static withEntryComponents() {
+    return {
+      ngModule: SharedModule,
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
+    };
+  }
+}

src/app/admin/admin-workflow-page/themed-admin-workflow-page.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminWorkflowPageComponent } from './admin-workflow-page.component';
+
+/**
+ * Themed wrapper for {@link AdminWorkflowPageComponent}
+ */
+@Component({
+  selector: 'ds-admin-workflow-page',
+  templateUrl: '../../shared/theme-support/themed.component.html',
+  standalone: true,
+  imports: [AdminWorkflowPageComponent],
+})
+export class ThemedAdminWorkflowPageComponent extends ThemedComponent<AdminWorkflowPageComponent> {
+
+  protected getComponentName(): string {
+    return 'AdminWorkflowPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-workflow-page/admin-workflow-page.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-workflow-page.component');
+  }
+
+}

src/app/app-routes.ts

@@ -33,6 +33,7 @@ import { reloadGuard } from './core/reload/reload.guard';
 import { forgotPasswordCheckGuard } from './core/rest-property/forgot-password-check-guard.guard';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
+import { homePageResolver } from './home-page/home-page.resolver';
 import { ITEM_MODULE_PATH } from './item-page/item-page-routing-paths';
 import { menuResolver } from './menuResolver';
 import { provideSuggestionNotificationsState } from './notifications/provide-suggestion-notifications-state';
@@ -40,6 +41,7 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
 import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { PROCESS_MODULE_PATH } from './process-page/process-page-routing.paths';
+import { viewTrackerResolver } from './statistics/angulartics/dspace/view-tracker.resolver';
 import { provideSubmissionState } from './submission/provide-submission-state';
 import { SUGGESTION_MODULE_PATH } from './suggestions-page/suggestions-page-routing-paths';
 
@@ -63,9 +65,16 @@ export const APP_ROUTES: Route[] = [
         path: 'home',
         loadChildren: () => import('./home-page/home-page-routes')
           .then((m) => m.ROUTES),
-        data: { showBreadcrumbs: false },
+        data: {
+          showBreadcrumbs: false,
+          dsoPath: 'site',
+        },
         providers: [provideSuggestionNotificationsState()],
         canActivate: [endUserAgreementCurrentUserGuard],
+        resolve: {
+          site: homePageResolver,
+          tracking: viewTrackerResolver,
+        },
       },
       {
         path: 'community-list',

src/app/breadcrumbs/breadcrumbs.component.html

@@ -10,7 +10,7 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" role="link" tabindex="0">{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">

src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.html

@@ -18,6 +18,8 @@
   <a class="btn btn-primary"
      [routerLink]="['/search']"
      [queryParams]="queryParams"
-     [queryParamsHandling]="'merge'">
+     [queryParamsHandling]="'merge'"
+     role="link"
+     tabindex="0">
     {{ 'browse.taxonomy.button' | translate }}</a>
 </section>

src/app/collection-page/collection-page-routes.ts

@@ -11,6 +11,7 @@ import { ComcolSearchSectionComponent } from '../shared/comcol/sections/comcol-s
 import { dsoEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
+import { viewTrackerResolver } from '../statistics/angulartics/dspace/view-tracker.resolver';
 import { collectionPageResolver } from './collection-page.resolver';
 import { collectionPageAdministratorGuard } from './collection-page-administrator.guard';
 import {
@@ -84,6 +85,7 @@ export const ROUTES: Route[] = [
         component: ThemedCollectionPageComponent,
         resolve: {
           menu: dsoEditMenuResolver,
+          tracking: viewTrackerResolver,
         },
         children: [
           {
@@ -91,6 +93,15 @@ export const ROUTES: Route[] = [
             pathMatch: 'full',
             component: ComcolSearchSectionComponent,
           },
+          {
+            path: 'search',
+            pathMatch: 'full',
+            component: ComcolSearchSectionComponent,
+            resolve: {
+              breadcrumb: i18nBreadcrumbResolver,
+            },
+            data: { breadcrumbKey: 'collection.search' },
+          },
           {
             path: 'browse/:id',
             pathMatch: 'full',

src/app/collection-page/collection-page.component.html

@@ -3,7 +3,6 @@
        *ngVar="(collectionRD$ | async) as collectionRD">
     <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
       <div *ngIf="collectionRD?.payload as collection">
-        <ds-view-tracker [object]="collection"></ds-view-tracker>
         <div class="d-flex flex-row border-bottom mb-4 pb-4">
           <header class="comcol-header mr-auto">
             <!-- Collection Name -->

src/app/collection-page/collection-page.component.ts

@@ -50,7 +50,6 @@ import { ThemedLoadingComponent } from '../shared/loading/themed-loading.compone
 import { ObjectCollectionComponent } from '../shared/object-collection/object-collection.component';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 import { VarDirective } from '../shared/utils/var.directive';
-import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 
 @Component({
@@ -68,7 +67,6 @@ import { getCollectionPageRoute } from './collection-page-routing-paths';
     NgIf,
     ThemedLoadingComponent,
     TranslateModule,
-    ViewTrackerComponent,
     VarDirective,
     AsyncPipe,
     ComcolPageHeaderComponent,

src/app/community-list-page/community-list/community-list.component.html

@@ -9,7 +9,7 @@
       </span>
       <div class="align-middle my-auto">
         <button *ngIf="(dataSource.loading$ | async) !== true" (click)="getNextPage(node)"
-           class="btn btn-outline-primary btn-sm" role="button">
+           class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </button>
         <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-loading>
@@ -27,7 +27,12 @@
       <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
               [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
               (click)="toggleExpanded(node)"
-              data-test="expand-button">
+              data-test="expand-button"
+              (keyup.enter)="toggleExpanded(node)"
+              (keyup.space)="toggleExpanded(node)"
+              data-test="expand-button"
+              role="button"
+              tabindex="0">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
         <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
@@ -38,7 +43,7 @@
       </span>
       <div class="d-flex flex-row">
         <span class="d-flex align-middle my-auto">
-          <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
+          <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
           <span class="pr-2">&nbsp;</span>
           <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead my-auto">{{node.payload.archivedItemsCount}}</span>
         </span>
@@ -72,7 +77,7 @@
         <span class="fa fa-chevron-right"></span>
       </span>
       <h6 class="align-middle my-auto">
-        <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
+        <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
       </h6>
     </div>
     <ds-truncatable [id]="node.id">

src/app/community-page/community-page-routes.ts

@@ -10,6 +10,7 @@ import { ComcolSearchSectionComponent } from '../shared/comcol/sections/comcol-s
 import { dsoEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
+import { viewTrackerResolver } from '../statistics/angulartics/dspace/view-tracker.resolver';
 import { communityPageResolver } from './community-page.resolver';
 import { communityPageAdministratorGuard } from './community-page-administrator.guard';
 import {
@@ -71,6 +72,7 @@ export const ROUTES: Route[] = [
         component: ThemedCommunityPageComponent,
         resolve: {
           menu: dsoEditMenuResolver,
+          tracking: viewTrackerResolver,
         },
         children: [
           {
@@ -78,6 +80,15 @@ export const ROUTES: Route[] = [
             pathMatch: 'full',
             component: ComcolSearchSectionComponent,
           },
+          {
+            path: 'search',
+            pathMatch: 'full',
+            component: ComcolSearchSectionComponent,
+            resolve: {
+              breadcrumb: i18nBreadcrumbResolver,
+            },
+            data: { breadcrumbKey: 'community.search' },
+          },
           {
             path: 'subcoms-cols',
             pathMatch: 'full',

src/app/community-page/community-page.component.html

@@ -1,7 +1,6 @@
 <div class="container" *ngVar="(communityRD$ | async) as communityRD">
   <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
     <div *ngIf="communityRD?.payload; let communityPayload">
-      <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
       <div class="d-flex flex-row border-bottom mb-4 pb-4">
         <header class="comcol-header mr-auto">
           <!-- Community name -->

src/app/community-page/community-page.component.ts

@@ -41,7 +41,6 @@ import { hasValue } from '../shared/empty.util';
 import { ErrorComponent } from '../shared/error/error.component';
 import { ThemedLoadingComponent } from '../shared/loading/themed-loading.component';
 import { VarDirective } from '../shared/utils/var.directive';
-import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
 import { getCommunityPageRoute } from './community-page-routing-paths';
 import { ThemedCollectionPageSubCollectionListComponent } from './sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component';
 import { ThemedCommunityPageSubCommunityListComponent } from './sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component';
@@ -66,7 +65,6 @@ import { ThemedCommunityPageSubCommunityListComponent } from './sections/sub-com
     ComcolPageLogoComponent,
     ComcolPageHeaderComponent,
     AsyncPipe,
-    ViewTrackerComponent,
     VarDirective,
     RouterOutlet,
     RouterModule,

src/app/core/auth/auth.service.spec.ts

@@ -288,7 +288,7 @@ describe('AuthService test', () => {
           (state as any).core = Object.create({});
           (state as any).core.auth = authenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService(window, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
     }));
 
     it('should return true when user is logged in', () => {
@@ -373,7 +373,7 @@ describe('AuthService test', () => {
           (state as any).core = Object.create({});
           (state as any).core.auth = authenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService(window, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
       storage = (authService as any).storage;
       routeServiceMock = TestBed.inject(RouteService);
       routerStub = TestBed.inject(Router);
@@ -593,7 +593,7 @@ describe('AuthService test', () => {
           (state as any).core = Object.create({});
           (state as any).core.auth = unAuthenticatedState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService(window, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
     }));
 
     it('should return null for the shortlived token', () => {
@@ -633,7 +633,7 @@ describe('AuthService test', () => {
           (state as any).core = Object.create({});
           (state as any).core.auth = idleState;
         });
-      authService = new AuthService({}, window, undefined, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
+      authService = new AuthService(window, authReqService, mockEpersonDataService, router, routeService, cookieService, store, hardRedirectService, notificationsService, translateService);
     }));
 
     it('isUserIdle should return true when user is not idle', () => {

src/app/core/auth/auth.service.ts

@@ -2,7 +2,6 @@ import { HttpHeaders } from '@angular/common/http';
 import {
   Inject,
   Injectable,
-  Optional,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import {
@@ -24,10 +23,6 @@ import {
 } from 'rxjs/operators';
 
 import { environment } from '../../../environments/environment';
-import {
-  REQUEST,
-  RESPONSE,
-} from '../../../express.tokens';
 import { AppState } from '../../app.reducer';
 import {
   hasNoValue,
@@ -60,6 +55,7 @@ import {
 import {
   getAllSucceededRemoteDataPayload,
   getFirstCompletedRemoteData,
+  getFirstSucceededRemoteDataPayload,
 } from '../shared/operators';
 import { PageInfo } from '../shared/page-info.model';
 import {
@@ -111,18 +107,17 @@ export class AuthService {
    */
   private tokenRefreshTimer;
 
-  constructor(@Inject(REQUEST) protected req: any,
-              @Inject(NativeWindowService) protected _window: NativeWindowRef,
-              @Optional() @Inject(RESPONSE) private response: any,
-              protected authRequestService: AuthRequestService,
-              protected epersonService: EPersonDataService,
-              protected router: Router,
-              protected routeService: RouteService,
-              protected storage: CookieService,
-              protected store: Store<AppState>,
-              protected hardRedirectService: HardRedirectService,
-              private notificationService: NotificationsService,
-              private translateService: TranslateService,
+  constructor(
+    @Inject(NativeWindowService) protected _window: NativeWindowRef,
+    protected authRequestService: AuthRequestService,
+    protected epersonService: EPersonDataService,
+    protected router: Router,
+    protected routeService: RouteService,
+    protected storage: CookieService,
+    protected store: Store<AppState>,
+    protected hardRedirectService: HardRedirectService,
+    protected notificationService: NotificationsService,
+    protected translateService: TranslateService,
   ) {
     this.store.pipe(
       // when this service is constructed the store is not fully initialized yet
@@ -261,6 +256,23 @@ export class AuthService {
     );
   }
 
+  /**
+   * Returns an observable which emits the currently authenticated user from the store,
+   * or null if the user is not authenticated.
+   */
+  public getAuthenticatedUserFromStoreIfAuthenticated(): Observable<EPerson> {
+    return this.store.pipe(
+      select(getAuthenticatedUserId),
+      switchMap((id: string) => {
+        if (hasValue(id)) {
+          return this.epersonService.findById(id).pipe(getFirstSucceededRemoteDataPayload());
+        } else {
+          return observableOf(null);
+        }
+      }),
+    );
+  }
+
   /**
    * Checks if token is present into browser storage and is valid.
    */
@@ -504,10 +516,6 @@ export class AuthService {
     if (this._window.nativeWindow.location) {
       // Hard redirect to login page, so that all state is definitely lost
       this._window.nativeWindow.location.href = redirectUrl;
-    } else if (this.response) {
-      if (!this.response._headerSent) {
-        this.response.redirect(302, redirectUrl);
-      }
     } else {
       this.router.navigateByUrl(redirectUrl);
     }

src/app/core/auth/server-auth.service.ts

@@ -1,15 +1,40 @@
 import { HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import {
+  Inject,
+  Injectable,
+  Optional,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import {
+  REQUEST,
+  RESPONSE,
+} from '../../../express.tokens';
+import { AppState } from '../../app.reducer';
 import {
   hasValue,
   isNotEmpty,
 } from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { RemoteData } from '../data/remote-data';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
-import { AuthService } from './auth.service';
+import { EPersonDataService } from '../eperson/eperson-data.service';
+import { CookieService } from '../services/cookie.service';
+import { HardRedirectService } from '../services/hard-redirect.service';
+import { RouteService } from '../services/route.service';
+import {
+  NativeWindowRef,
+  NativeWindowService,
+} from '../services/window.service';
+import {
+  AuthService,
+  LOGIN_ROUTE,
+} from './auth.service';
+import { AuthRequestService } from './auth-request.service';
 import { AuthStatus } from './models/auth-status.model';
 import { AuthTokenInfo } from './models/auth-token-info.model';
 
@@ -19,6 +44,34 @@ import { AuthTokenInfo } from './models/auth-token-info.model';
 @Injectable()
 export class ServerAuthService extends AuthService {
 
+  constructor(
+    @Inject(REQUEST) protected req: any,
+    @Optional() @Inject(RESPONSE) private response: any,
+    @Inject(NativeWindowService) protected _window: NativeWindowRef,
+    protected authRequestService: AuthRequestService,
+    protected epersonService: EPersonDataService,
+    protected router: Router,
+    protected routeService: RouteService,
+    protected storage: CookieService,
+    protected store: Store<AppState>,
+    protected hardRedirectService: HardRedirectService,
+    protected notificationService: NotificationsService,
+    protected translateService: TranslateService,
+  ) {
+    super(
+      _window,
+      authRequestService,
+      epersonService,
+      router,
+      routeService,
+      storage,
+      store,
+      hardRedirectService,
+      notificationService,
+      translateService,
+    );
+  }
+
   /**
    * Returns the authenticated user
    * @returns {User}
@@ -62,4 +115,18 @@ export class ServerAuthService extends AuthService {
       map((rd: RemoteData<AuthStatus>) => Object.assign(new AuthStatus(), rd.payload)),
     );
   }
+
+  override redirectToLoginWhenTokenExpired() {
+    const redirectUrl = LOGIN_ROUTE + '?expired=true';
+    if (this._window.nativeWindow.location) {
+      // Hard redirect to login page, so that all state is definitely lost
+      this._window.nativeWindow.location.href = redirectUrl;
+    } else if (this.response) {
+      if (!this.response._headerSent) {
+        this.response.redirect(302, redirectUrl);
+      }
+    } else {
+      this.router.navigateByUrl(redirectUrl);
+    }
+  }
 }

src/app/core/data/bitstream-data.service.spec.ts

@@ -37,6 +37,8 @@ import {
 } from './request.models';
 import { RequestService } from './request.service';
 import objectContaining = jasmine.objectContaining;
+import { RestResponse } from '../cache/response.models';
+import { RequestEntry } from './request-entry.model';
 
 describe('BitstreamDataService', () => {
   let service: BitstreamDataService;
@@ -47,6 +49,7 @@ describe('BitstreamDataService', () => {
   let rdbService: RemoteDataBuildService;
   let bundleDataService: BundleDataService;
   const bitstreamFormatHref = 'rest-api/bitstreamformats';
+  let responseCacheEntry: RequestEntry;
 
   const bitstream1 = Object.assign(new Bitstream(), {
     id: 'fake-bitstream1',
@@ -71,8 +74,13 @@ describe('BitstreamDataService', () => {
   const url = 'fake-bitstream-url';
 
   beforeEach(() => {
+    responseCacheEntry = new RequestEntry();
+    responseCacheEntry.request = { href: 'https://rest.api/' } as any;
+    responseCacheEntry.response = new RestResponse(true, 200, 'Success');
+
     objectCache = jasmine.createSpyObj('objectCache', {
       remove: jasmine.createSpy('remove'),
+      getByHref: observableOf(responseCacheEntry),
     });
     requestService = getMockRequestService();
     halService = Object.assign(new HALEndpointServiceStub(url));

src/app/core/data/bitstream-data.service.ts

@@ -163,12 +163,25 @@ export class BitstreamDataService extends IdentifiableDataService<Bitstream> imp
       sendRequest(this.requestService),
       take(1),
     ).subscribe(() => {
-      this.requestService.removeByHrefSubstring(bitstream.self + '/format');
+      this.deleteFormatCache(bitstream);
     });
-
     return this.rdbService.buildFromRequestUUID(requestId);
   }
 
+  private deleteFormatCache(bitstream: Bitstream) {
+    const bitsreamFormatUrl = bitstream.self + '/format';
+    this.requestService.setStaleByHrefSubstring(bitsreamFormatUrl);
+    // Delete also cache by uuid as the format could be cached also there
+    this.objectCache.getByHref(bitsreamFormatUrl).pipe(take(1)).subscribe((cachedRequest) => {
+      if (cachedRequest.requestUUIDs && cachedRequest.requestUUIDs.length > 0){
+        const requestUuid = cachedRequest.requestUUIDs[0];
+        if (this.requestService.hasByUUID(requestUuid)) {
+          this.requestService.setStaleByUUID(requestUuid);
+        }
+      }
+    });
+  }
+
   /**
    * Returns an observable of {@link RemoteData} of a {@link Bitstream}, based on a handle and an
    * optional sequenceId or filename, with a list of {@link FollowLinkConfig}, to automatically

src/app/core/data/signposting-links.model.ts

@@ -4,5 +4,6 @@
 export interface SignpostingLink {
     href?: string,
     rel?: string,
-    type?: string
+    type?: string,
+    profile?: string
 }

src/app/core/data/version-history-data.service.ts

@@ -111,7 +111,7 @@ export class VersionHistoryDataService extends IdentifiableDataService<VersionHi
 
     this.halService.getEndpoint(this.versionsEndpoint).pipe(
       take(1),
-      map((endpointUrl: string) => (summary?.length > 0) ? `${endpointUrl}?summary=${summary}` : `${endpointUrl}`),
+      map((endpointUrl: string) => (summary?.length > 0) ? `${endpointUrl}?summary=${encodeURIComponent(summary)}` : `${endpointUrl}`),
       find((href: string) => hasValue(href)),
     ).subscribe((href) => {
       const request = new PostRequest(requestId, href, itemHref, requestOptions);

src/app/core/eperson/eperson-data.service.spec.ts

@@ -31,6 +31,7 @@ import {
 import {
   EPersonMock,
   EPersonMock2,
+  EPersonMockWithNoName,
 } from '../../shared/testing/eperson.mock';
 import { GroupMock } from '../../shared/testing/group-mock';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
@@ -280,6 +281,37 @@ describe('EPersonDataService', () => {
     });
   });
 
+  describe('updateEPerson with non existing metadata', () => {
+    beforeEach(() => {
+      spyOn(service, 'findByHref').and.returnValue(createSuccessfulRemoteDataObject$(EPersonMockWithNoName));
+    });
+    describe('add name that was not previously set', () => {
+      beforeEach(() => {
+        const changedEPerson = Object.assign(new EPerson(), {
+          id: EPersonMock.id,
+          metadata: Object.assign(EPersonMock.metadata, {
+            'eperson.firstname': [
+              {
+                language: null,
+                value: 'User',
+              },
+            ],
+          }),
+          email: EPersonMock.email,
+          canLogIn: EPersonMock.canLogIn,
+          requireCertificate: EPersonMock.requireCertificate,
+          _links: EPersonMock._links,
+        });
+        service.updateEPerson(changedEPerson).subscribe();
+      });
+      it('should send PatchRequest with add email operation', () => {
+        const operations = [{ op: 'add', path: '/eperson.firstname', value: [{ language: null, value: 'User' }] }];
+        const expected = new PatchRequest(requestService.generateRequestId(), epersonsEndpoint + '/' + EPersonMock.uuid, operations);
+        expect(requestService.send).toHaveBeenCalledWith(expected);
+      });
+    });
+  });
+
   describe('clearEPersonRequests', () => {
     beforeEach(() => {
       spyOn(halService, 'getEndpoint').and.callFake((linkPath: string) => {

src/app/core/eperson/eperson-data.service.ts

@@ -269,7 +269,8 @@ export class EPersonDataService extends IdentifiableDataService<EPerson> impleme
    * @param newEPerson
    */
   private generateOperations(oldEPerson: EPerson, newEPerson: EPerson): Operation[] {
-    let operations = this.comparator.diff(oldEPerson, newEPerson).filter((operation: Operation) => operation.op === 'replace');
+    let operations = this.comparator.diff(oldEPerson, newEPerson)
+      .filter((operation: Operation) => ['replace', 'add'].includes(operation.op));
     if (hasValue(oldEPerson.email) && oldEPerson.email !== newEPerson.email) {
       operations = [...operations, {
         op: 'replace', path: '/email', value: newEPerson.email,

src/app/core/metadata/head-tag.service.ts

@@ -186,6 +186,7 @@ export class HeadTagService {
     this.setCitationKeywordsTag();
 
     this.setCitationAbstractUrlTag();
+    this.setCitationDoiTag();
     this.setCitationPdfUrlTag();
     this.setCitationPublisherTag();
 
@@ -198,7 +199,6 @@ export class HeadTagService {
     // this.setCitationIssueTag();
     // this.setCitationFirstPageTag();
     // this.setCitationLastPageTag();
-    // this.setCitationDOITag();
     // this.setCitationPMIDTag();
 
     // this.setCitationFullTextTag();
@@ -319,6 +319,18 @@ export class HeadTagService {
     }
   }
 
+  /**
+   * Add <meta name="citation_doi" ... >  to the <head>
+   */
+  protected setCitationDoiTag(): void {
+    if (this.currentObject.value instanceof Item) {
+      const doi = this.getMetaTagValue('dc.identifier.doi');
+      if (hasValue(doi)) {
+        this.addMetaTag('citation_doi', doi);
+      }
+    }
+  }
+
   /**
    * Add <meta name="citation_pdf_url" ... >  to the <head>
    */

src/app/core/metadata/metadata.service.ts

@@ -27,7 +27,7 @@ export class MetadataService {
    * Returns undefined otherwise.
    */
   public virtualValue(metadataValue: MetadataValue | undefined): string {
-    if (this.isVirtual) {
+    if (this.isVirtual(metadataValue)) {
       return metadataValue.authority.substring(metadataValue.authority.indexOf(VIRTUAL_METADATA_PREFIX) + VIRTUAL_METADATA_PREFIX.length);
     } else {
       return undefined;

src/app/core/services/cookie.service.ts

@@ -1,15 +1,10 @@
-import {
-  Inject,
-  Injectable,
-} from '@angular/core';
+import { Injectable } from '@angular/core';
 import { CookieAttributes } from 'js-cookie';
 import {
   Observable,
   Subject,
 } from 'rxjs';
 
-import { REQUEST } from '../../../express.tokens';
-
 export interface ICookieService {
   readonly cookies$: Observable<{ readonly [key: string]: any }>;
 
@@ -27,9 +22,6 @@ export abstract class CookieService implements ICookieService {
   protected readonly cookieSource = new Subject<{ readonly [key: string]: any }>();
   public readonly cookies$ = this.cookieSource.asObservable();
 
-  constructor(@Inject(REQUEST) protected req: any) {
-  }
-
   public abstract set(name: string, value: any, options?: CookieAttributes): void;
 
   public abstract remove(name: string, options?: CookieAttributes): void;

src/app/core/services/server-cookie.service.ts

@@ -1,6 +1,10 @@
-import { Injectable } from '@angular/core';
+import {
+  Inject,
+  Injectable,
+} from '@angular/core';
 import { CookieAttributes } from 'js-cookie';
 
+import { REQUEST } from '../../../express.tokens';
 import {
   CookieService,
   ICookieService,
@@ -9,6 +13,10 @@ import {
 @Injectable()
 export class ServerCookieService extends CookieService implements ICookieService {
 
+  constructor(@Inject(REQUEST) protected req: any) {
+    super();
+  }
+
   public set(name: string, value: any, options?: CookieAttributes): void {
     return;
   }

src/app/core/shared/search/search-configuration.service.ts

@@ -183,7 +183,7 @@ export class SearchConfigurationService implements OnDestroy {
    */
   getCurrentQuery(defaultQuery: string) {
     return this.routeService.getQueryParameterValue('query').pipe(map((query) => {
-      return query || defaultQuery;
+      return query !== null ? query : defaultQuery; // Allow querying when the value is empty
     }));
   }
 

src/app/core/shared/search/search.service.spec.ts

@@ -1,34 +1,26 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import {
-  Router,
-  UrlTree,
-} from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterModule } from '@angular/router';
 import { Angulartics2 } from 'angulartics2';
-import {
-  combineLatest as observableCombineLatest,
-  Observable,
-  of as observableOf,
-} from 'rxjs';
-import { map } from 'rxjs/operators';
+import { of as observableOf } from 'rxjs';
+import { TestScheduler } from 'rxjs/testing';
 
+import { environment } from '../../../../environments/environment.test';
+import { getMockRemoteDataBuildService } from '../../../shared/mocks/remote-data-build.service.mock';
 import { getMockRequestService } from '../../../shared/mocks/request.service.mock';
-import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { FacetValues } from '../../../shared/search/models/facet-values.model';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { SearchFilterConfig } from '../../../shared/search/models/search-filter-config.model';
 import { SearchObjects } from '../../../shared/search/models/search-objects.model';
-import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+import { HALEndpointServiceStub } from '../../../shared/testing/hal-endpoint-service.stub';
 import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
 import { routeServiceStub } from '../../../shared/testing/route-service.stub';
-import { RouterStub } from '../../../shared/testing/router.stub';
+import { SearchConfigurationServiceStub } from '../../../shared/testing/search-configuration-service.stub';
 import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
-import { CommunityDataService } from '../../data/community-data.service';
 import { DSpaceObjectDataService } from '../../data/dspace-object-data.service';
 import { RemoteData } from '../../data/remote-data';
 import { RequestService } from '../../data/request.service';
-import { RequestEntry } from '../../data/request-entry.model';
+import { RequestEntryState } from '../../data/request-entry-state.model';
 import { PaginationService } from '../../pagination/pagination.service';
 import { RouteService } from '../../services/route.service';
 import { HALEndpointService } from '../hal-endpoint.service';
@@ -36,189 +28,314 @@ import { ViewMode } from '../view-mode.model';
 import { SearchService } from './search.service';
 import { SearchConfigurationService } from './search-configuration.service';
 import anything = jasmine.anything;
+import SpyObj = jasmine.SpyObj;
+import { Component } from '@angular/core';
 
 @Component({
   template: '',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 class DummyComponent {
 }
 
 describe('SearchService', () => {
-  describe('By default', () => {
-    let searchService: SearchService;
-    const router = new RouterStub();
-    const route = new ActivatedRouteStub();
-    const searchConfigService = { paginationID: 'page-id' };
-    beforeEach(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          CommonModule,
-          RouterTestingModule.withRoutes([
-            { path: 'search', component: DummyComponent, pathMatch: 'full' },
-          ]),
-          DummyComponent,
-        ],
-        providers: [
-          { provide: Router, useValue: router },
-          { provide: RouteService, useValue: routeServiceStub },
-          { provide: RequestService, useValue: getMockRequestService() },
-          { provide: RemoteDataBuildService, useValue: {} },
-          { provide: HALEndpointService, useValue: {} },
-          { provide: CommunityDataService, useValue: {} },
-          { provide: DSpaceObjectDataService, useValue: {} },
-          { provide: PaginationService, useValue: {} },
-          { provide: SearchConfigurationService, useValue: searchConfigService },
-          { provide: Angulartics2, useValue: {} },
-          SearchService,
-        ],
-      });
-      searchService = TestBed.inject(SearchService);
-    });
+  let service: SearchService;
 
-    it('should return list view mode', () => {
-      searchService.getViewMode().subscribe((viewMode) => {
-        expect(viewMode).toBe(ViewMode.ListElement);
-      });
+  let halService: HALEndpointServiceStub;
+  let paginationService: PaginationServiceStub;
+  let remoteDataBuildService: RemoteDataBuildService;
+  let requestService: SpyObj<RequestService>;
+  let routeService: RouteService;
+  let searchConfigService: SearchConfigurationServiceStub;
+
+  let testScheduler: TestScheduler;
+  let msToLive: number;
+  let remoteDataTimestamp: number;
+
+  beforeEach(() => {
+    halService = new HALEndpointServiceStub(environment.rest.baseUrl);
+    paginationService = new PaginationServiceStub();
+    remoteDataBuildService = getMockRemoteDataBuildService();
+    requestService = getMockRequestService();
+    searchConfigService = new SearchConfigurationServiceStub();
+
+    initTestData();
+
+    TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        RouterModule.forRoot([]),
+      ],
+      providers: [
+        { provide: RouteService, useValue: routeServiceStub },
+        { provide: RequestService, useValue: requestService },
+        { provide: RemoteDataBuildService, useValue: remoteDataBuildService },
+        { provide: HALEndpointService, useValue: halService },
+        { provide: DSpaceObjectDataService, useValue: {} },
+        { provide: PaginationService, useValue: paginationService },
+        { provide: SearchConfigurationService, useValue: searchConfigService },
+        { provide: Angulartics2, useValue: {} },
+        SearchService,
+      ],
     });
+    service = TestBed.inject(SearchService);
+    routeService = TestBed.inject(RouteService);
   });
-  describe('', () => {
-    let searchService: SearchService;
-    const router = new RouterStub();
-    let routeService;
 
-    const halService = {
-      /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-      getEndpoint: () => {
-      },
-      /* eslint-enable no-empty,@typescript-eslint/no-empty-function */
-
-    };
-
-    const remoteDataBuildService = {
-      toRemoteDataObservable: (requestEntryObs: Observable<RequestEntry>, payloadObs: Observable<any>) => {
-        return observableCombineLatest([requestEntryObs, payloadObs]).pipe(
-          map(([req, pay]) => {
-            return { req, pay };
-          }),
-        );
-      },
-      aggregate: (input: Observable<RemoteData<any>>[]): Observable<RemoteData<any[]>> => {
-        return createSuccessfulRemoteDataObject$([]);
-      },
-      buildFromHref: (href: string): Observable<RemoteData<any>> => {
-        return createSuccessfulRemoteDataObject$(Object.assign(new SearchObjects(), {
-          page: [],
-        }));
-      },
-    };
-
-    const paginationService = new PaginationServiceStub();
-    const searchConfigService = { paginationID: 'page-id' };
-    const requestService = getMockRequestService();
-
-    beforeEach(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          CommonModule,
-          RouterTestingModule.withRoutes([
-            { path: 'search', component: DummyComponent, pathMatch: 'full' },
-          ]),
-          DummyComponent,
-        ],
-        providers: [
-          { provide: Router, useValue: router },
-          { provide: RouteService, useValue: routeServiceStub },
-          { provide: RequestService, useValue: requestService },
-          { provide: RemoteDataBuildService, useValue: remoteDataBuildService },
-          { provide: HALEndpointService, useValue: halService },
-          { provide: CommunityDataService, useValue: {} },
-          { provide: DSpaceObjectDataService, useValue: {} },
-          { provide: PaginationService, useValue: paginationService },
-          { provide: SearchConfigurationService, useValue: searchConfigService },
-          { provide: Angulartics2, useValue: {} },
-          SearchService,
-        ],
-      });
-      searchService = TestBed.inject(SearchService);
-      routeService = TestBed.inject(RouteService);
-      const urlTree = Object.assign(new UrlTree(), { root: { children: { primary: 'search' } } });
-      router.parseUrl.and.returnValue(urlTree);
+  function initTestData(): void {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
     });
 
+    msToLive = 15 * 60 * 1000;
+    // The response's lastUpdated equals the time of 60 seconds after the test started, ensuring they are not perceived
+    // as cached values.
+    remoteDataTimestamp = new Date().getTime() + 60 * 1000;
+  }
+
+  describe('setViewMode', () => {
     it('should call the navigate method on the Router with view mode list parameter as a parameter when setViewMode is called', () => {
-      searchService.setViewMode(ViewMode.ListElement);
-      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('page-id', ['/search'], { page: 1 }, { view: ViewMode.ListElement },
-      );
+      service.setViewMode(ViewMode.ListElement);
+
+      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('test-id', ['/search'], { page: 1 }, { view: ViewMode.ListElement });
     });
 
     it('should call the navigate method on the Router with view mode grid parameter as a parameter when setViewMode is called', () => {
-      searchService.setViewMode(ViewMode.GridElement);
-      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('page-id', ['/search'], { page: 1 }, { view: ViewMode.GridElement },
-      );
+      service.setViewMode(ViewMode.GridElement);
+
+      expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('test-id', ['/search'], { page: 1 }, { view: ViewMode.GridElement });
+    });
+  });
+
+  describe('getViewMode', () => {
+    it('should return list view mode', () => {
+      testScheduler.run(({ expectObservable }) => {
+        expectObservable(service.getViewMode()).toBe('(a|)', {
+          a: ViewMode.ListElement,
+        });
+      });
     });
 
     it('should return ViewMode.List when the viewMode is set to ViewMode.List in the ActivatedRoute', () => {
-      let viewMode = ViewMode.GridElement;
-      spyOn(routeService, 'getQueryParamMap').and.returnValue(observableOf(new Map([
-        ['view', ViewMode.ListElement],
-      ])));
+      testScheduler.run(({ expectObservable }) => {
+        spyOn(routeService, 'getQueryParamMap').and.returnValue(observableOf(new Map([
+          ['view', ViewMode.ListElement],
+        ])));
 
-      searchService.getViewMode().subscribe((mode) => viewMode = mode);
-      expect(viewMode).toEqual(ViewMode.ListElement);
+        expectObservable(service.getViewMode()).toBe('(a|)', {
+          a: ViewMode.ListElement,
+        });
+      });
     });
 
     it('should return ViewMode.Grid when the viewMode is set to ViewMode.Grid in the ActivatedRoute', () => {
-      let viewMode = ViewMode.ListElement;
-      spyOn(routeService, 'getQueryParamMap').and.returnValue(observableOf(new Map([
-        ['view', ViewMode.GridElement],
-      ])));
-      searchService.getViewMode().subscribe((mode) => viewMode = mode);
-      expect(viewMode).toEqual(ViewMode.GridElement);
-    });
+      testScheduler.run(({ expectObservable }) => {
+        spyOn(routeService, 'getQueryParamMap').and.returnValue(observableOf(new Map([
+          ['view', ViewMode.GridElement],
+        ])));
 
-    describe('when search is called', () => {
-      const endPoint = 'http://endpoint.com/test/test';
-      const searchOptions = new PaginatedSearchOptions({});
-      beforeEach(() => {
-        spyOn((searchService as any).halService, 'getEndpoint').and.returnValue(observableOf(endPoint));
-        spyOn((searchService as any).rdb, 'buildFromHref').and.callThrough();
-        /* eslint-disable no-empty,@typescript-eslint/no-empty-function */
-        searchService.search(searchOptions).subscribe((t) => {
-        }); // subscribe to make sure all methods are called
-        /* eslint-enable no-empty,@typescript-eslint/no-empty-function */
-      });
-
-      it('should call getEndpoint on the halService', () => {
-        expect((searchService as any).halService.getEndpoint).toHaveBeenCalled();
-      });
-
-      it('should send out the request on the request service', () => {
-        expect((searchService as any).requestService.send).toHaveBeenCalled();
-      });
-
-      it('should call getByHref on the request service with the correct request url', () => {
-        expect((searchService as any).rdb.buildFromHref).toHaveBeenCalledWith(endPoint);
-      });
-    });
-
-    describe('when getFacetValuesFor is called with a filterQuery', () => {
-      it('should add the encoded filterQuery to the args list', () => {
-        jasmine.getEnv().allowRespy(true);
-        const spyRequest = spyOn((searchService as any), 'request').and.stub();
-        spyOn(requestService, 'send').and.returnValue(true);
-        const searchFilterConfig = new SearchFilterConfig();
-        searchFilterConfig._links = {
-          self: {
-            href: 'https://demo.dspace.org/',
-          },
-        };
-
-        searchService.getFacetValuesFor(searchFilterConfig, 1, undefined, 'filter&Query');
-
-        expect(spyRequest).toHaveBeenCalledWith(anything(), 'https://demo.dspace.org?page=0&size=5&prefix=filter%26Query');
+        expectObservable(service.getViewMode()).toBe('(a|)', {
+          a: ViewMode.GridElement,
+        });
       });
     });
   });
+
+  describe('search', () => {
+    let remoteDataMocks: Record<string, RemoteData<SearchObjects<any>>>;
+
+    beforeEach(() => {
+      remoteDataMocks = {
+        RequestPending: new RemoteData(undefined, msToLive, remoteDataTimestamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
+        ResponsePending: new RemoteData(undefined, msToLive, remoteDataTimestamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+        Success: new RemoteData(remoteDataTimestamp, msToLive, remoteDataTimestamp, RequestEntryState.Success, undefined, new SearchObjects(), 200),
+        SuccessStale: new RemoteData(remoteDataTimestamp, msToLive, remoteDataTimestamp, RequestEntryState.SuccessStale, undefined, new SearchObjects(), 200),
+      };
+    });
+
+    describe('when useCachedVersionIfAvailable is true', () => {
+      it(`should emit a cached completed RemoteData immediately, and keep emitting if it gets re-requested`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b-c-d-e';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.search(undefined, msToLive, true)).toBe(expected, values);
+        });
+      });
+    });
+
+    describe('when useCachedVersionIfAvailable is false', () => {
+      it('should not emit a cached completed RemoteData', () => {
+        // Old cached value from 1 minute before the test started
+        const oldCachedSucceededData: RemoteData<SearchObjects<any>> = Object.assign(new SearchObjects(), remoteDataMocks.Success, {
+          timeCompleted: remoteDataTimestamp - 2 * 60 * 1000,
+          lastUpdated: remoteDataTimestamp - 2 * 60 * 1000,
+        });
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b-c-d-e', {
+            a: oldCachedSucceededData,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.search(undefined, msToLive, false)).toBe(expected, values);
+        });
+      });
+
+      it('should emit the first completed RemoteData since the request was made', () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.SuccessStale,
+          };
+          expectObservable(service.search(undefined, msToLive, false)).toBe(expected, values);
+        });
+      });
+    });
+
+    it('should call getEndpoint on the halService', () => {
+      spyOn(halService, 'getEndpoint').and.callThrough();
+
+      service.search(new PaginatedSearchOptions({})).subscribe();
+
+      expect(halService.getEndpoint).toHaveBeenCalled();
+    });
+
+    it('should send out the request on the request service', () => {
+      service.search(new PaginatedSearchOptions({})).subscribe();
+
+      expect(requestService.send).toHaveBeenCalled();
+    });
+
+    it('should call getByHref on the request service with the correct request url', () => {
+      spyOn(remoteDataBuildService, 'buildFromHref').and.callThrough();
+
+      service.search(new PaginatedSearchOptions({})).subscribe();
+
+      expect(remoteDataBuildService.buildFromHref).toHaveBeenCalledWith(environment.rest.baseUrl + '/discover/search/objects');
+    });
+  });
+
+  describe('getFacetValuesFor', () => {
+    let remoteDataMocks: Record<string, RemoteData<FacetValues>>;
+    let filterConfig: SearchFilterConfig;
+
+    beforeEach(() => {
+      remoteDataMocks = {
+        RequestPending: new RemoteData(undefined, msToLive, remoteDataTimestamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
+        ResponsePending: new RemoteData(undefined, msToLive, remoteDataTimestamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+        Success: new RemoteData(remoteDataTimestamp, msToLive, remoteDataTimestamp, RequestEntryState.Success, undefined, new FacetValues(), 200),
+        SuccessStale: new RemoteData(remoteDataTimestamp, msToLive, remoteDataTimestamp, RequestEntryState.SuccessStale, undefined, new FacetValues(), 200),
+      };
+      filterConfig = new SearchFilterConfig();
+      filterConfig._links = {
+        self: {
+          href: environment.rest.baseUrl,
+        },
+      };
+    });
+
+    describe('when useCachedVersionIfAvailable is true', () => {
+      it(`should emit a cached completed RemoteData immediately, and keep emitting if it gets re-requested`, () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b-c-d-e', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b-c-d-e';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.getFacetValuesFor(filterConfig, 1, undefined, undefined, true)).toBe(expected, values);
+        });
+      });
+    });
+
+    describe('when useCachedVersionIfAvailable is false', () => {
+      it('should not emit a cached completed RemoteData', () => {
+        // Old cached value from 1 minute before the test started
+        const oldCachedSucceededData: RemoteData<FacetValues> = Object.assign(new FacetValues(), remoteDataMocks.Success, {
+          timeCompleted: remoteDataTimestamp - 2 * 60 * 1000,
+          lastUpdated: remoteDataTimestamp - 2 * 60 * 1000,
+        });
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b-c-d-e', {
+            a: oldCachedSucceededData,
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          }));
+          const expected = '--b-c-d-e';
+          const values = {
+            b: remoteDataMocks.RequestPending,
+            c: remoteDataMocks.ResponsePending,
+            d: remoteDataMocks.Success,
+            e: remoteDataMocks.SuccessStale,
+          };
+
+          expectObservable(service.getFacetValuesFor(filterConfig, 1, undefined, undefined, false)).toBe(expected, values);
+        });
+      });
+
+      it('should emit the first completed RemoteData since the request was made', () => {
+        testScheduler.run(({ cold, expectObservable }) => {
+          spyOn(remoteDataBuildService, 'buildFromHref').and.returnValue(cold('a-b', {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.SuccessStale,
+          }));
+          const expected = 'a-b';
+          const values = {
+            a: remoteDataMocks.Success,
+            b: remoteDataMocks.SuccessStale,
+          };
+          expectObservable(service.getFacetValuesFor(filterConfig, 1, undefined, undefined, false)).toBe(expected, values);
+        });
+      });
+    });
+
+    it('should encode the filterQuery', () => {
+      spyOn((service as any), 'request').and.callThrough();
+
+      service.getFacetValuesFor(filterConfig, 1, undefined, 'filter&Query');
+
+      expect((service as any).request).toHaveBeenCalledWith(anything(), environment.rest.baseUrl + '?page=0&size=5&prefix=filter%26Query');
+    });
+  });
 });

src/app/core/shared/search/search.service.ts

@@ -9,6 +9,7 @@ import {
 import {
   distinctUntilChanged,
   map,
+  skipWhile,
   switchMap,
   take,
   tap,
@@ -168,6 +169,7 @@ export class SearchService {
   search<T extends DSpaceObject>(searchOptions?: PaginatedSearchOptions, responseMsToLive?: number, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<T>[]): Observable<RemoteData<SearchObjects<T>>> {
     const href$ = this.getEndpoint(searchOptions);
 
+    let startTime: number;
     href$.pipe(
       take(1),
       map((href: string) => {
@@ -191,6 +193,7 @@ export class SearchService {
         searchOptions: searchOptions,
       });
 
+      startTime = new Date().getTime();
       this.requestService.send(request, useCachedVersionIfAvailable);
     });
 
@@ -198,7 +201,13 @@ export class SearchService {
       switchMap((href: string) => this.rdb.buildFromHref<SearchObjects<T>>(href)),
     );
 
-    return this.directlyAttachIndexableObjects(sqr$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+    return this.directlyAttachIndexableObjects(sqr$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
+      // This skip ensures that if a stale object is present in the cache when you do a
+      // call it isn't immediately returned, but we wait until the remote data for the new request
+      // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
+      // cached completed object
+      skipWhile((rd: RemoteData<SearchObjects<T>>) => rd.isStale || (!useCachedVersionIfAvailable && rd.lastUpdated < startTime)),
+    );
   }
 
   /**
@@ -304,9 +313,15 @@ export class SearchService {
         return FacetValueResponseParsingService;
       },
     });
+    const startTime = new Date().getTime();
     this.requestService.send(request, useCachedVersionIfAvailable);
 
     return this.rdb.buildFromHref(href).pipe(
+      // This skip ensures that if a stale object is present in the cache when you do a
+      // call it isn't immediately returned, but we wait until the remote data for the new request
+      // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
+      // cached completed object
+      skipWhile((rd: RemoteData<FacetValues>) => rd.isStale || (!useCachedVersionIfAvailable && rd.lastUpdated < startTime)),
       tap((facetValuesRD: RemoteData<FacetValues>) => {
         if (facetValuesRD.hasSucceeded) {
           const appliedFilters: AppliedFilter[] = (facetValuesRD.payload.appliedFilters ?? [])

src/app/core/submission/submission-rest.service.spec.ts

@@ -1,4 +1,5 @@
 import { getTestScheduler } from 'jasmine-marbles';
+import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { FormFieldMetadataValueObject } from '../../shared/form/builder/models/form-field-metadata-value.model';
@@ -13,6 +14,7 @@ import {
   SubmissionRequest,
 } from '../data/request.models';
 import { RequestService } from '../data/request.service';
+import { RequestEntry } from '../data/request-entry.model';
 import { SubmissionRestService } from './submission-rest.service';
 
 describe('SubmissionRestService test suite', () => {
@@ -38,7 +40,9 @@ describe('SubmissionRestService test suite', () => {
   }
 
   beforeEach(() => {
-    requestService = getMockRequestService();
+    requestService = getMockRequestService(of(Object.assign(new RequestEntry(), {
+      request: new SubmissionRequest('mock-request-uuid', 'mock-request-href'),
+    })));
     rdbService = getMockRemoteDataBuildService();
     scheduler = getTestScheduler();
     halService = new HALEndpointServiceStub(resourceEndpointURL);
@@ -62,7 +66,7 @@ describe('SubmissionRestService test suite', () => {
       scheduler.schedule(() => service.getDataById(resourceEndpoint, resourceScope).subscribe());
       scheduler.flush();
 
-      expect(requestService.send).toHaveBeenCalledWith(expected);
+      expect(requestService.send).toHaveBeenCalledWith(expected, false);
     });
   });
 

src/app/core/submission/submission-rest.service.ts

@@ -1,19 +1,23 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import {
+  Observable,
+  skipWhile,
+} from 'rxjs';
 import {
   distinctUntilChanged,
   filter,
   map,
   mergeMap,
+  switchMap,
   tap,
 } from 'rxjs/operators';
 
 import {
   hasValue,
+  hasValueOperator,
   isNotEmpty,
 } from '../../shared/empty.util';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { ErrorResponse } from '../cache/response.models';
 import { RemoteData } from '../data/remote-data';
 import {
   DeleteRequest,
@@ -24,8 +28,6 @@ import {
   SubmissionRequest,
 } from '../data/request.models';
 import { RequestService } from '../data/request.service';
-import { RequestError } from '../data/request-error.model';
-import { RestRequest } from '../data/rest-request.model';
 import { HttpOptions } from '../dspace-rest/dspace-rest.service';
 import { HALEndpointService } from '../shared/hal-endpoint.service';
 import { getFirstCompletedRemoteData } from '../shared/operators';
@@ -33,6 +35,23 @@ import { SubmitDataResponseDefinitionObject } from '../shared/submit-data-respon
 import { URLCombiner } from '../url-combiner/url-combiner';
 import { SubmissionResponse } from './submission-response.model';
 
+/**
+ * Retrieve the first emitting payload's dataDefinition, or throw an error if the request failed
+ */
+export const getFirstDataDefinition = () =>
+  (source: Observable<RemoteData<SubmissionResponse>>): Observable<SubmitDataResponseDefinitionObject> =>
+    source.pipe(
+      getFirstCompletedRemoteData(),
+      map((response: RemoteData<SubmissionResponse>) => {
+        if (response.hasFailed) {
+          throw new Error(response.errorMessage);
+        } else {
+          return hasValue(response?.payload?.dataDefinition) ? response.payload.dataDefinition : [response.payload];
+        }
+      }),
+      distinctUntilChanged(),
+    );
+
 /**
  * The service handling all submission REST requests
  */
@@ -56,15 +75,7 @@ export class SubmissionRestService {
    */
   protected fetchRequest(requestId: string): Observable<SubmitDataResponseDefinitionObject> {
     return this.rdbService.buildFromRequestUUID<SubmissionResponse>(requestId).pipe(
-      getFirstCompletedRemoteData(),
-      map((response: RemoteData<SubmissionResponse>) => {
-        if (response.hasFailed) {
-          throw new ErrorResponse({ statusText: response.errorMessage, statusCode: response.statusCode } as RequestError);
-        } else {
-          return hasValue(response.payload) ? response.payload.dataDefinition : response.payload;
-        }
-      }),
-      distinctUntilChanged(),
+      getFirstDataDefinition(),
     );
   }
 
@@ -116,21 +127,52 @@ export class SubmissionRestService {
    *    The endpoint link name
    * @param id
    *    The submission Object to retrieve
+   * @param useCachedVersionIfAvailable
+   *    If this is true, the request will only be sent if there's no valid & cached version. Defaults to false
    * @return Observable<SubmitDataResponseDefinitionObject>
    *     server response
    */
-  public getDataById(linkName: string, id: string): Observable<SubmitDataResponseDefinitionObject> {
-    const requestId = this.requestService.generateRequestId();
+  public getDataById(linkName: string, id: string, useCachedVersionIfAvailable = false): Observable<SubmitDataResponseDefinitionObject> {
     return this.halService.getEndpoint(linkName).pipe(
       map((endpointURL: string) => this.getEndpointByIDHref(endpointURL, id)),
       filter((href: string) => isNotEmpty(href)),
       distinctUntilChanged(),
-      map((endpointURL: string) => new SubmissionRequest(requestId, endpointURL)),
-      tap((request: RestRequest) => {
-        this.requestService.send(request);
+      mergeMap((endpointURL: string) => {
+        this.sendGetDataRequest(endpointURL, useCachedVersionIfAvailable);
+        const startTime: number = new Date().getTime();
+        return this.requestService.getByHref(endpointURL).pipe(
+          map((requestEntry) => requestEntry?.request?.uuid),
+          hasValueOperator(),
+          distinctUntilChanged(),
+          switchMap((requestId) => this.rdbService.buildFromRequestUUID<SubmissionResponse>(requestId)),
+          // This skip ensures that if a stale object is present in the cache when you do a
+          // call it isn't immediately returned, but we wait until the remote data for the new request
+          // is created. If useCachedVersionIfAvailable is false it also ensures you don't get a
+          // cached completed object
+          skipWhile((rd: RemoteData<SubmissionResponse>) => rd.isStale || (!useCachedVersionIfAvailable && rd.lastUpdated < startTime)),
+          tap((rd: RemoteData<SubmissionResponse>) => {
+            if (hasValue(rd) && rd.isStale) {
+              this.sendGetDataRequest(endpointURL, useCachedVersionIfAvailable);
+            }
+          }),
+        );
       }),
-      mergeMap(() => this.fetchRequest(requestId)),
-      distinctUntilChanged());
+      getFirstDataDefinition(),
+    );
+  }
+
+  /**
+   * Send a GET SubmissionRequest
+   *
+   * @param href
+   *    Endpoint URL of the submission data
+   * @param useCachedVersionIfAvailable
+   *    If this is true, the request will only be sent if there's no valid & cached version. Defaults to false
+   */
+  private sendGetDataRequest(href: string, useCachedVersionIfAvailable = false) {
+    const requestId = this.requestService.generateRequestId();
+    const request = new SubmissionRequest(requestId, href);
+    this.requestService.send(request, useCachedVersionIfAvailable);
   }
 
   /**

src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.spec.ts

@@ -116,6 +116,14 @@ describe('MetadataFieldSelectorComponent', () => {
       });
     });
 
+    it('should sort the fields by name to ensure the one without a qualifier is first', () => {
+      component.mdField = 'dc.relation';
+
+      component.validate();
+
+      expect(registryService.queryMetadataFields).toHaveBeenCalledWith('dc.relation', { elementsPerPage: 10, sort: new SortOptions('fieldName', SortDirection.ASC) }, true, false, followLink('schema'));
+    });
+
     describe('when querying the metadata fields returns an error response', () => {
       beforeEach(() => {
         (registryService.queryMetadataFields as jasmine.Spy).and.returnValue(createFailedRemoteDataObject$('Failed'));

src/app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.ts

@@ -45,6 +45,7 @@ import {
   SortDirection,
   SortOptions,
 } from '../../../core/cache/models/sort-options.model';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { RegistryService } from '../../../core/registry/registry.service';
 import {
   getAllSucceededRemoteData,
@@ -129,6 +130,11 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV
    */
   showInvalid = false;
 
+  searchOptions: FindListOptions = {
+    elementsPerPage: 10,
+    sort: new SortOptions('fieldName', SortDirection.ASC),
+  };
+
   /**
    * Subscriptions to unsubscribe from on destroy
    */
@@ -211,7 +217,7 @@ export class MetadataFieldSelectorComponent implements OnInit, OnDestroy, AfterV
    * Upon subscribing to the returned observable, the showInvalid flag is updated accordingly to show the feedback under the input
    */
   validate(): Observable<boolean> {
-    return this.registryService.queryMetadataFields(this.mdField, null, true, false, followLink('schema')).pipe(
+    return this.registryService.queryMetadataFields(this.mdField, this.searchOptions, true, false, followLink('schema')).pipe(
       getFirstCompletedRemoteData(),
       switchMap((rd) => {
         if (rd.hasSucceeded) {

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -37,7 +37,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -37,7 +37,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -41,7 +41,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -17,7 +17,7 @@
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -17,7 +17,7 @@
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -15,7 +15,7 @@
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -51,7 +51,7 @@
       [label]="'journalissue.page.keyword'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -34,7 +34,7 @@
       [label]="'journalvolume.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -33,7 +33,7 @@
       [label]="'journal.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -43,7 +43,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -36,7 +36,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType !== linkTypes.None"
        [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" tabindex="-1" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
@@ -31,7 +31,7 @@
       <div *ngIf="linkType !== linkTypes.None" class="text-center">
         <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html

@@ -2,7 +2,7 @@
     <div *ngIf="showThumbnails" class="col-3 col-md-2">
         <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-           [routerLink]="[itemPageRoute]" class="dont-break-out">
+           [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
             <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                                  [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                                  [alt]="'thumbnail.orgunit.alt'"
@@ -23,7 +23,7 @@
             <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
                [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
                [routerLink]="[itemPageRoute]" class="lead"
-               [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)"></a>
+               [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)" role="link" tabindex="0"></a>
             <span *ngIf="linkType === linkTypes.None"
                   class="lead"
                   [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)"></span>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="dont-break-out">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                            [defaultImage]="'assets/images/person-placeholder.svg'"
                            [alt]="'thumbnail.person.alt'"
@@ -23,7 +23,7 @@
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead"
-         [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)"></a>
+         [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None"
             class="lead"
             [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)"></span>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="dont-break-out">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                            [defaultImage]="'assets/images/project-placeholder.svg'"
                            [alt]="'thumbnail.project.alt'"
@@ -23,7 +23,7 @@
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -54,7 +54,7 @@
       [label]="'orgunit.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -50,7 +50,7 @@
       [label]="'person.page.name'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -62,7 +62,7 @@
       [label]="'project.page.keyword'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="link" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/footer/footer.component.html

@@ -11,13 +11,13 @@
 
           <ul class="list-unstyled mb-0">
             <li>
-              <a routerLink="./" class="">Lorem ipsum</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Lorem ipsum</a>
             </li>
             <li>
-              <a routerLink="./" class="">Ut facilisis</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Ut facilisis</a>
             </li>
             <li>
-              <a routerLink="./" class="">Aenean sit</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Aenean sit</a>
             </li>
           </ul>
         </div>
@@ -29,7 +29,7 @@
 
           <ul class="list-unstyled mb-0">
             <li>
-              <a routerLink="./" class="">Suspendisse potenti</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Suspendisse potenti</a>
             </li>
           </ul>
         </div>
@@ -57,33 +57,37 @@
     <div class="content-container">
       <p class="m-0">
         <a class="text-white"
-           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+           href="http://www.dspace.org/" role="link" tabindex="0">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
         <a class="text-white"
-           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+           href="https://www.lyrasis.org/" role="link" tabindex="0">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
-        <li>
-          <button class="btn btn-link text-white" type="button" (click)="showCookieSettings()">
+        <li *ngIf="showCookieSettings">
+          <button class="btn btn-link text-white" type="button" (click)="openCookieSettings()" role="button" tabindex="0">
             {{ 'footer.link.cookies' | translate}}
           </button>
         </li>
+        <li>
+          <a class="btn text-white"
+             routerLink="info/accessibility" role="link" tabindex="0">{{ 'footer.link.accessibility' | translate }}</a>
+        </li>
         <li *ngIf="showPrivacyPolicy">
           <a class="btn text-white"
-             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+             routerLink="info/privacy" role="link" tabindex="0">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li *ngIf="showEndUserAgreement">
           <a class="btn text-white"
-             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+             routerLink="info/end-user-agreement" role="link" tabindex="0">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
         <li *ngIf="showSendFeedback$ | async">
           <a class="btn text-white"
-             routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
+             routerLink="info/feedback" role="link" tabindex="0">{{ 'footer.link.feedback' | translate}}</a>
         </li>
       </ul>
     </div>
     <div *ngIf="coarLdnEnabled$ | async" class="notify-enabled text-white">
-      <a class="coar-notify-support-route" routerLink="info/coar-notify-support">
+      <a class="coar-notify-support-route" routerLink="info/coar-notify-support" role="link" tabindex="0">
         <img class="n-coar" src="assets/images/n-coar.svg" [attr.alt]="'menu.header.image.logo' | translate" />
         {{ 'footer.link.coar-notify-support' | translate }}
       </a>

src/app/footer/footer.component.spec.ts

@@ -67,17 +67,17 @@ describe('Footer component', () => {
     it('should call cookies.showSettings() if cookies is defined', () => {
       const cookies = jasmine.createSpyObj('cookies', ['showSettings']);
       comp.cookies = cookies;
-      comp.showCookieSettings();
+      comp.openCookieSettings();
       expect(cookies.showSettings).toHaveBeenCalled();
     });
 
     it('should not call cookies.showSettings() if cookies is undefined', () => {
       comp.cookies = undefined;
-      expect(() => comp.showCookieSettings()).not.toThrow();
+      expect(() => comp.openCookieSettings()).not.toThrow();
     });
 
     it('should return false', () => {
-      expect(comp.showCookieSettings()).toBeFalse();
+      expect(comp.openCookieSettings()).toBeFalse();
     });
   });
 

src/app/footer/footer.component.ts

@@ -40,6 +40,7 @@ export class FooterComponent implements OnInit {
    * A boolean representing if to show or not the top footer container
    */
   showTopFooter = false;
+  showCookieSettings = false;
   showPrivacyPolicy: boolean;
   showEndUserAgreement: boolean;
   showSendFeedback$: Observable<boolean>;
@@ -54,13 +55,14 @@ export class FooterComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.showCookieSettings = this.appConfig.info.enableCookieConsentPopup;
     this.showPrivacyPolicy = this.appConfig.info.enablePrivacyStatement;
     this.showEndUserAgreement = this.appConfig.info.enableEndUserAgreement;
     this.coarLdnEnabled$ = this.appConfig.info.enableCOARNotifySupport ? this.notifyInfoService.isCoarConfigEnabled() : observableOf(false);
     this.showSendFeedback$ = this.authorizationService.isAuthorized(FeatureID.CanSendFeedback);
   }
 
-  showCookieSettings() {
+  openCookieSettings() {
     if (hasValue(this.cookies)) {
       this.cookies.showSettings();
     }

src/app/header/header.component.html

@@ -1,16 +1,18 @@
 <header>
   <div class="container">
     <div class="d-flex flex-row justify-content-between">
-      <a class="navbar-brand my-2" routerLink="/home">
+      <a class="navbar-brand my-2" routerLink="/home" role="button" tabindex="0">
         <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
 
-      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+      <div class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
         <ds-search-navbar></ds-search-navbar>
-        <ds-lang-switch></ds-lang-switch>
-        <ds-context-help-toggle></ds-context-help-toggle>
-        <ds-auth-nav-menu></ds-auth-nav-menu>
-        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <div role="toolbar" [attr.aria-label]="'nav.user.description' | translate">
+          <ds-lang-switch></ds-lang-switch>
+          <ds-context-help-toggle></ds-context-help-toggle>
+          <ds-auth-nav-menu></ds-auth-nav-menu>
+          <ds-impersonate-navbar></ds-impersonate-navbar>
+        </div>
         <div *ngIf="isMobile$ | async" class="pl-2">
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
@@ -18,7 +20,7 @@
             <span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
           </button>
         </div>
-      </nav>
+      </div>
     </div>
   </div>
 </header>

src/app/header/header.component.scss

@@ -23,7 +23,7 @@
     }
   }
 
-  .navbar {
+  .navbar, div[role="toolbar"] {
     display: flex;
     gap: calc(var(--bs-spacer) / 3);
     align-items: center;

src/app/home-page/home-news/home-news.component.html

@@ -14,7 +14,7 @@
       <li>issue permanent urls and trustworthy identifiers, including optional integrations with handle.net and DataCite DOI</li>
     </ul>
     <p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning"
-        target="_blank">leading institutions using DSpace</a>.
+        target="_blank" role="link" tabindex="0">leading institutions using DSpace</a>.
     </p>
   </div>
 </div>

src/app/home-page/home-page-routes.ts

@@ -2,7 +2,6 @@ import { Route } from '@angular/router';
 
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
-import { homePageResolver } from './home-page.resolver';
 import { ThemedHomePageComponent } from './themed-home-page.component';
 
 export const ROUTES: Route[] = [
@@ -26,8 +25,5 @@ export const ROUTES: Route[] = [
         }],
       },
     },
-    resolve: {
-      site: homePageResolver,
-    },
   },
 ];

src/app/home-page/home-page.component.html

@@ -14,9 +14,6 @@
 <ds-suggestions-popup></ds-suggestions-popup>
 
 <ng-template #homeContent>
-  <ng-container *ngIf="(site$ | async) as site">
-    <ds-view-tracker [object]="site"></ds-view-tracker>
-  </ng-container>
   <ds-search-form [inPlaceSearch]="false"
                          [searchPlaceholder]="'home.search-form.placeholder' | translate">
   </ds-search-form>

src/app/home-page/home-page.component.ts

@@ -23,7 +23,6 @@ import { SuggestionsPopupComponent } from '../notifications/suggestions-popup/su
 import { ThemedConfigurationSearchPageComponent } from '../search-page/themed-configuration-search-page.component';
 import { ThemedSearchFormComponent } from '../shared/search-form/themed-search-form.component';
 import { PageWithSidebarComponent } from '../shared/sidebar/page-with-sidebar.component';
-import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
 import { HomeCoarComponent } from './home-coar/home-coar.component';
 import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component';
 import { RecentItemListComponent } from './recent-item-list/recent-item-list.component';
@@ -34,7 +33,7 @@ import { ThemedTopLevelCommunityListComponent } from './top-level-community-list
   styleUrls: ['./home-page.component.scss'],
   templateUrl: './home-page.component.html',
   standalone: true,
-  imports: [ThemedHomeNewsComponent, NgTemplateOutlet, NgIf, ViewTrackerComponent, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, SuggestionsPopupComponent, ThemedConfigurationSearchPageComponent, PageWithSidebarComponent, HomeCoarComponent],
+  imports: [ThemedHomeNewsComponent, NgTemplateOutlet, NgIf, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, SuggestionsPopupComponent, ThemedConfigurationSearchPageComponent, PageWithSidebarComponent, HomeCoarComponent],
 })
 export class HomePageComponent implements OnInit {
 

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -1,14 +1,18 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
-        <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
-                <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
-                <h2> {{'home.recent-submissions.head' | translate}}</h2>
-                <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
-                        <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
-                        </ds-listable-object-component-loader>
-                </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
-        </div>
-        <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
-        <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
-        </ds-loading>
+  <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
+    <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
+    <h2> {{'home.recent-submissions.head' | translate}}</h2>
+    <ul class="list-unstyled m-0 p-0">
+      <li class="my-4" *ngFor="let item of itemRD?.payload?.page">
+        <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
+        </ds-listable-object-component-loader>
+      </li>
+    </ul>
+    <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4" role="link" tabindex="0">
+      {{'vocabulary-treeview.load-more' | translate }} ...
+    </button>
+  </div>
+  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
+  <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
+  </ds-loading>
 </ng-container>

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -0,0 +1,94 @@
+<div class="container">
+  <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
+
+  <form>
+    <div class="form-group row">
+      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
+        {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-4">
+        <ui-switch [id]="'disableNotificationTimeOutInput'"
+                   [(ngModel)]="formValues.notificationTimeOutEnabled"
+                   [ngModelOptions]="{ standalone: true }"
+        ></ui-switch>
+      </div>
+
+      <div *dsContextHelp="{
+            content: 'info.accessibility-settings.disableNotificationTimeOut.hint',
+            id: 'disableNotificationTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'left'
+          }">
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <label [for]="'notificationTimeOutInput'" class="col-sm-4 col-form-label">
+        {{ 'info.accessibility-settings.notificationTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-4">
+        <input [type]="'number'" [id]="'notificationTimeOutInput'" class="form-control"
+               [ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues)}"
+               [min]="1"
+               [readOnly]="!formValues.notificationTimeOutEnabled"
+               [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="'notificationTimeOutHint'">
+        <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('notificationTimeOut', formValues) }">
+          {{ 'info.accessibility-settings.notificationTimeOut.invalid' | translate }}
+        </div>
+      </div>
+
+
+      <div class="col-sm-1" *dsContextHelp="{
+            content: 'info.accessibility-settings.notificationTimeOut.hint',
+            id: 'notificationTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'left'
+          }">
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <label [for]="'liveRegionTimeOutInput'" class="col-sm-4 col-form-label">
+        {{ 'info.accessibility-settings.liveRegionTimeOut.label' | translate }}
+      </label>
+
+      <div class="col-sm-4">
+        <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
+               [ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues)}"
+               [min]="1"
+               [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
+               [attr.aria-describedby]="'liveRegionTimeOutHint'">
+        <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues) }">
+          {{ 'info.accessibility-settings.liveRegionTimeOut.invalid' | translate }}
+        </div>
+      </div>
+
+
+      <div class="col-sm-1" *dsContextHelp="{
+            content: 'info.accessibility-settings.liveRegionTimeOut.hint',
+            id: 'liveRegionTimeOutHelp',
+            iconPlacement: 'right',
+            tooltipPlacement: 'left'
+          }">
+      </div>
+    </div>
+
+    <div role="group">
+      <button type="submit" (click)="saveSettings()" class="btn btn-primary mr-2">
+        {{ 'info.accessibility-settings.submit' | translate }}
+      </button>
+      <button (click)="resetSettings()" class="btn btn-warning">
+        {{ 'info.accessibility-settings.reset' | translate }}
+      </button>
+    </div>
+
+  </form>
+
+  <div *ngIf="(isAuthenticated | async) === false && (cookieIsAccepted | async) === false" class="mt-2">
+    <ds-alert [type]="AlertType.Warning">{{ 'info.accessibility-settings.cookie-warning' | translate }}</ds-alert>
+  </div>
+
+</div>

src/app/info/accessibility-settings/accessibility-settings.component.spec.ts

@@ -0,0 +1,98 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync,
+} from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { ContextHelpDirective } from 'src/app/shared/context-help.directive';
+
+import { AccessibilitySettingsService } from '../../accessibility/accessibility-settings.service';
+import { getAccessibilitySettingsServiceStub } from '../../accessibility/accessibility-settings.service.stub';
+import { AuthService } from '../../core/auth/auth.service';
+import { KlaroService } from '../../shared/cookies/klaro.service';
+import { KlaroServiceStub } from '../../shared/cookies/klaro.service.stub';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { AuthServiceStub } from '../../shared/testing/auth-service.stub';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { AccessibilitySettingsComponent } from './accessibility-settings.component';
+
+
+describe('AccessibilitySettingsComponent', () => {
+  let component: AccessibilitySettingsComponent;
+  let fixture: ComponentFixture<AccessibilitySettingsComponent>;
+
+  let authService: AuthServiceStub;
+  let settingsService: AccessibilitySettingsService;
+  let notificationsService: NotificationsServiceStub;
+  let klaroService: KlaroServiceStub;
+
+  beforeEach(waitForAsync(() => {
+    authService = new AuthServiceStub();
+    settingsService = getAccessibilitySettingsServiceStub();
+    notificationsService = new NotificationsServiceStub();
+    klaroService = new KlaroServiceStub();
+
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      providers: [
+        { provide: AuthService, useValue: authService },
+        { provide: AccessibilitySettingsService, useValue: settingsService },
+        { provide: NotificationsService, useValue: notificationsService },
+        { provide: KlaroService, useValue: klaroService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(AccessibilitySettingsComponent, {
+      remove: {
+        imports: [ContextHelpDirective],
+      },
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccessibilitySettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('On Init', () => {
+    it('should retrieve the current settings', () => {
+      expect(settingsService.getAll).toHaveBeenCalled();
+    });
+
+    it('should convert retrieved settings to form format', () => {
+      expect(settingsService.convertStoredValuesToFormValues).toHaveBeenCalled();
+    });
+  });
+
+  describe('saveSettings', () => {
+    it('should save the settings in the service', () => {
+      settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+      component.saveSettings();
+      expect(settingsService.setSettings).toHaveBeenCalled();
+    });
+
+    it('should convert form settings to stored format', () => {
+      settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+      component.saveSettings();
+      expect(settingsService.convertFormValuesToStoredValues).toHaveBeenCalled();
+    });
+
+    it('should give the user a notification mentioning where the settings were saved', () => {
+      settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('cookie'));
+      component.saveSettings();
+      expect(notificationsService.success).toHaveBeenCalled();
+    });
+
+    it('should give the user a notification mentioning why saving failed, if it failed', () => {
+      settingsService.setSettings = jasmine.createSpy('setSettings').and.returnValue(of('failed'));
+      component.saveSettings();
+      expect(notificationsService.error).toHaveBeenCalled();
+    });
+  });
+});

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -0,0 +1,160 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+  Optional,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { UiSwitchModule } from 'ngx-ui-switch';
+import {
+  BehaviorSubject,
+  Subscription,
+  take,
+} from 'rxjs';
+import {
+  distinctUntilChanged,
+  map,
+} from 'rxjs/operators';
+import { AlertType } from 'src/app/shared/alert/alert-type';
+
+import {
+  AccessibilitySetting,
+  AccessibilitySettingsFormValues,
+  AccessibilitySettingsService,
+} from '../../accessibility/accessibility-settings.service';
+import { AuthService } from '../../core/auth/auth.service';
+import { AlertComponent } from '../../shared/alert/alert.component';
+import { ContextHelpDirective } from '../../shared/context-help.directive';
+import { KlaroService } from '../../shared/cookies/klaro.service';
+import {
+  hasValue,
+  isEmpty,
+} from '../../shared/empty.util';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+
+/**
+ * Component providing the form where users can update accessibility settings.
+ */
+@Component({
+  selector: 'ds-accessibility-settings',
+  templateUrl: './accessibility-settings.component.html',
+  imports: [
+    CommonModule,
+    TranslateModule,
+    FormsModule,
+    UiSwitchModule,
+    ContextHelpDirective,
+    AlertComponent,
+  ],
+  standalone: true,
+})
+export class AccessibilitySettingsComponent implements OnInit, OnDestroy {
+  // Redeclared for use in template
+  protected readonly AlertType = AlertType;
+
+  protected formValues: AccessibilitySettingsFormValues;
+
+  isAuthenticated: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  cookieIsAccepted: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    protected authService: AuthService,
+    protected settingsService: AccessibilitySettingsService,
+    protected notificationsService: NotificationsService,
+    protected translateService: TranslateService,
+    @Optional() protected klaroService: KlaroService,
+  ) {
+  }
+
+  ngOnInit() {
+    this.updateFormValues();
+
+    this.subscriptions.push(
+      this.authService.isAuthenticated().pipe(distinctUntilChanged())
+        .subscribe(val => this.isAuthenticated.next(val)),
+    );
+
+    if (hasValue(this.klaroService)) {
+      this.subscriptions.push(
+        this.klaroService.getSavedPreferences().pipe(
+          map(preferences => preferences?.accessibility === true),
+          distinctUntilChanged(),
+        ).subscribe(val => this.cookieIsAccepted.next(val)),
+      );
+    } else {
+      this.cookieIsAccepted.next(false);
+    }
+
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  /**
+   * Saves the user-configured settings
+   */
+  saveSettings() {
+    const formValues = this.formValues;
+
+    if (this.settingsService.formValuesValid(formValues)) {
+      const convertedValues = this.settingsService.convertFormValuesToStoredValues(formValues);
+      this.settingsService.setSettings(convertedValues).pipe(take(1)).subscribe(location => {
+        if (location !== 'failed') {
+          this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.save-notification.' + location));
+          this.updateFormValues();
+        } else {
+          this.notificationsService.error(null, this.translateService.instant('info.accessibility-settings.failed-notification'));
+        }
+      });
+    } else {
+      this.notificationsService.error(
+        null,
+        this.translateService.instant('info.accessibility-settings.invalid-form-notification'),
+      );
+    }
+  }
+
+  /**
+   * Updates the form values with the currently stored accessibility settings and sets the default values for settings
+   * that have no stored value.
+   */
+  updateFormValues() {
+    this.settingsService.getAll().pipe(take(1)).subscribe(storedSettings => {
+      const formValues = this.settingsService.convertStoredValuesToFormValues(storedSettings);
+
+      const settingsRequiringDefaultValue: AccessibilitySetting[] = ['notificationTimeOut', 'liveRegionTimeOut'];
+
+      for (const setting of settingsRequiringDefaultValue) {
+        if (isEmpty(formValues[setting])) {
+          const defaultValue = this.settingsService.getDefaultValue(setting);
+          formValues[setting] = defaultValue;
+        }
+      }
+
+      this.formValues = formValues;
+    });
+  }
+
+  /**
+   * Resets accessibility settings
+   */
+  resetSettings() {
+    this.settingsService.clearSettings().pipe(take(1)).subscribe(([cookieReset, metadataReset]) => {
+      if (cookieReset === 'failed' && metadataReset === 'failed') {
+        this.notificationsService.warning(null, this.translateService.instant('info.accessibility-settings.reset-failed'));
+      } else {
+        this.notificationsService.success(null, this.translateService.instant('info.accessibility-settings.reset-notification'));
+        this.updateFormValues();
+      }
+    });
+  }
+
+}

src/app/info/info-routes.ts

@@ -8,9 +8,11 @@ import { i18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
 import { notifyInfoGuard } from '../core/coar-notify/notify-info/notify-info.guard';
 import { feedbackGuard } from '../core/feedback/feedback.guard';
 import { hasValue } from '../shared/empty.util';
+import { AccessibilitySettingsComponent } from './accessibility-settings/accessibility-settings.component';
 import { ThemedEndUserAgreementComponent } from './end-user-agreement/themed-end-user-agreement.component';
 import { ThemedFeedbackComponent } from './feedback/themed-feedback.component';
 import {
+  ACCESSIBILITY_SETTINGS_PATH,
   COAR_NOTIFY_SUPPORT,
   END_USER_AGREEMENT_PATH,
   FEEDBACK_PATH,
@@ -28,6 +30,12 @@ export const ROUTES: Routes = [
     data: { title: 'info.feedback.title', breadcrumbKey: 'info.feedback' },
     canActivate: [feedbackGuard],
   },
+  {
+    path: ACCESSIBILITY_SETTINGS_PATH,
+    component: AccessibilitySettingsComponent,
+    resolve: { breadcrumb: i18nBreadcrumbResolver },
+    data: { title: 'info.accessibility-settings.title', breadcrumbKey: 'info.accessibility-settings' },
+  },
   environment.info.enableEndUserAgreement ? {
     path: END_USER_AGREEMENT_PATH,
     component: ThemedEndUserAgreementComponent,

src/app/info/info-routing-paths.ts

@@ -4,6 +4,7 @@ export const END_USER_AGREEMENT_PATH = 'end-user-agreement';
 export const PRIVACY_PATH = 'privacy';
 export const FEEDBACK_PATH = 'feedback';
 export const COAR_NOTIFY_SUPPORT = 'coar-notify-support';
+export const ACCESSIBILITY_SETTINGS_PATH = 'accessibility';
 
 export function getEndUserAgreementPath() {
   return getSubPath(END_USER_AGREEMENT_PATH);
@@ -21,6 +22,10 @@ export function getCOARNotifySupportPath(): string {
   return getSubPath(COAR_NOTIFY_SUPPORT);
 }
 
+export function getAccessibilitySettingsPath() {
+  return getSubPath(ACCESSIBILITY_SETTINGS_PATH);
+}
+
 function getSubPath(path: string) {
   return `${getInfoModulePath()}/${path}`;
 }

src/app/item-page/alerts/item-alerts.component.html

@@ -7,8 +7,8 @@
             <div class="d-flex justify-content-between flex-wrap">
                 <span class="align-self-center">{{'item.alerts.withdrawn' | translate}}</span>
                 <div class="gap-2 d-flex">
-                  <a routerLink="/home" class="btn btn-primary btn-sm">{{"404.link.home-page" | translate}}</a>
-                  <a *ngIf="showReinstateButton$ | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()">{{ 'item.alerts.reinstate-request' | translate}}</a>
+                  <a routerLink="/home" class="btn btn-primary btn-sm" role="link" tabindex="0">{{"404.link.home-page" | translate}}</a>
+                  <a *ngIf="showReinstateButton$ | async" class="btn btn-primary btn-sm" (click)="openReinstateModal()" role="button" tabindex="0">{{ 'item.alerts.reinstate-request' | translate}}</a>
                 </div>
             </div>
         </ds-alert>

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.html

@@ -1,9 +1,9 @@
 <div class="container">
-  <ds-alert [type]="'alert-info'" [content]="'item.edit.authorizations.heading'"></ds-alert>
-  <ds-resource-policies [resourceType]="'item'" [resourceName]="(getItemName() | async)"
-    [resourceUUID]="(getItemUUID() | async)">
+  <ds-alert [type]="AlertType.Info" [content]="'item.edit.authorizations.heading'"></ds-alert>
+  <ds-resource-policies [resourceType]="'item'" [resourceName]="itemName$ | async"
+    [resourceUUID]="(item$ | async)?.id">
   </ds-resource-policies>
-  <ng-container *ngFor="let bundle of (bundles$ | async); trackById">
+  <ng-container *ngFor="let bundle of (bundles$ | async)">
     <ds-resource-policies [resourceType]="'bundle'" [resourceUUID]="bundle.id" [resourceName]="bundle.name">
     </ds-resource-policies>
     <ng-container *ngIf="(bundleBitstreamsMap.get(bundle.id)?.bitstreams | async)?.length > 0">
@@ -16,7 +16,7 @@
         </div>
         <div class="card-body" [id]="bundle.id" [ngbCollapse]="bundleBitstreamsMap.get(bundle.id).isCollapsed">
           <ng-container
-            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async); trackById">
+            *ngFor="let bitstream of (bundleBitstreamsMap.get(bundle.id).bitstreams | async)">
             <ds-resource-policies [resourceType]="'bitstream'" [resourceUUID]="bitstream.id"
               [resourceName]="bitstream.name"></ds-resource-policies>
           </ng-container>

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.spec.ts

@@ -169,17 +169,9 @@ describe('ItemAuthorizationsComponent test suite', () => {
       }));
     });
 
-    it('should get the item UUID', () => {
-
-      expect(comp.getItemUUID()).toBeObservable(cold('(a|)', {
-        a: item.id,
-      }));
-
-    });
-
     it('should get the item\'s bundle', () => {
 
-      expect(comp.getItemBundles()).toBeObservable(cold('a', {
+      expect(comp.bundles$).toBeObservable(cold('a', {
         a: bundles,
       }));
 

src/app/item-page/edit-item-page/item-authorizations/item-authorizations.component.ts

@@ -21,7 +21,6 @@ import {
 import {
   catchError,
   filter,
-  first,
   map,
   mergeMap,
   take,
@@ -41,11 +40,11 @@ import {
   getFirstSucceededRemoteDataWithNotEmptyPayload,
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { AlertType } from '../../../shared/alert/alert-type';
 import {
   hasValue,
   isNotEmpty,
 } from '../../../shared/empty.util';
-import { NgForTrackByIdDirective } from '../../../shared/ng-for-track-by-id.directive';
 import { ResourcePoliciesComponent } from '../../../shared/resource-policies/resource-policies.component';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
 
@@ -66,7 +65,6 @@ interface BundleBitstreamsMapEntry {
     NgbCollapseModule,
     TranslateModule,
     NgForOf,
-    NgForTrackByIdDirective,
     AsyncPipe,
     NgIf,
     AlertComponent,
@@ -94,7 +92,7 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    * The target editing item
    * @type {Observable<Item>}
    */
-  private item$: Observable<Item>;
+  item$: Observable<Item>;
 
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
@@ -133,16 +131,13 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    */
   private bitstreamPageSize = 4;
 
-  /**
-   * Initialize instance variables
-   *
-   * @param {LinkService} linkService
-   * @param {ActivatedRoute} route
-   * @param nameService
-   */
+  itemName$: Observable<string>;
+
+  readonly AlertType = AlertType;
+
   constructor(
-    private linkService: LinkService,
-    private route: ActivatedRoute,
+    protected linkService: LinkService,
+    protected route: ActivatedRoute,
     public nameService: DSONameService,
   ) {
   }
@@ -152,36 +147,18 @@ export class ItemAuthorizationsComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
     this.getBundlesPerItem();
+    this.itemName$ = this.getItemName();
   }
 
   /**
-   * Return the item's UUID
+   * Return the item's name
    */
-  getItemUUID(): Observable<string> {
-    return this.item$.pipe(
-      map((item: Item) => item.id),
-      first((UUID: string) => isNotEmpty(UUID)),
-    );
-  }
-
-  /**
- * Return the item's name
- */
-  getItemName(): Observable<string> {
+  private getItemName(): Observable<string> {
     return this.item$.pipe(
       map((item: Item) => this.nameService.getName(item)),
     );
   }
 
-  /**
-   * Return all item's bundles
-   *
-   * @return an observable that emits all item's bundles
-   */
-  getItemBundles(): Observable<Bundle[]> {
-    return this.bundles$.asObservable();
-  }
-
   /**
    * Get all bundles per item
    * and all the bitstreams per bundle

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

@@ -32,7 +32,6 @@ import {
   map,
   switchMap,
   take,
-  tap,
 } from 'rxjs/operators';
 import { AlertComponent } from 'src/app/shared/alert/alert.component';
 import { AlertType } from 'src/app/shared/alert/alert-type';
@@ -243,15 +242,28 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: this.bundlesOptions })).pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
-      tap((bundlesPL: PaginatedList<Bundle>) =>
-        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages),
-      ),
-      map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
-    ).subscribe((bundles: Bundle[]) => {
-      this.bundlesSubject.next([...this.bundlesSubject.getValue(), ...bundles]);
+    ).subscribe((bundles: PaginatedList<Bundle>) => {
+      this.updateBundles(bundles);
     });
   }
 
+  /**
+   * Update the subject containing the bundles with the provided bundles.
+   * Also updates the showLoadMoreLink observable so it does not show up when it is no longer necessary.
+   */
+  updateBundles(newBundlesPL: PaginatedList<Bundle>) {
+    const currentBundles = this.bundlesSubject.getValue();
+
+    // Only add bundles to the bundle subject if they are not present yet
+    const bundlesToAdd = newBundlesPL.page
+      .filter(bundleToAdd => !currentBundles.some(currentBundle => currentBundle.id === bundleToAdd.id));
+
+    const updatedBundles = [...currentBundles, ...bundlesToAdd];
+
+    this.showLoadMoreLink$.next(updatedBundles.length < newBundlesPL.totalElements);
+    this.bundlesSubject.next(updatedBundles);
+  }
+
 
   /**
    * Submit the current changes

src/app/item-page/field-components/collections/collections.component.html

@@ -1,6 +1,6 @@
 <ds-metadata-field-wrapper [label]="label | translate">
     <div class="collections">
-        <a *ngFor="let collection of (this.collections$ | async); let last=last;" [routerLink]="['/collections', collection.id]">
+        <a *ngFor="let collection of (this.collections$ | async); let last=last;" [routerLink]="['/collections', collection.id]" role="button" tabindex="0">
             <span>{{ dsoNameService.getName(collection) }}</span><span *ngIf="!last" [innerHTML]="separator"></span>
         </a>
     </div>
@@ -14,6 +14,7 @@
         (click)="$event.preventDefault(); handleLoadMore()"
         class="load-more-btn btn btn-sm btn-outline-secondary"
         role="button"
+        tabindex="0"
         href="javascript:void(0);"
     >
         {{'item.page.collections.load-more' | translate}}

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

@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value" [target]="hasInternalLink(mdValue.value) ? '_self' : '_blank'">
+    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value" [target]="hasInternalLink(mdValue.value) ? '_self' : '_blank'" role="link" tabindex="0">
        {{ linktext || mdValue.value }}<span *ngIf="!last" [innerHTML]="separator"></span>
     </a>
 </ds-metadata-field-wrapper>

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

@@ -21,14 +21,14 @@
     <a class="dont-break-out ds-simple-metadata-link"
       [href]="value"
       [attr.target]="getLinkAttributes(value).target"
-      [attr.rel]="getLinkAttributes(value).rel">
+      [attr.rel]="getLinkAttributes(value).rel" role="link" tabindex="0">
       {{value}}
     </a>
 </ng-template>
 
 <!-- Render value as a link with icon -->
 <ng-template #linkImg let-img="img" let-value="value">
-  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank">
+  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank" role="link" tabindex="0">
     <img class="link-logo"
       [alt]="img.alt | translate"
       [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
@@ -46,5 +46,5 @@
 <ng-template #browselink let-value="value">
   <a class="dont-break-out preserve-line-breaks ds-browse-link"
      [routerLink]="['/browse', browseDefinition.id]"
-     [queryParams]="getQueryParams(value)">{{value}}</a>
+     [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
 </ng-template>

src/app/item-page/full/full-item-page.component.html

@@ -3,14 +3,13 @@
     <div *ngIf="itemRD?.payload as item">
       <ds-item-alerts [item]="item"></ds-item-alerts>
       <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
-      <ds-view-tracker [object]="item"></ds-view-tracker>
       <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
         <div class="d-flex flex-row">
           <ds-item-page-title-field class="mr-auto" [item]="item"></ds-item-page-title-field>
           <ds-dso-edit-menu></ds-dso-edit-menu>
         </div>
         <div class="simple-view-link my-3" *ngIf="!fromSubmissionObject">
-          <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]">
+          <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]" role="button" tabindex="0">
             {{"item.page.link.simple" | translate}}
           </a>
         </div>

src/app/item-page/full/full-item-page.component.spec.ts

@@ -45,7 +45,7 @@ import { createPaginatedList } from '../../shared/testing/utils.test';
 import { ThemeService } from '../../shared/theme-support/theme.service';
 import { TruncatePipe } from '../../shared/utils/truncate.pipe';
 import { VarDirective } from '../../shared/utils/var.directive';
-import { ViewTrackerComponent } from '../../statistics/angulartics/dspace/view-tracker.component';
+import { ViewTrackerResolverService } from '../../statistics/angulartics/dspace/view-tracker-resolver.service';
 import { ThemedItemAlertsComponent } from '../alerts/themed-item-alerts.component';
 import { CollectionsComponent } from '../field-components/collections/collections.component';
 import { ThemedItemPageTitleFieldComponent } from '../simple/field-components/specific-field/title/themed-item-page-field.component';
@@ -162,7 +162,7 @@ describe('FullItemPageComponent', () => {
             ThemedLoadingComponent,
             ThemedItemPageTitleFieldComponent,
             DsoEditMenuComponent,
-            ViewTrackerComponent,
+            ViewTrackerResolverService,
             ThemedItemAlertsComponent,
             CollectionsComponent,
             ThemedFullFileSectionComponent,

src/app/item-page/full/full-item-page.component.ts

@@ -44,7 +44,6 @@ import { hasValue } from '../../shared/empty.util';
 import { ErrorComponent } from '../../shared/error/error.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { VarDirective } from '../../shared/utils/var.directive';
-import { ViewTrackerComponent } from '../../statistics/angulartics/dspace/view-tracker.component';
 import { ThemedItemAlertsComponent } from '../alerts/themed-item-alerts.component';
 import { CollectionsComponent } from '../field-components/collections/collections.component';
 import { ThemedItemPageTitleFieldComponent } from '../simple/field-components/specific-field/title/themed-item-page-field.component';
@@ -79,7 +78,6 @@ import { ThemedFullFileSectionComponent } from './field-components/file-section/
     ThemedItemPageTitleFieldComponent,
     DsoEditMenuComponent,
     ItemVersionsNoticeComponent,
-    ViewTrackerComponent,
     ThemedItemAlertsComponent,
     VarDirective,
   ],

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

@@ -6,6 +6,7 @@ import { itemBreadcrumbResolver } from '../core/breadcrumbs/item-breadcrumb.reso
 import { dsoEditMenuResolver } from '../shared/dso-page/dso-edit-menu.resolver';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { MenuItemType } from '../shared/menu/menu-item-type.model';
+import { viewTrackerResolver } from '../statistics/angulartics/dspace/view-tracker.resolver';
 import { BitstreamRequestACopyPageComponent } from './bitstreams/request-a-copy/bitstream-request-a-copy-page.component';
 import { UploadBitstreamComponent } from './bitstreams/upload/upload-bitstream.component';
 import { ThemedFullItemPageComponent } from './full/themed-full-item-page.component';
@@ -36,6 +37,7 @@ export const ROUTES: Route[] = [
         pathMatch: 'full',
         resolve: {
           menu: dsoEditMenuResolver,
+          tracking: viewTrackerResolver,
         },
       },
       {
@@ -43,6 +45,7 @@ export const ROUTES: Route[] = [
         component: ThemedFullItemPageComponent,
         resolve: {
           menu: dsoEditMenuResolver,
+          tracking: viewTrackerResolver,
         },
       },
       {

src/app/item-page/media-viewer/media-viewer.component.html

@@ -16,12 +16,7 @@
     </ng-container>
   </div>
   <ng-template #showThumbnail>
-    <ds-media-viewer-image *ngIf="mediaOptions.image && mediaOptions.video"
-      [image]="(thumbnailsRD$ | async)?.payload?.page[0]?._links.content.href || thumbnailPlaceholder"
-      [preview]="false"
-    ></ds-media-viewer-image>
-    <ds-thumbnail *ngIf="!(mediaOptions.image && mediaOptions.video)"
-                  [thumbnail]="(thumbnailsRD$ | async)?.payload?.page[0]">
+    <ds-thumbnail [thumbnail]="(thumbnailsRD$ | async)?.payload?.page[0]">
     </ds-thumbnail>
   </ng-template>
 </ng-container>