Merge branch 'main' into coar-notify-7

.github/workflows/build.yml

@@ -33,6 +33,8 @@ jobs:
       #CHROME_VERSION: "90.0.4430.212-1"
       # Bump Node heap size (OOM in CI after upgrading to Angular 15)
       NODE_OPTIONS: '--max-old-space-size=4096'
+      # Project name to use when running docker-compose prior to e2e tests
+      COMPOSE_PROJECT_NAME: 'ci'
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:

cypress.config.ts

@@ -9,8 +9,9 @@ export default defineConfig({
     openMode: 0,
   },
   env: {
-    // Global constants used in DSpace e2e tests (see also ./cypress/support/e2e.ts)
+    // Global DSpace environment variables used in all our Cypress e2e tests
-    // May be overridden in our cypress.json config file using specified environment variables.
+    // May be modified in this config, or overridden in a variety of ways.
+    // See Cypress environment variable docs: https://docs.cypress.io/guides/guides/environment-variables
     // Default values listed here are all valid for the Demo Entities Data set available at
     // https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
     // (This is the data set used in our CI environment)
@@ -21,12 +22,14 @@ export default defineConfig({
     // Community/collection/publication used for view/edit tests
     DSPACE_TEST_COMMUNITY: '0958c910-2037-42a9-81c7-dca80e3892b4',
     DSPACE_TEST_COLLECTION: '282164f5-d325-4740-8dd1-fa4d6d3e7200',
-    DSPACE_TEST_ENTITY_PUBLICATION: 'e98b0f27-5c19-49a0-960d-eb6ad5287067',
+    DSPACE_TEST_ENTITY_PUBLICATION: '6160810f-1e53-40db-81ef-f6621a727398',
     // Search term (should return results) used in search tests
     DSPACE_TEST_SEARCH_TERM: 'test',
-    // Collection used for submission tests
+    // Main Collection used for submission tests. Should be able to accept normal Item objects
     DSPACE_TEST_SUBMIT_COLLECTION_NAME: 'Sample Collection',
     DSPACE_TEST_SUBMIT_COLLECTION_UUID: '9d8334e9-25d3-4a67-9cea-3dffdef80144',
+    // Collection used for Person entity submission tests. MUST be configured with EntityType=Person.
+    DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME: 'People',
     // Account used to test basic submission process
     DSPACE_TEST_SUBMIT_USER: 'dspacedemo+submit@gmail.com',
     DSPACE_TEST_SUBMIT_USER_PASSWORD: 'dspace',

cypress/e2e/admin-sidebar.cy.ts

@@ -0,0 +1,28 @@
+import { Options } from 'cypress-axe';
+import { testA11y } from 'cypress/support/utils';
+
+describe('Admin Sidebar', () => {
+    beforeEach(() => {
+        // Must login as an Admin for sidebar to appear
+        cy.visit('/login');
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+    });
+
+    it('should be pinnable and pass accessibility tests', () => {
+        // Pin the sidebar open
+        cy.get('#sidebar-collapse-toggle').click();
+
+        // Click on every expandable section to open all menus
+        cy.get('ds-expandable-admin-sidebar-section').click({multiple: true});
+
+        // Analyze <ds-admin-sidebar> for accessibility
+        testA11y('ds-admin-sidebar',
+        {
+            rules: {
+                // Currently all expandable sections have nested interactive elements
+                // See https://github.com/DSpace/dspace-angular/issues/2178
+                'nested-interactive': { enabled: false },
+            }
+        } as Options);
+    });
+});

cypress/e2e/breadcrumbs.cy.ts

@@ -1,10 +1,9 @@
-import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Breadcrumbs', () => {
     it('should pass accessibility tests', () => {
         // Visit an Item, as those have more breadcrumbs
-        cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION));
+        cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
 
         // Wait for breadcrumbs to be visible
         cy.get('ds-breadcrumbs').should('be.visible');

cypress/e2e/collection-edit.cy.ts

@@ -0,0 +1,128 @@
+import { testA11y } from 'cypress/support/utils';
+
+const COLLECTION_EDIT_PAGE = '/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('/edit');
+
+beforeEach(() => {
+    // All tests start with visiting the Edit Collection Page
+    cy.visit(COLLECTION_EDIT_PAGE);
+
+    // This page is restricted, so we will be shown the login form. Fill it out & submit.
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Collection > Edit Metadata tab', () => {
+    it('should pass accessibility tests', () => {
+        // <ds-edit-collection> tag must be loaded
+        cy.get('ds-edit-collection').should('be.visible');
+
+        // Analyze <ds-edit-collection> for accessibility issues
+        testA11y('ds-edit-collection');
+    });
+});
+
+describe('Edit Collection > Assign Roles tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="roles"]').click();
+
+        // <ds-collection-roles> tag must be loaded
+        cy.get('ds-collection-roles').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-collection-roles');
+    });
+});
+
+describe('Edit Collection > Content Source tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="source"]').click();
+
+        // <ds-collection-source> tag must be loaded
+        cy.get('ds-collection-source').should('be.visible');
+
+        // Check the external source checkbox (to display all fields on the page)
+        cy.get('#externalSourceCheck').check();
+
+        // Wait for the source controls to appear
+        cy.get('ds-collection-source-controls').should('be.visible');
+
+        // Analyze entire page for accessibility issues
+        testA11y('ds-collection-source');
+    });
+});
+
+describe('Edit Collection > Curate tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="curate"]').click();
+
+        // <ds-collection-curate> tag must be loaded
+        cy.get('ds-collection-curate').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-collection-curate');
+    });
+});
+
+describe('Edit Collection > Access Control tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="access-control"]').click();
+
+        // <ds-collection-access-control> tag must be loaded
+        cy.get('ds-collection-access-control').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-collection-access-control');
+    });
+});
+
+describe('Edit Collection > Authorizations tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="authorizations"]').click();
+
+        // <ds-collection-authorizations> tag must be loaded
+        cy.get('ds-collection-authorizations').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-collection-authorizations');
+    });
+});
+
+describe('Edit Collection > Item Mapper tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="mapper"]').click();
+
+        // <ds-collection-item-mapper> tag must be loaded
+        cy.get('ds-collection-item-mapper').should('be.visible');
+
+        // Analyze entire page for accessibility issues
+        testA11y('ds-collection-item-mapper');
+
+        // Click on the "Map new Items" tab
+        cy.get('li[data-test="mapTab"] a').click();
+
+        // Make sure search form is now visible
+        cy.get('ds-search-form').should('be.visible');
+
+        // Analyze entire page (again) for accessibility issues
+        testA11y('ds-collection-item-mapper');
+    });
+});
+
+
+describe('Edit Collection > Delete page', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="delete-button"]').click();
+
+        // <ds-delete-collection> tag must be loaded
+        cy.get('ds-delete-collection').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-delete-collection');
+    });
+});

cypress/e2e/collection-page.cy.ts

@@ -1,10 +1,9 @@
-import { TEST_COLLECTION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Collection Page', () => {
 
     it('should pass accessibility tests', () => {
-        cy.visit('/collections/'.concat(TEST_COLLECTION));
+        cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
 
         // <ds-collection-page> tag must be loaded
         cy.get('ds-collection-page').should('be.visible');

cypress/e2e/collection-statistics.cy.ts

@@ -1,11 +1,11 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COLLECTION } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Collection Statistics Page', () => {
-    const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(TEST_COLLECTION);
+    const COLLECTIONSTATISTICSPAGE = '/statistics/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION'));
 
     it('should load if you click on "Statistics" from a Collection page', () => {
-        cy.visit('/collections/'.concat(TEST_COLLECTION));
+        cy.visit('/collections/'.concat(Cypress.env('DSPACE_TEST_COLLECTION')));
         cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
         cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE);
     });
@@ -18,7 +18,7 @@ describe('Collection Statistics Page', () => {
     it('should contain a "Total visits per month" section', () => {
         cy.visit(COLLECTIONSTATISTICSPAGE);
         // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_COLLECTION).concat('_TotalVisitsPerMonth')).should('exist');
+        cy.get('.'.concat(Cypress.env('DSPACE_TEST_COLLECTION')).concat('_TotalVisitsPerMonth')).should('exist');
     });
 
     it('should pass accessibility tests', () => {

cypress/e2e/community-edit.cy.ts

@@ -0,0 +1,86 @@
+import { testA11y } from 'cypress/support/utils';
+
+const COMMUNITY_EDIT_PAGE = '/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('/edit');
+
+beforeEach(() => {
+    // All tests start with visiting the Edit Community Page
+    cy.visit(COMMUNITY_EDIT_PAGE);
+
+    // This page is restricted, so we will be shown the login form. Fill it out & submit.
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Community > Edit Metadata tab', () => {
+    it('should pass accessibility tests', () => {
+        // <ds-edit-community> tag must be loaded
+        cy.get('ds-edit-community').should('be.visible');
+
+        // Analyze <ds-edit-community> for accessibility issues
+        testA11y('ds-edit-community');
+    });
+});
+
+describe('Edit Community > Assign Roles tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="roles"]').click();
+
+        // <ds-community-roles> tag must be loaded
+        cy.get('ds-community-roles').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-community-roles');
+    });
+});
+
+describe('Edit Community > Curate tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="curate"]').click();
+
+        // <ds-community-curate> tag must be loaded
+        cy.get('ds-community-curate').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-community-curate');
+    });
+});
+
+describe('Edit Community > Access Control tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="access-control"]').click();
+
+        // <ds-community-access-control> tag must be loaded
+        cy.get('ds-community-access-control').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-community-access-control');
+    });
+});
+
+describe('Edit Community > Authorizations tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="authorizations"]').click();
+
+        // <ds-community-authorizations> tag must be loaded
+        cy.get('ds-community-authorizations').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-community-authorizations');
+    });
+});
+
+describe('Edit Community > Delete page', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="delete-button"]').click();
+
+        // <ds-delete-community> tag must be loaded
+        cy.get('ds-delete-community').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-delete-community');
+    });
+});

cypress/e2e/community-page.cy.ts

@@ -1,15 +1,14 @@
-import { TEST_COMMUNITY } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community Page', () => {
 
     it('should pass accessibility tests', () => {
-        cy.visit('/communities/'.concat(TEST_COMMUNITY));
+        cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
 
         // <ds-community-page> tag must be loaded
         cy.get('ds-community-page').should('be.visible');
 
         // Analyze <ds-community-page> for accessibility issues
-        testA11y('ds-community-page',);
+        testA11y('ds-community-page');
     });
 });

cypress/e2e/community-statistics.cy.ts

@@ -1,11 +1,11 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_COMMUNITY } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Community Statistics Page', () => {
-    const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(TEST_COMMUNITY);
+    const COMMUNITYSTATISTICSPAGE = '/statistics/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY'));
 
     it('should load if you click on "Statistics" from a Community page', () => {
-        cy.visit('/communities/'.concat(TEST_COMMUNITY));
+        cy.visit('/communities/'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')));
         cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
         cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE);
     });
@@ -18,7 +18,7 @@ describe('Community Statistics Page', () => {
     it('should contain a "Total visits per month" section', () => {
         cy.visit(COMMUNITYSTATISTICSPAGE);
         // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_COMMUNITY).concat('_TotalVisitsPerMonth')).should('exist');
+        cy.get('.'.concat(Cypress.env('DSPACE_TEST_COMMUNITY')).concat('_TotalVisitsPerMonth')).should('exist');
     });
 
     it('should pass accessibility tests', () => {

cypress/e2e/homepage-statistics.cy.ts

@@ -1,4 +1,4 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 import '../support/commands';
 
@@ -11,8 +11,8 @@ describe('Site Statistics Page', () => {
 
     it('should pass accessibility tests', () => {
         // generate 2 view events on an Item's page
-        cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item');
+        cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item');
-        cy.generateViewEvent(TEST_ENTITY_PUBLICATION, 'item');
+        cy.generateViewEvent(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'), 'item');
 
         cy.visit('/statistics');
 

cypress/e2e/item-edit.cy.ts

@@ -0,0 +1,135 @@
+import { Options } from 'cypress-axe';
+import { testA11y } from 'cypress/support/utils';
+
+const ITEM_EDIT_PAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('/edit');
+
+beforeEach(() => {
+    // All tests start with visiting the Edit Item Page
+    cy.visit(ITEM_EDIT_PAGE);
+
+    // This page is restricted, so we will be shown the login form. Fill it out & submit.
+    cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+});
+
+describe('Edit Item > Edit Metadata tab', () => {
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="metadata"]').click();
+
+        // <ds-edit-item-page> tag must be loaded
+        cy.get('ds-edit-item-page').should('be.visible');
+
+        // Analyze <ds-edit-item-page> for accessibility issues
+        testA11y('ds-edit-item-page');
+    });
+});
+
+describe('Edit Item > Status tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="status"]').click();
+
+        // <ds-item-status> tag must be loaded
+        cy.get('ds-item-status').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-status');
+    });
+});
+
+describe('Edit Item > Bitstreams tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="bitstreams"]').click();
+
+        // <ds-item-bitstreams> tag must be loaded
+        cy.get('ds-item-bitstreams').should('be.visible');
+
+        // Table of item bitstreams must also be loaded
+        cy.get('div.item-bitstreams').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-bitstreams',
+            {
+                rules: {
+                    // Currently Bitstreams page loads a pagination component per Bundle
+                    // and they all use the same 'id="p-dad"'.
+                    'duplicate-id': { enabled: false },
+                }
+            } as Options
+        );
+    });
+});
+
+describe('Edit Item > Curate tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="curate"]').click();
+
+        // <ds-item-curate> tag must be loaded
+        cy.get('ds-item-curate').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-curate');
+    });
+});
+
+describe('Edit Item > Relationships tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="relationships"]').click();
+
+        // <ds-item-relationships> tag must be loaded
+        cy.get('ds-item-relationships').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-relationships');
+    });
+});
+
+describe('Edit Item > Version History tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="versionhistory"]').click();
+
+        // <ds-item-version-history> tag must be loaded
+        cy.get('ds-item-version-history').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-version-history');
+    });
+});
+
+describe('Edit Item > Access Control tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="access-control"]').click();
+
+        // <ds-item-access-control> tag must be loaded
+        cy.get('ds-item-access-control').should('be.visible');
+
+        // Analyze for accessibility issues
+        testA11y('ds-item-access-control');
+    });
+});
+
+describe('Edit Item > Collection Mapper tab', () => {
+
+    it('should pass accessibility tests', () => {
+        cy.get('a[data-test="mapper"]').click();
+
+        // <ds-item-collection-mapper> tag must be loaded
+        cy.get('ds-item-collection-mapper').should('be.visible');
+
+        // Analyze entire page for accessibility issues
+        testA11y('ds-item-collection-mapper');
+
+        // Click on the "Map new collections" tab
+        cy.get('li[data-test="mapTab"] a').click();
+
+        // Make sure search form is now visible
+        cy.get('ds-search-form').should('be.visible');
+
+        // Analyze entire page (again) for accessibility issues
+        testA11y('ds-item-collection-mapper');
+    });
+});

cypress/e2e/item-page.cy.ts

@@ -1,9 +1,8 @@
-import { TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Item  Page', () => {
-    const ITEMPAGE = '/items/'.concat(TEST_ENTITY_PUBLICATION);
+    const ITEMPAGE = '/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
-    const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION);
+    const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
 
     // Test that entities will redirect to /entities/[type]/[uuid] when accessed via /items/[uuid]
     it('should redirect to the entity page when navigating to an item page', () => {

cypress/e2e/item-statistics.cy.ts

@@ -1,11 +1,11 @@
-import { REGEX_MATCH_NON_EMPTY_TEXT, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
+import { REGEX_MATCH_NON_EMPTY_TEXT } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Item Statistics Page', () => {
-    const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(TEST_ENTITY_PUBLICATION);
+    const ITEMSTATISTICSPAGE = '/statistics/items/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
 
     it('should load if you click on "Statistics" from an Item/Entity page', () => {
-        cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION));
+        cy.visit('/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')));
         cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
         cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
     });
@@ -24,7 +24,7 @@ describe('Item Statistics Page', () => {
     it('should contain a "Total visits per month" section', () => {
         cy.visit(ITEMSTATISTICSPAGE);
         // Check just for existence because this table is empty in CI environment as it's historical data
-        cy.get('.'.concat(TEST_ENTITY_PUBLICATION).concat('_TotalVisitsPerMonth')).should('exist');
+        cy.get('.'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION')).concat('_TotalVisitsPerMonth')).should('exist');
     });
 
     it('should pass accessibility tests', () => {

cypress/e2e/login-modal.cy.ts

@@ -1,4 +1,3 @@
-import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 const page = {
@@ -37,7 +36,7 @@ const page = {
 
 describe('Login Modal', () => {
     it('should login when clicking button & stay on same page', () => {
-        const ENTITYPAGE = '/entities/publication/'.concat(TEST_ENTITY_PUBLICATION);
+        const ENTITYPAGE = '/entities/publication/'.concat(Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION'));
         cy.visit(ENTITYPAGE);
 
         // Login menu should exist
@@ -47,7 +46,7 @@ describe('Login Modal', () => {
         page.openLoginMenu();
         cy.get('.form-login').should('be.visible');
 
-        page.submitLoginAndPasswordByPressingButton(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+        page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
         cy.get('ds-log-in').should('not.exist');
 
         // Verify we are still on the same page
@@ -67,7 +66,7 @@ describe('Login Modal', () => {
         cy.get('.form-login').should('be.visible');
 
         // Login, and the <ds-log-in> tag should no longer exist
-        page.submitLoginAndPasswordByPressingEnter(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+        page.submitLoginAndPasswordByPressingEnter(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
         cy.get('.form-login').should('not.exist');
 
         // Verify we are still on homepage
@@ -81,7 +80,7 @@ describe('Login Modal', () => {
 
     it('should support logout', () => {
         // First authenticate & access homepage
-        cy.login(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
+        cy.login(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
         cy.visit('/');
 
         // Verify ds-log-in tag doesn't exist, but ds-log-out tag does exist
@@ -109,6 +108,9 @@ describe('Login Modal', () => {
         cy.get('ds-themed-navbar [data-test="register"]').click();
         cy.location('pathname').should('eq', '/register');
         cy.get('ds-register-email').should('exist');
+
+        // Test accessibility of this page
+        testA11y('ds-register-email');
     });
 
     it('should allow forgot password', () => {
@@ -123,16 +125,26 @@ describe('Login Modal', () => {
         cy.get('ds-themed-navbar [data-test="forgot"]').click();
         cy.location('pathname').should('eq', '/forgot');
         cy.get('ds-forgot-email').should('exist');
+
+        // Test accessibility of this page
+        testA11y('ds-forgot-email');
     });
 
-    it('should pass accessibility tests', () => {
+    it('should pass accessibility tests in menus', () => {
         cy.visit('/');
 
+        // Open login menu & verify accessibility
         page.openLoginMenu();
-
         cy.get('ds-log-in').should('exist');
-
-        // Analyze <ds-log-in> for accessibility issues
         testA11y('ds-log-in');
+
+        // Now login
+        page.submitLoginAndPasswordByPressingButton(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+        cy.get('ds-log-in').should('not.exist');
+
+        // Open user menu, verify user menu accesibility
+        page.openUserMenu();
+        cy.get('ds-user-menu').should('be.visible');
+        testA11y('ds-user-menu');
     });
 });

cypress/e2e/my-dspace.cy.ts

@@ -1,5 +1,3 @@
-import { Options } from 'cypress-axe';
-import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('My DSpace page', () => {
@@ -7,7 +5,7 @@ describe('My DSpace page', () => {
         cy.visit('/mydspace');
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         cy.get('ds-my-dspace-page').should('be.visible');
 
@@ -26,7 +24,7 @@ describe('My DSpace page', () => {
         cy.visit('/mydspace');
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         cy.get('ds-my-dspace-page').should('be.visible');
 
@@ -35,16 +33,8 @@ describe('My DSpace page', () => {
 
         cy.get('ds-object-detail').should('be.visible');
 
-        // Analyze <ds-search-page> for accessibility issues
+        // Analyze <ds-my-dspace-page> for accessibility issues
-        testA11y('ds-my-dspace-page',
+        testA11y('ds-my-dspace-page');
-            {
-                rules: {
-                    // Search filters fail these two "moderate" impact rules
-                    'heading-order': { enabled: false },
-                    'landmark-unique': { enabled: false }
-                }
-            } as Options
-        );
     });
 
     // NOTE: Deleting existing submissions is exercised by submission.spec.ts
@@ -52,7 +42,7 @@ describe('My DSpace page', () => {
         cy.visit('/mydspace');
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         // Open the New Submission dropdown
         cy.get('button[data-test="submission-dropdown"]').click();
@@ -63,10 +53,10 @@ describe('My DSpace page', () => {
         cy.get('ds-create-item-parent-selector').should('be.visible');
 
         // Type in a known Collection name in the search box
-        cy.get('ds-authorized-collection-selector input[type="search"]').type(TEST_SUBMIT_COLLECTION_NAME);
+        cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
         // Click on the button matching that known Collection name
-        cy.get('ds-authorized-collection-selector button[title="'.concat(TEST_SUBMIT_COLLECTION_NAME).concat('"]')).click();
+        cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME')).concat('"]')).click();
 
         // New URL should include /workspaceitems, as we've started a new submission
         cy.url().should('include', '/workspaceitems');
@@ -75,7 +65,7 @@ describe('My DSpace page', () => {
         cy.get('ds-submission-edit').should('be.visible');
 
         // A Collection menu button should exist & its value should be the selected collection
-        cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME);
+        cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
         // Now that we've created a submission, we'll test that we can go back and Edit it.
         // Get our Submission URL, to parse out the ID of this new submission
@@ -124,7 +114,7 @@ describe('My DSpace page', () => {
         cy.visit('/mydspace');
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         // Open the New Import dropdown
         cy.get('button[data-test="import-dropdown"]').click();
@@ -136,6 +126,9 @@ describe('My DSpace page', () => {
 
         // The external import searchbox should be visible
         cy.get('ds-submission-import-external-searchbar').should('be.visible');
+
+        // Test for accessibility issues
+        testA11y('ds-submission-import-external');
     });
 
 });

cypress/e2e/search-navbar.cy.ts

@@ -1,5 +1,3 @@
-import { TEST_SEARCH_TERM } from 'cypress/support/e2e';
-
 const page = {
     fillOutQueryInNavBar(query) {
         // Click the magnifying glass
@@ -17,7 +15,7 @@ const page = {
 
 describe('Search from Navigation Bar', () => {
     // NOTE: these tests currently assume this query will return results!
-    const query = TEST_SEARCH_TERM;
+    const query = Cypress.env('DSPACE_TEST_SEARCH_TERM');
 
     it('should go to search page with correct query if submitted (from home)', () => {
         cy.visit('/');

cypress/e2e/search-page.cy.ts

@@ -1,8 +1,10 @@
 import { Options } from 'cypress-axe';
-import { TEST_SEARCH_TERM } from 'cypress/support/e2e';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Search Page', () => {
+    // NOTE: these tests currently assume this query will return results!
+    const query = Cypress.env('DSPACE_TEST_SEARCH_TERM');
+
     it('should redirect to the correct url when query was set and submit button was triggered', () => {
         const queryString = 'Another interesting query string';
         cy.visit('/search');
@@ -13,8 +15,8 @@ describe('Search Page', () => {
     });
 
     it('should load results and pass accessibility tests', () => {
-        cy.visit('/search?query='.concat(TEST_SEARCH_TERM));
+        cy.visit('/search?query='.concat(query));
-        cy.get('[data-test="search-box"]').should('have.value', TEST_SEARCH_TERM);
+        cy.get('[data-test="search-box"]').should('have.value', query);
 
         // <ds-search-page> tag must be loaded
         cy.get('ds-search-page').should('be.visible');
@@ -31,7 +33,7 @@ describe('Search Page', () => {
     });
 
     it('should have a working grid view that passes accessibility tests', () => {
-        cy.visit('/search?query='.concat(TEST_SEARCH_TERM));
+        cy.visit('/search?query='.concat(query));
 
         // Click button in sidebar to display grid view
         cy.get('ds-search-sidebar [data-test="grid-view"]').click();
@@ -46,9 +48,8 @@ describe('Search Page', () => {
         testA11y('ds-search-page',
             {
                 rules: {
-                    // Search filters fail these two "moderate" impact rules
+                    // Card titles fail this test currently
-                    'heading-order': { enabled: false },
+                    'heading-order': { enabled: false }
-                    'landmark-unique': { enabled: false }
                 }
             } as Options
         );

cypress/e2e/submission.cy.ts

@@ -1,14 +1,16 @@
-import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID } from 'cypress/support/e2e';
+import { testA11y } from 'cypress/support/utils';
+//import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID, TEST_ADMIN_USER, TEST_ADMIN_PASSWORD } from 'cypress/support/e2e';
+import { Options } from 'cypress-axe';
 
 describe('New Submission page', () => {
-    // NOTE: We already test that new submissions can be started from MyDSpace in my-dspace.spec.ts
 
+    // NOTE: We already test that new Item submissions can be started from MyDSpace in my-dspace.spec.ts
     it('should create a new submission when using /submit path & pass accessibility', () => {
         // Test that calling /submit with collection & entityType will create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+        cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         // Should redirect to /workspaceitems, as we've started a new submission
         cy.url().should('include', '/workspaceitems');
@@ -17,7 +19,7 @@ describe('New Submission page', () => {
         cy.get('ds-submission-edit').should('be.visible');
 
         // A Collection menu button should exist & it's value should be the selected collection
-        cy.get('#collectionControlsMenuButton span').should('have.text', TEST_SUBMIT_COLLECTION_NAME);
+        cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME'));
 
         // 4 sections should be visible by default
         cy.get('div#section_traditionalpageone').should('be.visible');
@@ -25,6 +27,25 @@ describe('New Submission page', () => {
         cy.get('div#section_upload').should('be.visible');
         cy.get('div#section_license').should('be.visible');
 
+        // Test entire page for accessibility
+        testA11y('ds-submission-edit',
+            {
+                rules: {
+                    // Author & Subject fields have invalid "aria-multiline" attrs.
+                    // See https://github.com/DSpace/dspace-angular/issues/1272
+                    'aria-allowed-attr': { enabled: false },
+                    // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+                    // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+                    'aria-required-children': { enabled: false },
+                    'nested-interactive': { enabled: false },
+                    // All select boxes fail to have a name / aria-label.
+                    // This is a bug in ng-dynamic-forms and may require https://github.com/DSpace/dspace-angular/issues/2216
+                    'select-name': { enabled: false },
+                }
+
+            } as Options
+        );
+
         // Discard button should work
         // Clicking it will display a confirmation, which we will confirm with another click
         cy.get('button#discard').click();
@@ -33,10 +54,10 @@ describe('New Submission page', () => {
 
     it('should block submission & show errors if required fields are missing', () => {
         // Create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+        cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         // Attempt an immediate deposit without filling out any fields
         cy.get('button#deposit').click();
@@ -93,10 +114,10 @@ describe('New Submission page', () => {
 
     it('should allow for deposit if all required fields completed & file uploaded', () => {
         // Create a new submission
-        cy.visit('/submit?collection='.concat(TEST_SUBMIT_COLLECTION_UUID).concat('&entityType=none'));
+        cy.visit('/submit?collection='.concat(Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID')).concat('&entityType=none'));
 
         // This page is restricted, so we will be shown the login form. Fill it out & submit.
-        cy.loginViaForm(TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD);
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_SUBMIT_USER'), Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD'));
 
         // Fill out all required fields (Title, Date)
         cy.get('input#dc_title').type('DSpace logo uploaded via e2e tests');
@@ -131,4 +152,76 @@ describe('New Submission page', () => {
         cy.get('ds-notification div.alert-success').should('be.visible');
     });
 
+    it('is possible to submit a new "Person" and that form passes accessibility', () => {
+        // To submit a different entity type, we'll start from MyDSpace
+        cy.visit('/mydspace');
+
+        // This page is restricted, so we will be shown the login form. Fill it out & submit.
+        // NOTE: At this time, we MUST login as admin to submit Person objects
+        cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD'));
+
+        // Open the New Submission dropdown
+        cy.get('button[data-test="submission-dropdown"]').click();
+        // Click on the "Person" type in that dropdown
+        cy.get('#entityControlsDropdownMenu button[title="Person"]').click();
+
+        // This should display the <ds-create-item-parent-selector> (popup window)
+        cy.get('ds-create-item-parent-selector').should('be.visible');
+
+        // Type in a known Collection name in the search box
+        cy.get('ds-authorized-collection-selector input[type="search"]').type(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME'));
+
+        // Click on the button matching that known Collection name
+        cy.get('ds-authorized-collection-selector button[title="'.concat(Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME')).concat('"]')).click();
+
+        // New URL should include /workspaceitems, as we've started a new submission
+        cy.url().should('include', '/workspaceitems');
+
+        // The Submission edit form tag should be visible
+        cy.get('ds-submission-edit').should('be.visible');
+
+        // A Collection menu button should exist & its value should be the selected collection
+        cy.get('#collectionControlsMenuButton span').should('have.text', Cypress.env('DSPACE_TEST_SUBMIT_PERSON_COLLECTION_NAME'));
+
+        // 3 sections should be visible by default
+        cy.get('div#section_personStep').should('be.visible');
+        cy.get('div#section_upload').should('be.visible');
+        cy.get('div#section_license').should('be.visible');
+
+        // Test entire page for accessibility
+        testA11y('ds-submission-edit',
+            {
+                rules: {
+                    // All panels are accordians & fail "aria-required-children" and "nested-interactive".
+                    // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216
+                    'aria-required-children': { enabled: false },
+                    'nested-interactive': { enabled: false },
+                }
+
+            } as Options
+        );
+
+        // Click the lookup button next to "Publication" field
+        cy.get('button[data-test="lookup-button"]').click();
+
+        // A popup modal window should be visible
+        cy.get('ds-dynamic-lookup-relation-modal').should('be.visible');
+
+        // Popup modal should also pass accessibility tests
+        //testA11y('ds-dynamic-lookup-relation-modal');
+        testA11y({
+            include: ['ds-dynamic-lookup-relation-modal'],
+            exclude: [
+                ['ul.nav-tabs'] // Tabs at top of model have several issues which seem to be caused by ng-bootstrap
+            ],
+        });
+
+        // Close popup window
+        cy.get('ds-dynamic-lookup-relation-modal button.close').click();
+
+        // Back on the form, click the discard button to remove new submission
+        // Clicking it will display a confirmation, which we will confirm with another click
+        cy.get('button#discard').click();
+        cy.get('button#discard_submit').click();
+    });
 });

cypress/plugins/index.ts

@@ -1,5 +1,11 @@
 const fs = require('fs');
 
+// These two global variables are used to store information about the REST API used
+// by these e2e tests. They are filled out prior to running any tests in the before()
+// method of e2e.ts. They can then be accessed by any tests via the getters below.
+let REST_BASE_URL: string;
+let REST_DOMAIN: string;
+
 // Plugins enable you to tap into, modify, or extend the internal behavior of Cypress
 // For more info, visit https://on.cypress.io/plugins-api
 module.exports = (on, config) => {
@@ -30,6 +36,24 @@ module.exports = (on, config) => {
             }
 
             return null;
+        },
+        // Save value of REST Base URL, looked up before all tests.
+        // This allows other tests to use it easily via getRestBaseURL() below.
+        saveRestBaseURL(url: string) {
+            return (REST_BASE_URL = url);
+        },
+        // Retrieve currently saved value of REST Base URL
+        getRestBaseURL() {
+            return REST_BASE_URL ;
+        },
+        // Save value of REST Domain, looked up before all tests.
+        // This allows other tests to use it easily via getRestBaseDomain() below.
+        saveRestBaseDomain(domain: string) {
+            return (REST_DOMAIN = domain);
+        },
+        // Retrieve currently saved value of REST Domain
+        getRestBaseDomain() {
+            return REST_DOMAIN ;
         }
     });
 };

cypress/support/commands.ts

@@ -5,11 +5,7 @@
 
 import { AuthTokenInfo, TOKENITEM } from 'src/app/core/auth/models/auth-token-info.model';
 import { DSPACE_XSRF_COOKIE, XSRF_REQUEST_HEADER } from 'src/app/core/xsrf/xsrf.constants';
-
+import { v4 as uuidv4 } from 'uuid';
-// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL
-// from the Angular UI's config.json. See 'login()'.
-export const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server';
-export const FALLBACK_TEST_REST_DOMAIN = 'localhost';
 
 // Declare Cypress namespace to help with Intellisense & code completion in IDEs
 // ALL custom commands MUST be listed here for code completion to work
@@ -41,6 +37,13 @@ declare global {
              * @param dsoType type of DSpace Object (e.g. "item", "collection", "community")
              */
             generateViewEvent(uuid: string, dsoType: string): typeof generateViewEvent;
+
+            /**
+             * Create a new CSRF token and add to required Cookie. CSRF Token is returned
+             * in chainable in order to allow it to be sent also in required CSRF header.
+             * @returns Chainable reference to allow CSRF token to also be sent in header.
+             */
+            createCSRFCookie(): Chainable<any>;
         }
     }
 }
@@ -54,35 +57,10 @@ declare global {
  * @param password password to login as
  */
 function login(email: string, password: string): void {
-    // Cypress doesn't have access to the running application in Node.js.
+    // Create a fake CSRF cookie/token to use in POST
-    // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+    cy.createCSRFCookie().then((csrfToken: string) => {
-    // Instead, we'll read our running application's config.json, which contains the configs &
+        // get our REST API's base URL, also needed for POST
-    // is regenerated at runtime each time the Angular UI application starts up.
+        cy.task('getRestBaseURL').then((baseRestUrl: string) => {
-    cy.task('readUIConfig').then((str: string) => {
-        // Parse config into a JSON object
-        const config = JSON.parse(str);
-
-        // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found.
-        let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
-        if (!config.rest.baseUrl) {
-            console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
-        } else {
-            //console.log("Found 'rest.baseUrl' in config.json. Using this REST API for login: ".concat(config.rest.baseUrl));
-            baseRestUrl = config.rest.baseUrl;
-        }
-
-        // Now find domain of our REST API, again with a fallback.
-        let baseDomain = FALLBACK_TEST_REST_DOMAIN;
-        if (!config.rest.host) {
-            console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
-        } else {
-            baseDomain = config.rest.host;
-        }
-
-        // Create a fake CSRF Token.  Set it in the required server-side cookie
-        const csrfToken = 'fakeLoginCSRFToken';
-        cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
-
             // Now, send login POST request including that CSRF token
             cy.request({
                 method: 'POST',
@@ -104,9 +82,7 @@ function login(email: string, password: string): void {
                 // This ensures the UI will recognize we are logged in on next "visit()"
                 cy.setCookie(TOKENITEM, JSON.stringify(authinfo));
             });
-
+        });
-        // Remove cookie with fake CSRF token, as it's no longer needed
-        cy.clearCookie(DSPACE_XSRF_COOKIE);
     });
 }
 // Add as a Cypress command (i.e. assign to 'cy.login')
@@ -141,34 +117,10 @@ Cypress.Commands.add('loginViaForm', loginViaForm);
  * @param dsoType type of DSpace Object (e.g. "item", "collection", "community")
  */
 function generateViewEvent(uuid: string, dsoType: string): void {
-    // Cypress doesn't have access to the running application in Node.js.
+    // Create a fake CSRF cookie/token to use in POST
-    // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+    cy.createCSRFCookie().then((csrfToken: string) => {
-    // Instead, we'll read our running application's config.json, which contains the configs &
+        // get our REST API's base URL, also needed for POST
-    // is regenerated at runtime each time the Angular UI application starts up.
+        cy.task('getRestBaseURL').then((baseRestUrl: string) => {
-    cy.task('readUIConfig').then((str: string) => {
-        // Parse config into a JSON object
-        const config = JSON.parse(str);
-
-        // Find the URL of our REST API. Have a fallback ready, just in case 'rest.baseUrl' cannot be found.
-        let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
-        if (!config.rest.baseUrl) {
-            console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
-        } else {
-            baseRestUrl = config.rest.baseUrl;
-        }
-
-        // Now find domain of our REST API, again with a fallback.
-        let baseDomain = FALLBACK_TEST_REST_DOMAIN;
-        if (!config.rest.host) {
-            console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
-        } else {
-            baseDomain = config.rest.host;
-        }
-
-        // Create a fake CSRF Token.  Set it in the required server-side cookie
-        const csrfToken = 'fakeGenerateViewEventCSRFToken';
-        cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
-
             // Now, send 'statistics/viewevents' POST request including that fake CSRF token in required header
             cy.request({
                 method: 'POST',
@@ -186,11 +138,32 @@ function generateViewEvent(uuid: string, dsoType: string): void {
                 // We expect a 201 (which means statistics event was created)
                 expect(resp.status).to.eq(201);
             });
-
+        });
-        // Remove cookie with fake CSRF token, as it's no longer needed
-        cy.clearCookie(DSPACE_XSRF_COOKIE);
     });
 }
 // Add as a Cypress command (i.e. assign to 'cy.generateViewEvent')
 Cypress.Commands.add('generateViewEvent', generateViewEvent);
 
+
+/**
+ * Can be used by tests to generate a random XSRF/CSRF token and save it to
+ * the required XSRF/CSRF cookie for usage when sending POST requests or similar.
+ * The generated CSRF token is returned in a Chainable to allow it to be also sent
+ * in the CSRF HTTP Header.
+ * @returns a Cypress Chainable which can be used to get the generated CSRF Token
+ */
+function createCSRFCookie(): Cypress.Chainable {
+    // Generate a new token which is a random UUID
+    const csrfToken: string = uuidv4();
+
+    // Save it to our required cookie
+    cy.task('getRestBaseDomain').then((baseDomain: string) => {
+        // Create a fake CSRF Token.  Set it in the required server-side cookie
+        cy.setCookie(DSPACE_XSRF_COOKIE, csrfToken, { 'domain': baseDomain });
+    });
+
+    // return the generated token wrapped in a chainable
+    return cy.wrap(csrfToken);
+}
+// Add as a Cypress command (i.e. assign to 'cy.createCSRFCookie')
+Cypress.Commands.add('createCSRFCookie', createCSRFCookie);

cypress/support/e2e.ts

@@ -19,45 +19,54 @@ import './commands';
 // Import Cypress Axe tools for all tests
 // https://github.com/component-driven/cypress-axe
 import 'cypress-axe';
+import { DSPACE_XSRF_COOKIE } from 'src/app/core/xsrf/xsrf.constants';
+
+
+// Runs once before all tests
+before(() => {
+  // Cypress doesn't have access to the running application in Node.js.
+  // So, it's not possible to inject or load the AppConfig or environment of the Angular UI.
+  // Instead, we'll read our running application's config.json, which contains the configs &
+  // is regenerated at runtime each time the Angular UI application starts up.
+  cy.task('readUIConfig').then((str: string) => {
+    // Parse config into a JSON object
+    const config = JSON.parse(str);
+
+    // Find URL of our REST API & save to global variable via task
+    let baseRestUrl = FALLBACK_TEST_REST_BASE_URL;
+    if (!config.rest.baseUrl) {
+        console.warn("Could not load 'rest.baseUrl' from config.json. Falling back to " + FALLBACK_TEST_REST_BASE_URL);
+    } else {
+        baseRestUrl = config.rest.baseUrl;
+    }
+    cy.task('saveRestBaseURL', baseRestUrl);
+
+    // Find domain of our REST API & save to global variable via task.
+    let baseDomain = FALLBACK_TEST_REST_DOMAIN;
+    if (!config.rest.host) {
+        console.warn("Could not load 'rest.host' from config.json. Falling back to " + FALLBACK_TEST_REST_DOMAIN);
+    } else {
+        baseDomain = config.rest.host;
+    }
+    cy.task('saveRestBaseDomain', baseDomain);
+
+  });
+});
 
 // Runs once before the first test in each "block"
 beforeEach(() => {
     // Pre-agree to all Klaro cookies by setting the klaro-anonymous cookie
     // This just ensures it doesn't get in the way of matching other objects in the page.
     cy.setCookie('klaro-anonymous', '{%22authentication%22:true%2C%22preferences%22:true%2C%22acknowledgement%22:true%2C%22google-analytics%22:true%2C%22google-recaptcha%22:true}');
+
+    // Remove any CSRF cookies saved from prior tests
+    cy.clearCookie(DSPACE_XSRF_COOKIE);
 });
 
-// For better stability between tests, we visit "about:blank" (i.e. blank page) after each test.
+// NOTE: FALLBACK_TEST_REST_BASE_URL is only used if Cypress cannot read the REST API BaseURL
-// This ensures any remaining/outstanding XHR requests are killed, so they don't affect the next test.
+// from the Angular UI's config.json. See 'before()' above.
-// Borrowed from: https://glebbahmutov.com/blog/visit-blank-page-between-tests/
+const FALLBACK_TEST_REST_BASE_URL = 'http://localhost:8080/server';
-/*afterEach(() => {
+const FALLBACK_TEST_REST_DOMAIN = 'localhost';
-    cy.window().then((win) => {
-      win.location.href = 'about:blank';
-    });
-});*/
-
-
-// Global constants used in tests
-// May be overridden in our cypress.json config file using specified environment variables.
-// Default values listed here are all valid for the Demo Entities Data set available at
-// https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
-// (This is the data set used in our CI environment)
-
-// Admin account used for administrative tests
-export const TEST_ADMIN_USER = Cypress.env('DSPACE_TEST_ADMIN_USER') || 'dspacedemo+admin@gmail.com';
-export const TEST_ADMIN_PASSWORD = Cypress.env('DSPACE_TEST_ADMIN_PASSWORD') || 'dspace';
-// Community/collection/publication used for view/edit tests
-export const TEST_COLLECTION = Cypress.env('DSPACE_TEST_COLLECTION') || '282164f5-d325-4740-8dd1-fa4d6d3e7200';
-export const TEST_COMMUNITY = Cypress.env('DSPACE_TEST_COMMUNITY') || '0958c910-2037-42a9-81c7-dca80e3892b4';
-export const TEST_ENTITY_PUBLICATION = Cypress.env('DSPACE_TEST_ENTITY_PUBLICATION') || 'e98b0f27-5c19-49a0-960d-eb6ad5287067';
-// Search term (should return results) used in search tests
-export const TEST_SEARCH_TERM = Cypress.env('DSPACE_TEST_SEARCH_TERM') || 'test';
-// Collection used for submission tests
-export const TEST_SUBMIT_COLLECTION_NAME = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_NAME') || 'Sample Collection';
-export const TEST_SUBMIT_COLLECTION_UUID = Cypress.env('DSPACE_TEST_SUBMIT_COLLECTION_UUID') || '9d8334e9-25d3-4a67-9cea-3dffdef80144';
-export const TEST_SUBMIT_USER = Cypress.env('DSPACE_TEST_SUBMIT_USER') || 'dspacedemo+submit@gmail.com';
-export const TEST_SUBMIT_USER_PASSWORD = Cypress.env('DSPACE_TEST_SUBMIT_USER_PASSWORD') || 'dspace';
-
 
 // USEFUL REGEX for testing
 

docker/cli.assetstore.yml

@@ -14,13 +14,8 @@
 # Therefore, it should be kept in sync with that file
 version: "3.7"
 
-networks:
-  dspacenet:
-
 services:
   dspace-cli:
-    networks:
-      dspacenet: {}
     environment:
       # This assetstore zip is available from https://github.com/DSpace-Labs/AIP-Files/releases/tag/demo-entities-data
       - LOADASSETS=https://github.com/DSpace-Labs/AIP-Files/releases/download/demo-entities-data/assetstore.tar.gz

docker/cli.yml

@@ -13,7 +13,13 @@
 #
 # Therefore, it should be kept in sync with that file
 version: "3.7"
-
+networks:
+  # Default to using network named 'dspacenet' from docker-compose-rest.yml.
+  # Its full name will be prepended with the project name (e.g. "-p d7" means it will be named "d7_dspacenet")
+  # If COMPOSITE_PROJECT_NAME is missing, default value will be "docker" (name of folder this file is in)
+  default:
+    name: ${COMPOSE_PROJECT_NAME:-docker}_dspacenet
+    external: true
 services:
   dspace-cli:
     image: "${DOCKER_OWNER:-dspace}/dspace-cli:${DSPACE_VER:-latest}"
@@ -30,16 +36,12 @@ services:
       # solr.server: Ensure we are using the 'dspacesolr' image for Solr
       solr__P__server: http://dspacesolr:8983/solr
     volumes:
-    - "assetstore:/dspace/assetstore"
+    # Keep DSpace assetstore directory between reboots
+    - assetstore:/dspace/assetstore
     entrypoint: /dspace/bin/dspace
     command: help
-    networks:
-      - dspacenet
     tty: true
     stdin_open: true
 
 volumes:
   assetstore:
-
-networks:
-  dspacenet:

docker/docker-compose-ci.yml

@@ -33,11 +33,11 @@ services:
       # Tell Statistics to commit all views immediately instead of waiting on Solr's autocommit.
       # This allows us to generate statistics in e2e tests so that statistics pages can be tested thoroughly.
       solr__D__statistics__P__autoCommit: 'false'
+    image: "${DOCKER_OWNER:-dspace}/dspace:${DSPACE_VER:-latest-test}"
     depends_on:
     - dspacedb
-    image: dspace/dspace:latest-test
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8080
       target: 8080
@@ -45,8 +45,6 @@ services:
     tty: true
     volumes:
     - assetstore:/dspace/assetstore
-    # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below)
-    - solr_configs:/dspace/solr
     # Ensure that the database is ready BEFORE starting tomcat
     # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
     # 2. Then, run database migration to init database tables (including any out-of-order ignored migrations, if any)
@@ -70,21 +68,18 @@ services:
       PGDATA: /pgdata
     image: dspace/dspace-postgres-pgcrypto:loadsql
     networks:
-      dspacenet:
+      - dspacenet
     stdin_open: true
     tty: true
     volumes:
+     # Keep Postgres data directory between reboots
     - pgdata:/pgdata
   # DSpace Solr container
   dspacesolr:
     container_name: dspacesolr
-    # Uses official Solr image at https://hub.docker.com/_/solr/
+    image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
-    image: solr:8.11-slim
-    # Needs main 'dspace' container to start first to guarantee access to solr_configs
-    depends_on:
-    - dspace
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8983
       target: 8983
@@ -92,9 +87,6 @@ services:
     tty: true
     working_dir: /var/solr/data
     volumes:
-    # Mount our "solr_configs" volume available under the Solr's configsets folder (in a 'dspace' subfolder)
-    # This copies the Solr configs from main 'dspace' container into 'dspacesolr' via that volume
-    - solr_configs:/opt/solr/server/solr/configsets/dspace
     # Keep Solr data directory between reboots
     - solr_data:/var/solr/data
     # Initialize all DSpace Solr cores using the mounted configsets (see above), then start Solr
@@ -103,14 +95,18 @@ services:
     - '-c'
     - |
       init-var-solr
-      precreate-core authority /opt/solr/server/solr/configsets/dspace/authority
+      precreate-core authority /opt/solr/server/solr/configsets/authority
-      precreate-core oai /opt/solr/server/solr/configsets/dspace/oai
+      cp -r /opt/solr/server/solr/configsets/authority/* authority
-      precreate-core search /opt/solr/server/solr/configsets/dspace/search
+      precreate-core oai /opt/solr/server/solr/configsets/oai
-      precreate-core statistics /opt/solr/server/solr/configsets/dspace/statistics
+      cp -r /opt/solr/server/solr/configsets/oai/* oai
+      precreate-core search /opt/solr/server/solr/configsets/search
+      cp -r /opt/solr/server/solr/configsets/search/* search
+      precreate-core statistics /opt/solr/server/solr/configsets/statistics
+      cp -r /opt/solr/server/solr/configsets/statistics/* statistics
+      precreate-core qaevent /opt/solr/server/solr/configsets/qaevent
+      cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       exec solr -f
 volumes:
   assetstore:
   pgdata:
   solr_data:
-  # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above)
-  solr_configs:

docker/docker-compose-rest.yml

@@ -43,7 +43,7 @@ services:
     depends_on:
     - dspacedb
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8080
       target: 8080
@@ -51,8 +51,6 @@ services:
     tty: true
     volumes:
     - assetstore:/dspace/assetstore
-    # Mount DSpace's solr configs to a volume, so that we can share to 'dspacesolr' container (see below)
-    - solr_configs:/dspace/solr
     # Ensure that the database is ready BEFORE starting tomcat
     # 1. While a TCP connection to dspacedb port 5432 is not available, continue to sleep
     # 2. Then, run database migration to init database tables
@@ -69,25 +67,23 @@ services:
     container_name: dspacedb
     environment:
       PGDATA: /pgdata
-    image: dspace/dspace-postgres-pgcrypto
+    image: "${DOCKER_OWNER:-dspace}/dspace-postgres-pgcrypto:${DSPACE_VER:-latest}"
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 5432
       target: 5432
     stdin_open: true
     tty: true
     volumes:
+    # Keep Postgres data directory between reboots
     - pgdata:/pgdata
   # DSpace Solr container  
   dspacesolr:
     container_name: dspacesolr
     image: "${DOCKER_OWNER:-dspace}/dspace-solr:${DSPACE_VER:-latest}"
-    # Needs main 'dspace' container to start first to guarantee access to solr_configs
-    depends_on:
-    - dspace
     networks:
-      dspacenet:
+      - dspacenet
     ports:
     - published: 8983
       target: 8983
@@ -115,10 +111,10 @@ services:
       cp -r /opt/solr/server/solr/configsets/search/* search
       precreate-core statistics /opt/solr/server/solr/configsets/statistics
       cp -r /opt/solr/server/solr/configsets/statistics/* statistics
+      precreate-core qaevent /opt/solr/server/solr/configsets/qaevent
+      cp -r /opt/solr/server/solr/configsets/qaevent/* qaevent
       exec solr -f
 volumes:
   assetstore:
   pgdata:
   solr_data:
-  # Special volume used to share Solr configs from 'dspace' to 'dspacesolr' container (see above)
-  solr_configs:

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

@@ -1,4 +1,5 @@
 <div class="container">
+  <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
   <ds-bulk-access-browse [listId]="listId"></ds-bulk-access-browse>
   <div class="clearfix mb-3"></div>
   <ds-bulk-access-settings #dsBulkSettings ></ds-bulk-access-settings>

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

@@ -201,7 +201,7 @@ export class EPeopleRegistryComponent implements OnInit, OnDestroy {
   deleteEPerson(ePerson: EPerson) {
     if (hasValue(ePerson.id)) {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = ePerson;
+      modalRef.componentInstance.name = this.dsoNameService.getName(ePerson);
       modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
       modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
       modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';

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

@@ -478,7 +478,7 @@ export class EPersonFormComponent implements OnInit, OnDestroy {
       take(1),
       switchMap((eperson: EPerson) => {
         const modalRef = this.modalService.open(ConfirmationModalComponent);
-        modalRef.componentInstance.dso = eperson;
+        modalRef.componentInstance.name = this.dsoNameService.getName(eperson);
         modalRef.componentInstance.headerLabel = 'confirmation-modal.delete-eperson.header';
         modalRef.componentInstance.infoLabel = 'confirmation-modal.delete-eperson.info';
         modalRef.componentInstance.cancelLabel = 'confirmation-modal.delete-eperson.cancel';

src/app/access-control/group-registry/group-form/group-form.component.ts

@@ -420,7 +420,7 @@ export class GroupFormComponent implements OnInit, OnDestroy {
   delete() {
     this.groupDataService.getActiveGroup().pipe(take(1)).subscribe((group: Group) => {
       const modalRef = this.modalService.open(ConfirmationModalComponent);
-      modalRef.componentInstance.dso = group;
+      modalRef.componentInstance.name = this.dsoNameService.getName(group);
       modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-group.modal.header';
       modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-group.modal.info';
       modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-group.modal.cancel';

src/app/access-control/group-registry/group-form/members-list/members-list.component.html

@@ -24,8 +24,7 @@
         <tr *ngFor="let eperson of (ePeopleMembersOfGroup | async)?.page">
           <td class="align-middle">{{eperson.id}}</td>
           <td class="align-middle">
-            <a (click)="ePersonDataService.startEditingNewEPerson(eperson)"
+            <a [routerLink]="getEPersonEditRoute(eperson.id)">
-               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
               {{ dsoNameService.getName(eperson) }}
             </a>
           </td>
@@ -106,8 +105,7 @@
         <tr *ngFor="let eperson of (ePeopleSearch | async)?.page">
           <td class="align-middle">{{eperson.id}}</td>
           <td class="align-middle">
-            <a (click)="ePersonDataService.startEditingNewEPerson(eperson)"
+            <a [routerLink]="getEPersonEditRoute(eperson.id)">
-               [routerLink]="[ePersonDataService.getEPeoplePageRouterLink()]">
               {{ dsoNameService.getName(eperson) }}
             </a>
           </td>

src/app/access-control/group-registry/group-form/members-list/members-list.component.spec.ts

@@ -68,9 +68,6 @@ describe('MembersListComponent', () => {
       clearLinkRequests() {
         // empty
       },
-      getEPeoplePageRouterLink(): string {
-        return '/access-control/epeople';
-      }
     };
     groupsDataServiceStub = {
       activeGroup: activeGroup,

src/app/access-control/group-registry/group-form/members-list/members-list.component.ts

@@ -23,6 +23,7 @@ import { NotificationsService } from '../../../../shared/notifications/notificat
 import { PaginationComponentOptions } from '../../../../shared/pagination/pagination-component-options.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
+import { getEPersonEditRoute } from '../../../access-control-routing-paths';
 
 /**
  * Keys to keep track of specific subscriptions
@@ -131,6 +132,8 @@ export class MembersListComponent implements OnInit, OnDestroy {
   // current active group being edited
   groupBeingEdited: Group;
 
+  readonly getEPersonEditRoute = getEPersonEditRoute;
+
   constructor(
     protected groupDataService: GroupDataService,
     public ePersonDataService: EPersonDataService,

src/app/admin/admin-import-batch-page/batch-import-page.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h2 id="header">{{'admin.batch-import.page.header' | translate}}</h2>
+  <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   <p>{{'admin.batch-import.page.help' | translate}}</p>
   <p *ngIf="dso">
     selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;

src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html

@@ -19,7 +19,7 @@
           <table id="formats" class="table table-striped table-hover">
             <thead>
             <tr>
-              <th scope="col" [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"></th>
+              <th scope="col"><span class="sr-only">{{'admin.registries.bitstream-formats.table.selected' | translate}}</span></th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
               <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
@@ -35,6 +35,7 @@
                          [checked]="isSelected(bitstreamFormat) | async"
                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
                   >
+                  <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}}</span>
                 </label>
               </td>
               <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>

src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html

@@ -2,7 +2,7 @@
     <div class="metadata-registry row">
         <div class="col-12">
 
-            <h2 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h2>
+            <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h1>
 
             <p id="description" class="pb-2">{{'admin.registries.metadata.description' | translate}}</p>
 
@@ -19,7 +19,7 @@
                     <table id="metadata-schemas" class="table table-striped table-hover">
                         <thead>
                         <tr>
-                            <th scope="col"></th>
+                            <th scope="col"><span class="sr-only">{{'admin.registries.metadata.schemas.table.selected' | translate}}</span></th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.id' | translate}}</th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.namespace' | translate}}</th>
                             <th scope="col">{{'admin.registries.metadata.schemas.table.name' | translate}}</th>
@@ -34,6 +34,7 @@
                                            [checked]="isSelected(schema) | async"
                                            (change)="selectMetadataSchema(schema, $event)"
                                     >
+                                    <span class="sr-only">{{((isSelected(schema) | async) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
                                 </label>
                             </td>
                             <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>

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

@@ -1,11 +1,11 @@
 <div *ngIf="registryService.getActiveMetadataSchema() | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
-    <h4>{{messagePrefix + '.create' | translate}}</h4>
+    <h2>{{messagePrefix + '.create' | translate}}</h2>
 </ng-template>
 
 <ng-template #editheader>
-    <h4>{{messagePrefix + '.edit' | translate}}</h4>
+    <h2>{{messagePrefix + '.edit' | translate}}</h2>
 </ng-template>
 
 <ds-form [formId]="formId"

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

@@ -1,11 +1,11 @@
 <div *ngIf="registryService.getActiveMetadataField() | async; then editheader; else createHeader"></div>
 
 <ng-template #createHeader>
-    <h4>{{messagePrefix + '.create' | translate}}</h4>
+    <h2>{{messagePrefix + '.create' | translate}}</h2>
 </ng-template>
 
 <ng-template #editheader>
-    <h4>{{messagePrefix + '.edit' | translate}}</h4>
+    <h2>{{messagePrefix + '.edit' | translate}}</h2>
 </ng-template>
 
 <ds-form [formId]="formId"

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

@@ -2,7 +2,7 @@
   <div class="metadata-schema row">
     <div class="col-12" *ngVar="(metadataSchema$ | async) as schema">
 
-      <h2 id="header" class="border-bottom pb-2">{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"</h2>
+      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.schema.head' | translate}}: "{{schema?.prefix}}"</h1>
 
       <p id="description" class="pb-2">{{'admin.registries.schema.description' | translate:{ namespace: schema?.namespace } }}</p>
 
@@ -10,7 +10,7 @@
         [metadataSchema]="schema"
         (submitForm)="forceUpdateFields()"></ds-metadata-field-form>
 
-      <h3>{{'admin.registries.schema.fields.head' | translate}}</h3>
+      <h2>{{'admin.registries.schema.fields.head' | translate}}</h2>
 
       <ng-container *ngVar="(metadataFields$ | async)?.payload as fields">
         <ds-pagination
@@ -24,7 +24,7 @@
             <table id="metadata-fields" class="table table-striped table-hover">
               <thead>
               <tr>
-                <th></th>
+                <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
                 <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
                 <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
@@ -33,12 +33,11 @@
               <tbody>
               <tr *ngFor="let field of fields?.page"
                   [ngClass]="{'table-primary' : isActive(field) | async}">
-                <td>
+                <td *ngVar="(isSelected(field) | async) as selected">
-                  <label class="mb-0">
                   <input type="checkbox"
-                           [checked]="isSelected(field) | async"
+                         [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
+                         [checked]="selected"
                          (change)="selectMetadataField(field, $event)">
-                  </label>
                 </td>
                 <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
                 <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>

src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/workspace-item-admin-workflow-actions.component.ts

@@ -124,7 +124,7 @@ export class WorkspaceItemAdminWorkflowActionsComponent implements OnInit {
    */
   deleteSupervisionOrder(supervisionOrderEntry: SupervisionOrderListEntry) {
     const modalRef = this.modalService.open(ConfirmationModalComponent);
-    modalRef.componentInstance.dso = supervisionOrderEntry.group;
+    modalRef.componentInstance.name = this.dsoNameService.getName(supervisionOrderEntry.group);
     modalRef.componentInstance.headerLabel = this.messagePrefix + '.delete-supervision.modal.header';
     modalRef.componentInstance.infoLabel = this.messagePrefix + '.delete-supervision.modal.info';
     modalRef.componentInstance.cancelLabel = this.messagePrefix + '.delete-supervision.modal.cancel';

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

@@ -6,7 +6,7 @@
       <p>{{'collection.edit.item-mapper.description' | translate}}</p>
 
       <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <li [ngbNavItem]="'browseTab'" role="presentation">
+        <li [ngbNavItem]="'browseTab'" role="presentation" data-test="browseTab">
           <a ngbNavLink>{{'collection.edit.item-mapper.tabs.browse' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="mt-2">
@@ -23,7 +23,7 @@
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'" role="presentation">
+        <li [ngbNavItem]="'mapTab'" role="presentation" data-test="mapTab">
           <a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">

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

@@ -13,7 +13,7 @@
                   <!-- Collection logo -->
                   <ds-comcol-page-logo *ngIf="logoRD$"
                                    [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
+                                   [alternateText]="'collection.logo' | translate">
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->

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

@@ -1,17 +1,17 @@
 <div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
-  <label>{{ 'collection.edit.template.label' | translate}}</label>
+  <span class="d-inline-block mb-2">{{ 'collection.edit.template.label' | translate}}</span>
   <div class="button-row space-children-mr">
     <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
-      <i class="fas fa-plus"></i>
+      <i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
     </button>
     <button *ngIf="itemTemplateRD?.payload" class="btn btn-danger" (click)="deleteItemTemplate()">
-      <i class="fas fa-trash-alt"></i>
+      <i class="fas fa-trash-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.delete-button" | translate}}</span>
     </button>
     <button *ngIf="itemTemplateRD?.payload" class="btn btn-primary"
             [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/itemtemplate'">
-      <i class="fas fa-edit"></i>
+      <i class="fas fa-edit" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.edit-button" | translate}}</span>
     </button>
   </div>

src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html

@@ -1,6 +1,6 @@
 <div *ngVar="(contentSource$ |async) as contentSource">
     <div class="container-fluid space-children-mr" *ngIf="shouldShow">
-        <h4>{{ 'collection.source.controls.head' | translate }}</h4>
+        <h3>{{ 'collection.source.controls.head' | translate }}</h3>
         <div>
             <span class="font-weight-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
             <span>{{contentSource?.harvestStatus}}</span>

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

@@ -26,7 +26,7 @@
                for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
     </div>
     <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
-    <h4 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h4>
+    <h3 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h3>
 </div>
 <div class="row">
     <ds-form *ngIf="formGroup && contentSource && (contentSource?.harvestType !== harvestTypeNone)"

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

@@ -4,9 +4,9 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                  class="example-tree-node show-more-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
+        <span class="fa fa-chevron-right"></span>
-      </button>
+      </span>
       <div class="align-middle pt-2">
         <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
            class="btn btn-outline-primary btn-sm" role="button">
@@ -24,20 +24,21 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle
+      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
-              [title]="'toggle ' + dsoNameService.getName(node.payload)"
+              [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
-              [attr.aria-label]="'toggle ' + dsoNameService.getName(node.payload)"
               (click)="toggleExpanded(node)"
-              [ngClass]="(hasChild(null, node)| async) ? 'visible' : 'invisible'"
+              data-test="expand-button">
-              [attr.data-test]="(hasChild(null, node)| async) ? 'expand-button' : ''">
         <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>
       </button>
+      <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
+      <span *ngIf="!(hasChild(null, node) | async)" aria-hidden="true" class="btn btn-default invisible">
+        <span class="fa fa-chevron-right"></span>
+      </span>
       <div class="d-flex flex-row">
         <span class="align-middle pt-2 lead">
-          <a [routerLink]="node.route" class="lead">
+          <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
-            {{ 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">{{node.payload.archivedItemsCount}}</span>
         </span>
@@ -46,10 +47,9 @@
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
         <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
+          <span aria-hidden="true" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+            <span class="fa fa-chevron-right"></span>
-                  aria-hidden="true"></span>
+          </span>
-          </button>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
             <span>{{node.payload.shortDescription}}</span>
           </ds-truncatable-part>
@@ -58,10 +58,9 @@
     </ds-truncatable>
     <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
          cdkTreeNodePadding>
-      <button type="button" class="btn btn-default invisible">
+      <span aria-hidden="true" class="btn btn-default invisible">
-        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+        <span class="fa fa-chevron-right"></span>
-              aria-hidden="true"></span>
+      </span>
-      </button>
       <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
     </div>
   </cdk-tree-node>
@@ -69,22 +68,19 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
                  class="example-tree-node childless-node">
     <div class="btn-group">
-      <button type="button" class="btn btn-default" cdkTreeNodeToggle>
+      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
-        <span class="fa fa-chevron-right invisible" aria-hidden="true"></span>
+        <span class="fa fa-chevron-right"></span>
-      </button>
+      </span>
       <h6 class="align-middle pt-2">
-        <a [routerLink]="node.route" class="lead">
+        <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
-          {{ dsoNameService.getName(node.payload) }}
-        </a>
       </h6>
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
         <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <button type="button" class="btn btn-default invisible">
+          <span aria-hidden="true" class="btn btn-default invisible">
-            <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+            <span class="fa fa-chevron-right"></span>
-                  aria-hidden="true"></span>
+          </span>
-          </button>
           <ds-truncatable-part [id]="node.id" [minLines]="3">
             <span>{{node.payload.shortDescription}}</span>
           </ds-truncatable-part>

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

@@ -0,0 +1,4 @@
+::ng-deep .fa-chevron-right::before {
+  display: block;
+  width: 16px;
+}

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

@@ -5,7 +5,7 @@ import { CommunityListService, showMoreFlatNode, toFlatNode } from '../community
 import { CdkTreeModule } from '@angular/cdk/tree';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Community } from '../../core/shared/community.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -300,12 +300,14 @@ describe('CommunityListComponent', () => {
 
   describe('second top community node is expanded and has more children (collections) than page size of collection', () => {
     describe('children of second top com are added (page-limited pageSize 2)', () => {
-      let allNodes;
+      let allNodes: DebugElement[];
       beforeEach(fakeAsync(() => {
-        const chevronExpand = fixture.debugElement.queryAll(By.css('.expandable-node button'));
+        const toggleButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.expandable-node button'));
-        const chevronExpandSpan = fixture.debugElement.queryAll(By.css('.expandable-node button span'));
+        const toggleButtonText: DebugElement = toggleButtons[1].query(By.css('span'));
-        if (chevronExpandSpan[1].nativeElement.classList.contains('fa-chevron-right')) {
+        expect(toggleButtonText).not.toBeNull();
-          chevronExpand[1].nativeElement.click();
+
+        if (toggleButtonText.nativeElement.classList.contains('fa-chevron-right')) {
+          toggleButtons[1].nativeElement.click();
           tick();
           fixture.detectChanges();
         }
@@ -315,17 +317,18 @@ describe('CommunityListComponent', () => {
         allNodes = [...expandableNodesFound, ...childlessNodesFound];
       }));
       it('tree contains 2 (page-limited) top com, 2 (page-limited) coll of 2nd top com, a show more for those page-limited coll and show more for page-limited top com', () => {
-        mockTopFlatnodesUnexpanded.slice(0, 2).map((topFlatnode: FlatNode) => {
+        const allNodeNames: string[] = allNodes.map((node: DebugElement) => node.nativeElement.innerText.trim());
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === topFlatnode.name);
-          })).toBeTruthy();
-        });
-        mockCollectionsPage1.map((coll) => {
-          expect(allNodes.find((foundEl) => {
-            return (foundEl.nativeElement.textContent.trim() === coll.name);
-          })).toBeTruthy();
-        });
         expect(allNodes.length).toEqual(4);
+        const flatNodes: string[] = mockTopFlatnodesUnexpanded.slice(0, 2).map((flatNode: FlatNode) => flatNode.name);
+        for (const flatNode of flatNodes) {
+          expect(allNodeNames).toContain(flatNode);
+        }
+        expect(flatNodes.length).toBe(2);
+        const page1CollectionNames: string[] = mockCollectionsPage1.map((collection: Collection) => collection.name);
+        for (const collectionName of page1CollectionNames) {
+          expect(allNodeNames).toContain(collectionName);
+        }
+        expect(page1CollectionNames.length).toBe(2);
         const showMoreEl = fixture.debugElement.queryAll(By.css('.show-more-node'));
         expect(showMoreEl.length).toEqual(2);
       });

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

@@ -19,6 +19,7 @@ import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 @Component({
   selector: 'ds-community-list',
   templateUrl: './community-list.component.html',
+  styleUrls: ['./community-list.component.scss'],
 })
 export class CommunityListComponent implements OnInit, OnDestroy {
 

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

@@ -7,7 +7,7 @@
           <!-- Community name -->
           <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
           <!-- Community logo -->
-          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
+          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
           </ds-comcol-page-logo>
           <!-- Handle -->
           <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">

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

@@ -7,11 +7,11 @@
                 <div class="form-group row">
                     <div class="col text-right space-children-mr">
                         <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
-                            <i class="fas fa-times"></i> {{'community.delete.cancel' | translate}}
+                            <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
                         </button>
                         <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
-                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'community.delete.processing' | translate}}</span>
+                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
-                            <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'community.delete.confirm' | translate}}</span>
+                            <span *ngIf="!(processing$ | async)"><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
                         </button>
                     </div>
                 </div>

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

@@ -119,7 +119,7 @@ export class AuthService {
         if (hasValue(rd.payload) && rd.payload.authenticated) {
           return rd.payload;
         } else {
-          throw (new Error('Invalid email or password'));
+          throw (new Error('auth.errors.invalid-user'));
         }
       }));
 

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

@@ -95,6 +95,7 @@ describe('BaseDataService', () => {
     remoteDataMocks = {
       RequestPending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
       ResponsePending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+      ResponsePendingStale: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePendingStale, undefined, undefined, undefined),
       Success: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Success, undefined, payload, statusCodeSuccess),
       SuccessStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.SuccessStale, undefined, payload, statusCodeSuccess),
       Error: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Error, errorMessage, undefined, statusCodeError),
@@ -303,19 +304,21 @@ describe('BaseDataService', () => {
 
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
-          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.SuccessStale,
+            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.Success,
+            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.SuccessStale,
+            e: remoteDataMocks.ResponsePending,
+            f: remoteDataMocks.Success,
+            g: remoteDataMocks.SuccessStale,
           }));
-          const expected = '--b-c-d-e';
+          const expected = '------d-e-f-g';
           const values = {
-            b: remoteDataMocks.RequestPending,
+            d: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
+            e: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
+            f: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            g: remoteDataMocks.SuccessStale,
           };
 
           expectObservable(service.findByHref(selfLink, true, true, ...linksToFollow)).toBe(expected, values);
@@ -354,19 +357,21 @@ describe('BaseDataService', () => {
 
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
-          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e', {
+          spyOn(rdbService, 'buildSingle').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.SuccessStale,
+            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.Success,
+            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.SuccessStale,
+            e: remoteDataMocks.ResponsePending,
+            f: remoteDataMocks.Success,
+            g: remoteDataMocks.SuccessStale,
           }));
-          const expected = '--b-c-d-e';
+          const expected = '------d-e-f-g';
           const values = {
-            b: remoteDataMocks.RequestPending,
+            d: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
+            e: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
+            f: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            g: remoteDataMocks.SuccessStale,
           };
 
           expectObservable(service.findByHref(selfLink, false, true, ...linksToFollow)).toBe(expected, values);
@@ -487,19 +492,21 @@ describe('BaseDataService', () => {
 
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
-          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.SuccessStale,
+            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.Success,
+            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.SuccessStale,
+            e: remoteDataMocks.ResponsePending,
+            f: remoteDataMocks.Success,
+            g: remoteDataMocks.SuccessStale,
           }));
-          const expected = '--b-c-d-e';
+          const expected = '------d-e-f-g';
           const values = {
-            b: remoteDataMocks.RequestPending,
+            d: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
+            e: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
+            f: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            g: remoteDataMocks.SuccessStale,
           };
 
           expectObservable(service.findListByHref(selfLink, findListOptions, true, true, ...linksToFollow)).toBe(expected, values);
@@ -538,21 +545,24 @@ describe('BaseDataService', () => {
 
       it(`should not emit a cached stale RemoteData, but only start emitting after the state first changes to RequestPending`, () => {
         testScheduler.run(({ cold, expectObservable }) => {
-          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e', {
+          spyOn(rdbService, 'buildList').and.returnValue(cold('a-b-c-d-e-f-g', {
-            a: remoteDataMocks.SuccessStale,
+            a: remoteDataMocks.ResponsePendingStale,
-            b: remoteDataMocks.RequestPending,
+            b: remoteDataMocks.SuccessStale,
-            c: remoteDataMocks.ResponsePending,
+            c: remoteDataMocks.ErrorStale,
-            d: remoteDataMocks.Success,
+            d: remoteDataMocks.RequestPending,
-            e: remoteDataMocks.SuccessStale,
+            e: remoteDataMocks.ResponsePending,
+            f: remoteDataMocks.Success,
+            g: remoteDataMocks.SuccessStale,
           }));
-          const expected = '--b-c-d-e';
+          const expected = '------d-e-f-g';
           const values = {
-            b: remoteDataMocks.RequestPending,
+            d: remoteDataMocks.RequestPending,
-            c: remoteDataMocks.ResponsePending,
+            e: remoteDataMocks.ResponsePending,
-            d: remoteDataMocks.Success,
+            f: remoteDataMocks.Success,
-            e: remoteDataMocks.SuccessStale,
+            g: remoteDataMocks.SuccessStale,
           };
 
+
           expectObservable(service.findListByHref(selfLink, findListOptions, false, true, ...linksToFollow)).toBe(expected, values);
         });
       });

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

@@ -273,7 +273,7 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
       // 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<T>) => useCachedVersionIfAvailable ? rd.isStale : rd.hasCompleted),
+      skipWhile((rd: RemoteData<T>) => rd.isStale || (!useCachedVersionIfAvailable && rd.hasCompleted)),
       this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findByHref(href$, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow)),
     );
@@ -307,7 +307,7 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
       // 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<PaginatedList<T>>) => useCachedVersionIfAvailable ? rd.isStale : rd.hasCompleted),
+      skipWhile((rd: RemoteData<PaginatedList<T>>) => rd.isStale || (!useCachedVersionIfAvailable && rd.hasCompleted)),
       this.reRequestStaleRemoteData(reRequestOnStale, () =>
         this.findListByHref(href$, options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow)),
     );

src/app/core/data/request-entry-state.model.spec.ts

@@ -0,0 +1,186 @@
+import {
+  isRequestPending,
+  isError,
+  isSuccess,
+  isErrorStale,
+  isSuccessStale,
+  isResponsePending,
+  isResponsePendingStale,
+  isLoading,
+  isStale,
+  hasFailed,
+  hasSucceeded,
+  hasCompleted,
+  RequestEntryState
+} from './request-entry-state.model';
+
+describe(`isRequestPending`, () => {
+  it(`should only return true if the given state is RequestPending`, () => {
+    expect(isRequestPending(RequestEntryState.RequestPending)).toBeTrue();
+
+    expect(isRequestPending(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isRequestPending(RequestEntryState.Error)).toBeFalse();
+    expect(isRequestPending(RequestEntryState.Success)).toBeFalse();
+    expect(isRequestPending(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isRequestPending(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isRequestPending(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isError`, () => {
+  it(`should only return true if the given state is Error`, () => {
+    expect(isError(RequestEntryState.Error)).toBeTrue();
+
+    expect(isError(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isError(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isError(RequestEntryState.Success)).toBeFalse();
+    expect(isError(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isError(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isError(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isSuccess`, () => {
+  it(`should only return true if the given state is Success`, () => {
+    expect(isSuccess(RequestEntryState.Success)).toBeTrue();
+
+    expect(isSuccess(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isSuccess(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isSuccess(RequestEntryState.Error)).toBeFalse();
+    expect(isSuccess(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isSuccess(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isSuccess(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isErrorStale`, () => {
+  it(`should only return true if the given state is ErrorStale`, () => {
+    expect(isErrorStale(RequestEntryState.ErrorStale)).toBeTrue();
+
+    expect(isErrorStale(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isErrorStale(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isErrorStale(RequestEntryState.Error)).toBeFalse();
+    expect(isErrorStale(RequestEntryState.Success)).toBeFalse();
+    expect(isErrorStale(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isErrorStale(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isSuccessStale`, () => {
+  it(`should only return true if the given state is SuccessStale`, () => {
+    expect(isSuccessStale(RequestEntryState.SuccessStale)).toBeTrue();
+
+    expect(isSuccessStale(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isSuccessStale(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isSuccessStale(RequestEntryState.Error)).toBeFalse();
+    expect(isSuccessStale(RequestEntryState.Success)).toBeFalse();
+    expect(isSuccessStale(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isSuccessStale(RequestEntryState.ErrorStale)).toBeFalse();
+  });
+});
+
+describe(`isResponsePending`, () => {
+  it(`should only return true if the given state is ResponsePending`, () => {
+    expect(isResponsePending(RequestEntryState.ResponsePending)).toBeTrue();
+
+    expect(isResponsePending(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isResponsePending(RequestEntryState.Error)).toBeFalse();
+    expect(isResponsePending(RequestEntryState.Success)).toBeFalse();
+    expect(isResponsePending(RequestEntryState.ResponsePendingStale)).toBeFalse();
+    expect(isResponsePending(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isResponsePending(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isResponsePendingStale`, () => {
+  it(`should only return true if the given state is requestPending`, () => {
+    expect(isResponsePendingStale(RequestEntryState.ResponsePendingStale)).toBeTrue();
+
+    expect(isResponsePendingStale(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isResponsePendingStale(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isResponsePendingStale(RequestEntryState.Error)).toBeFalse();
+    expect(isResponsePendingStale(RequestEntryState.Success)).toBeFalse();
+    expect(isResponsePendingStale(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isResponsePendingStale(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`isLoading`, () => {
+  it(`should only return true if the given state is RequestPending, ResponsePending or ResponsePendingStale`, () => {
+    expect(isLoading(RequestEntryState.RequestPending)).toBeTrue();
+    expect(isLoading(RequestEntryState.ResponsePending)).toBeTrue();
+    expect(isLoading(RequestEntryState.ResponsePendingStale)).toBeTrue();
+
+    expect(isLoading(RequestEntryState.Error)).toBeFalse();
+    expect(isLoading(RequestEntryState.Success)).toBeFalse();
+    expect(isLoading(RequestEntryState.ErrorStale)).toBeFalse();
+    expect(isLoading(RequestEntryState.SuccessStale)).toBeFalse();
+  });
+});
+
+describe(`hasFailed`, () => {
+  describe(`when the state is loading`, () => {
+    it(`should return undefined`, () => {
+      expect(hasFailed(RequestEntryState.RequestPending)).toBeUndefined();
+      expect(hasFailed(RequestEntryState.ResponsePending)).toBeUndefined();
+      expect(hasFailed(RequestEntryState.ResponsePendingStale)).toBeUndefined();
+    });
+  });
+
+  describe(`when the state has completed`, () => {
+    it(`should only return true if the given state is Error or ErrorStale`, () => {
+      expect(hasFailed(RequestEntryState.Error)).toBeTrue();
+      expect(hasFailed(RequestEntryState.ErrorStale)).toBeTrue();
+
+      expect(hasFailed(RequestEntryState.Success)).toBeFalse();
+      expect(hasFailed(RequestEntryState.SuccessStale)).toBeFalse();
+    });
+  });
+});
+
+describe(`hasSucceeded`, () => {
+  describe(`when the state is loading`, () => {
+    it(`should return undefined`, () => {
+      expect(hasSucceeded(RequestEntryState.RequestPending)).toBeUndefined();
+      expect(hasSucceeded(RequestEntryState.ResponsePending)).toBeUndefined();
+      expect(hasSucceeded(RequestEntryState.ResponsePendingStale)).toBeUndefined();
+    });
+  });
+
+  describe(`when the state has completed`, () => {
+    it(`should only return true if the given state is Error or ErrorStale`, () => {
+      expect(hasSucceeded(RequestEntryState.Success)).toBeTrue();
+      expect(hasSucceeded(RequestEntryState.SuccessStale)).toBeTrue();
+
+      expect(hasSucceeded(RequestEntryState.Error)).toBeFalse();
+      expect(hasSucceeded(RequestEntryState.ErrorStale)).toBeFalse();
+    });
+  });
+});
+
+
+describe(`hasCompleted`, () => {
+  it(`should only return true if the given state is Error, Success, ErrorStale or SuccessStale`, () => {
+    expect(hasCompleted(RequestEntryState.Error)).toBeTrue();
+    expect(hasCompleted(RequestEntryState.Success)).toBeTrue();
+    expect(hasCompleted(RequestEntryState.ErrorStale)).toBeTrue();
+    expect(hasCompleted(RequestEntryState.SuccessStale)).toBeTrue();
+
+    expect(hasCompleted(RequestEntryState.RequestPending)).toBeFalse();
+    expect(hasCompleted(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(hasCompleted(RequestEntryState.ResponsePendingStale)).toBeFalse();
+  });
+});
+
+describe(`isStale`, () => {
+  it(`should only return true if the given state is ResponsePendingStale, SuccessStale or ErrorStale`, () => {
+    expect(isStale(RequestEntryState.ResponsePendingStale)).toBeTrue();
+    expect(isStale(RequestEntryState.SuccessStale)).toBeTrue();
+    expect(isStale(RequestEntryState.ErrorStale)).toBeTrue();
+
+    expect(isStale(RequestEntryState.RequestPending)).toBeFalse();
+    expect(isStale(RequestEntryState.ResponsePending)).toBeFalse();
+    expect(isStale(RequestEntryState.Error)).toBeFalse();
+    expect(isStale(RequestEntryState.Success)).toBeFalse();
+  });
+});

src/app/core/data/request-entry-state.model.ts

@@ -3,8 +3,9 @@ export enum RequestEntryState {
   ResponsePending = 'ResponsePending',
   Error = 'Error',
   Success = 'Success',
+  ResponsePendingStale = 'ResponsePendingStale',
   ErrorStale = 'ErrorStale',
-  SuccessStale = 'SuccessStale'
+  SuccessStale = 'SuccessStale',
 }
 
 /**
@@ -42,12 +43,21 @@ export const isSuccessStale = (state: RequestEntryState) =>
  */
 export const isResponsePending = (state: RequestEntryState) =>
   state === RequestEntryState.ResponsePending;
+
 /**
- * Returns true if the given state is RequestPending or ResponsePending,
+ * Returns true if the given state is ResponsePendingStale, false otherwise
- * false otherwise
+ */
+export const isResponsePendingStale = (state: RequestEntryState) =>
+  state === RequestEntryState.ResponsePendingStale;
+
+/**
+ * Returns true if the given state is RequestPending, RequestPendingStale, ResponsePending, or
+ * ResponsePendingStale, false otherwise
  */
 export const isLoading = (state: RequestEntryState) =>
-  isRequestPending(state) || isResponsePending(state);
+  isRequestPending(state) ||
+  isResponsePending(state) ||
+  isResponsePendingStale(state);
 
 /**
  * If isLoading is true for the given state, this method returns undefined, we can't know yet.
@@ -82,7 +92,10 @@ export const hasCompleted = (state: RequestEntryState) =>
   !isLoading(state);
 
 /**
- * Returns true if the given state is SuccessStale or ErrorStale, false otherwise
+ * Returns true if the given state is isRequestPendingStale, isResponsePendingStale, SuccessStale or
+ * ErrorStale, false otherwise
  */
 export const isStale = (state: RequestEntryState) =>
-  isSuccessStale(state) || isErrorStale(state);
+  isResponsePendingStale(state) ||
+  isSuccessStale(state) ||
+  isErrorStale(state);

src/app/core/data/request.reducer.spec.ts

@@ -48,9 +48,16 @@ describe('requestReducer', () => {
       lastUpdated: 0
     }
   };
+  const testResponsePendingState = {
+    [id1]: {
+      state: RequestEntryState.ResponsePending,
+      lastUpdated: 0
+    }
+  };
   deepFreeze(testInitState);
   deepFreeze(testSuccessState);
   deepFreeze(testErrorState);
+  deepFreeze(testResponsePendingState);
 
   it('should return the current state when no valid actions have been made', () => {
     const action = new NullAction();
@@ -91,23 +98,64 @@ describe('requestReducer', () => {
     expect(newState[id1].response).toEqual(undefined);
   });
 
-  it('should set state to Success for the given RestRequest in the state, in response to a SUCCESS action', () => {
+  describe(`in response to a SUCCESS action`, () => {
-    const state = testInitState;
+    let startState;
-
+    describe(`when the entry isn't stale`, () => {
+      beforeEach(() => {
+        startState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ResponsePending
+          })
+        });
+        deepFreeze(startState);
+      });
+      it('should set state to Success for the given RestRequest in the state', () => {
         const action = new RequestSuccessAction(id1, 200);
-    const newState = requestReducer(state, action);
+        const newState = requestReducer(startState, action);
 
         expect(newState[id1].request.uuid).toEqual(id1);
         expect(newState[id1].request.href).toEqual(link1);
         expect(newState[id1].state).toEqual(RequestEntryState.Success);
         expect(newState[id1].response.statusCode).toEqual(200);
       });
+    });
 
-  it('should set state to Error for the given RestRequest in the state, in response to an ERROR action', () => {
+    describe(`when the entry is stale`, () => {
-    const state = testInitState;
+      beforeEach(() => {
+        startState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ResponsePendingStale
+          })
+        });
+        deepFreeze(startState);
+      });
+      it('should set state to SuccessStale for the given RestRequest in the state', () => {
+        const action = new RequestSuccessAction(id1, 200);
+        const newState = requestReducer(startState, action);
 
+        expect(newState[id1].request.uuid).toEqual(id1);
+        expect(newState[id1].request.href).toEqual(link1);
+        expect(newState[id1].state).toEqual(RequestEntryState.SuccessStale);
+        expect(newState[id1].response.statusCode).toEqual(200);
+      });
+    });
+
+  });
+
+  describe(`in response to an ERROR action`, () => {
+    let startState;
+    describe(`when the entry isn't stale`, () => {
+      beforeEach(() => {
+        startState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ResponsePending
+          })
+        });
+        deepFreeze(startState);
+      });
+      it('should set state to Error for the given RestRequest in the state', () => {
         const action = new RequestErrorAction(id1, 404, 'Not Found');
-    const newState = requestReducer(state, action);
+        const newState = requestReducer(startState, action);
 
         expect(newState[id1].request.uuid).toEqual(id1);
         expect(newState[id1].request.href).toEqual(link1);
@@ -115,6 +163,30 @@ describe('requestReducer', () => {
         expect(newState[id1].response.statusCode).toEqual(404);
         expect(newState[id1].response.errorMessage).toEqual('Not Found');
       });
+    });
+
+    describe(`when the entry is stale`, () => {
+      beforeEach(() => {
+        startState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ResponsePendingStale
+          })
+        });
+        deepFreeze(startState);
+      });
+      it('should set state to ErrorStale for the given RestRequest in the state', () => {
+        const action = new RequestErrorAction(id1, 404, 'Not Found');
+        const newState = requestReducer(startState, action);
+
+        expect(newState[id1].request.uuid).toEqual(id1);
+        expect(newState[id1].request.href).toEqual(link1);
+        expect(newState[id1].state).toEqual(RequestEntryState.ErrorStale);
+        expect(newState[id1].response.statusCode).toEqual(404);
+        expect(newState[id1].response.errorMessage).toEqual('Not Found');
+      });
+
+    });
+  });
 
   it('should update the response\'s timeCompleted for the given RestRequest in the state, in response to a RESET_TIMESTAMPS action', () => {
     const update = Object.assign({}, testInitState[id1], {
@@ -145,8 +217,92 @@ describe('requestReducer', () => {
     expect(newState[id1]).toBeNull();
   });
 
+  describe(`in response to a STALE action`, () => {
+    describe(`when the entry has been removed`, () => {
+      it(`shouldn't do anything`, () => {
+        const startState = {
+          [id1]: null
+        };
+        deepFreeze(startState);
+
+        const action = new RequestStaleAction(id1);
+        const newState = requestReducer(startState, action);
+
+        expect(newState[id1]).toBeNull();
+      });
+    });
+
+    describe(`for stale entries`, () => {
+      it(`shouldn't do anything`, () => {
+        const rpsStartState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ResponsePendingStale
+          })
+        });
+        deepFreeze(rpsStartState);
+
+        const action = new RequestStaleAction(id1);
+        let newState = requestReducer(rpsStartState, action);
+
+        expect(newState[id1].state).toEqual(rpsStartState[id1].state);
+        expect(newState[id1].lastUpdated).toBe(rpsStartState[id1].lastUpdated);
+
+        const ssStartState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.SuccessStale
+          })
+        });
+
+        newState = requestReducer(ssStartState, action);
+
+        expect(newState[id1].state).toEqual(ssStartState[id1].state);
+        expect(newState[id1].lastUpdated).toBe(ssStartState[id1].lastUpdated);
+
+        const esStartState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.ErrorStale
+          })
+        });
+
+        newState = requestReducer(esStartState, action);
+
+        expect(newState[id1].state).toEqual(esStartState[id1].state);
+        expect(newState[id1].lastUpdated).toBe(esStartState[id1].lastUpdated);
+
+      });
+    });
+
+    describe(`for and entry with state: RequestPending`, () => {
+      it(`shouldn't do anything`, () => {
+        const startState = Object.assign({}, testInitState, {
+          [id1]: Object.assign({}, testInitState[id1], {
+            state: RequestEntryState.RequestPending
+          })
+        });
+
+        const action = new RequestStaleAction(id1);
+        const newState = requestReducer(startState, action);
+
+        expect(newState[id1].state).toEqual(startState[id1].state);
+        expect(newState[id1].lastUpdated).toBe(startState[id1].lastUpdated);
+
+      });
+    });
+
+    describe(`for an entry with state: ResponsePending`, () => {
+      it(`should set the state to ResponsePendingStale`, () => {
+        const state = testResponsePendingState;
+
+        const action = new RequestStaleAction(id1);
+        const newState = requestReducer(state, action);
+
+        expect(newState[id1].state).toEqual(RequestEntryState.ResponsePendingStale);
+        expect(newState[id1].lastUpdated).toBe(action.lastUpdated);
+      });
+    });
+
     describe(`for an entry with state: Success`, () => {
-    it(`should set the state to SuccessStale, in response to a STALE action`, () => {
+      it(`should set the state to SuccessStale`, () => {
         const state = testSuccessState;
 
         const action = new RequestStaleAction(id1);
@@ -158,7 +314,7 @@ describe('requestReducer', () => {
     });
 
     describe(`for an entry with state: Error`, () => {
-    it(`should set the state to ErrorStale, in response to a STALE action`, () => {
+      it(`should set the state to ErrorStale`, () => {
         const state = testErrorState;
 
         const action = new RequestStaleAction(id1);
@@ -168,5 +324,5 @@ describe('requestReducer', () => {
         expect(newState[id1].lastUpdated).toBe(action.lastUpdated);
       });
     });
-
+  });
 });

src/app/core/data/request.reducer.ts

@@ -11,7 +11,13 @@ import {
   ResetResponseTimestampsAction
 } from './request.actions';
 import { isNull } from '../../shared/empty.util';
-import { hasSucceeded, isStale, RequestEntryState } from './request-entry-state.model';
+import {
+  hasSucceeded,
+  isStale,
+  RequestEntryState,
+  isRequestPending,
+  isResponsePending
+} from './request-entry-state.model';
 import { RequestState } from './request-state.model';
 
 // Object.create(null) ensures the object has no default js properties (e.g. `__proto__`)
@@ -91,14 +97,17 @@ function executeRequest(storeState: RequestState, action: RequestExecuteAction):
  *    the new storeState, with the response added to the request
  */
 function completeSuccessRequest(storeState: RequestState, action: RequestSuccessAction): RequestState {
-  if (isNull(storeState[action.payload.uuid])) {
+  const prevEntry = storeState[action.payload.uuid];
+  if (isNull(prevEntry)) {
     // after a request has been removed it's possible pending changes still come in.
     // Don't store them
     return storeState;
   } else {
     return Object.assign({}, storeState, {
-      [action.payload.uuid]: Object.assign({}, storeState[action.payload.uuid], {
+      [action.payload.uuid]: Object.assign({}, prevEntry, {
-        state: RequestEntryState.Success,
+        // If a response comes in for a request that's already stale, still store it otherwise
+        // components that are waiting for it might freeze
+        state: isStale(prevEntry.state) ? RequestEntryState.SuccessStale : RequestEntryState.Success,
         response: {
           timeCompleted: action.payload.timeCompleted,
           lastUpdated: action.payload.timeCompleted,
@@ -124,14 +133,17 @@ function completeSuccessRequest(storeState: RequestState, action: RequestSuccess
  *    the new storeState, with the response added to the request
  */
 function completeFailedRequest(storeState: RequestState, action: RequestErrorAction): RequestState {
-  if (isNull(storeState[action.payload.uuid])) {
+  const prevEntry = storeState[action.payload.uuid];
+  if (isNull(prevEntry)) {
     // after a request has been removed it's possible pending changes still come in.
     // Don't store them
     return storeState;
   } else {
     return Object.assign({}, storeState, {
-      [action.payload.uuid]: Object.assign({}, storeState[action.payload.uuid], {
+      [action.payload.uuid]: Object.assign({}, prevEntry, {
-        state: RequestEntryState.Error,
+        // If a response comes in for a request that's already stale, still store it otherwise
+        // components that are waiting for it might freeze
+        state: isStale(prevEntry.state) ? RequestEntryState.ErrorStale : RequestEntryState.Error,
         response: {
           timeCompleted: action.payload.timeCompleted,
           lastUpdated: action.payload.timeCompleted,
@@ -155,24 +167,29 @@ function completeFailedRequest(storeState: RequestState, action: RequestErrorAct
  *    the new storeState, set to stale
  */
 function expireRequest(storeState: RequestState, action: RequestStaleAction): RequestState {
-  if (isNull(storeState[action.payload.uuid])) {
-    // after a request has been removed it's possible pending changes still come in.
-    // Don't store them
-    return storeState;
-  } else {
   const prevEntry = storeState[action.payload.uuid];
-    if (isStale(prevEntry.state)) {
+  if (isNull(prevEntry) || isStale(prevEntry.state) || isRequestPending(prevEntry.state)) {
+    // No need to do anything if the entry doesn't exist, is already stale, or if the request is
+    // still pending, because that means it still needs to be sent to the server. Any response
+    // is guaranteed to have been generated after the request was set to stale.
     return storeState;
   } else {
+    let nextRequestEntryState: RequestEntryState;
+    if (isResponsePending(prevEntry.state)) {
+      nextRequestEntryState = RequestEntryState.ResponsePendingStale;
+    } else if (hasSucceeded(prevEntry.state)) {
+      nextRequestEntryState = RequestEntryState.SuccessStale;
+    } else {
+      nextRequestEntryState = RequestEntryState.ErrorStale;
+    }
     return Object.assign({}, storeState, {
       [action.payload.uuid]: Object.assign({}, prevEntry, {
-          state: hasSucceeded(prevEntry.state) ? RequestEntryState.SuccessStale : RequestEntryState.ErrorStale,
+        state: nextRequestEntryState,
         lastUpdated: action.lastUpdated
       })
     });
   }
 }
-}
 
 /**
  * Reset the timeCompleted property of all responses

src/app/core/data/request.service.ts

@@ -164,7 +164,7 @@ export class RequestService {
     this.getByHref(request.href).pipe(
       take(1))
       .subscribe((re: RequestEntry) => {
-        isPending = (hasValue(re) && isLoading(re.state));
+        isPending = (hasValue(re) && isLoading(re.state) && !isStale(re.state));
       });
     return isPending;
   }

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

@@ -34,7 +34,7 @@ import { PatchData, PatchDataImpl } from '../data/base/patch-data';
 import { DeleteData, DeleteDataImpl } from '../data/base/delete-data';
 import { RestRequestMethod } from '../data/rest-request-method';
 import { dataService } from '../data/base/data-service.decorator';
-import { getEPersonEditRoute, getEPersonsRoute } from '../../access-control/access-control-routing-paths';
+import { getEPersonEditRoute } from '../../access-control/access-control-routing-paths';
 
 const ePeopleRegistryStateSelector = (state: AppState) => state.epeopleRegistry;
 const editEPersonSelector = createSelector(ePeopleRegistryStateSelector, (ePeopleRegistryState: EPeopleRegistryState) => ePeopleRegistryState.editEPerson);
@@ -313,13 +313,6 @@ export class EPersonDataService extends IdentifiableDataService<EPerson> impleme
     return getEPersonEditRoute(ePerson.id);
   }
 
-  /**
-   * Get EPeople admin page
-   */
-  public getEPeoplePageRouterLink(): string {
-    return getEPersonsRoute();
-  }
-
   /**
    * Create a new EPerson using a token
    * @param eperson

src/app/core/json-patch/json-patch-operations.reducer.ts

@@ -388,7 +388,28 @@ function addOperationToList(body: JsonPatchOperationObject[], actionType, target
       newBody.push(makeOperationEntry({ op: JsonPatchOperationType.move, from: fromPath, path: targetPath }));
       break;
   }
-  return newBody;
+  return dedupeOperationEntries(newBody);
+}
+
+/**
+ * Dedupe operation entries by op and path. This prevents processing unnecessary patches in a single PATCH request.
+ *
+ * @param body JSON patch operation object entries
+ * @returns deduped JSON patch operation object entries
+ */
+function dedupeOperationEntries(body: JsonPatchOperationObject[]): JsonPatchOperationObject[] {
+  const ops = new Map<string, any>();
+  for (let i = body.length - 1; i >= 0; i--) {
+    const patch = body[i].operation;
+    const key = `${patch.op}-${patch.path}`;
+    if (!ops.has(key)) {
+      ops.set(key, patch);
+    } else {
+      body.splice(i, 1);
+    }
+  }
+
+  return body;
 }
 
 function makeOperationEntry(operation) {

src/app/core/server-check/server-check.guard.spec.ts

@@ -9,7 +9,7 @@ import SpyObj = jasmine.SpyObj;
 describe('ServerCheckGuard', () => {
   let guard: ServerCheckGuard;
   let router: Router;
-  const eventSubject = new ReplaySubject<RouterEvent>(1);
+  let eventSubject: ReplaySubject<RouterEvent>;
   let rootDataServiceStub: SpyObj<RootDataService>;
   let testScheduler: TestScheduler;
   let redirectUrlTree: UrlTree;
@@ -24,6 +24,7 @@ describe('ServerCheckGuard', () => {
       findRoot: jasmine.createSpy('findRoot')
     });
     redirectUrlTree = new UrlTree();
+    eventSubject = new ReplaySubject<RouterEvent>(1);
     router = {
       events: eventSubject.asObservable(),
       navigateByUrl: jasmine.createSpy('navigateByUrl'),
@@ -64,10 +65,10 @@ describe('ServerCheckGuard', () => {
   });
 
   describe(`listenForRouteChanges`, () => {
-    it(`should retrieve the root endpoint, without using the cache, when the method is first called`, () => {
+    it(`should invalidate the root cache, when the method is first called`, () => {
         testScheduler.run(() => {
           guard.listenForRouteChanges();
-          expect(rootDataServiceStub.findRoot).toHaveBeenCalledWith(false);
+          expect(rootDataServiceStub.invalidateRootCache).toHaveBeenCalledTimes(1);
         });
     });
 
@@ -80,7 +81,8 @@ describe('ServerCheckGuard', () => {
           eventSubject.next(new NavigationEnd(2,'', ''));
           eventSubject.next(new NavigationStart(3,''));
         });
-        expect(rootDataServiceStub.invalidateRootCache).toHaveBeenCalledTimes(3);
+        // once when the method is first called, and then 3 times for NavigationStart events
+        expect(rootDataServiceStub.invalidateRootCache).toHaveBeenCalledTimes(1 + 3);
     });
   });
 });

src/app/core/server-check/server-check.guard.ts

@@ -53,10 +53,8 @@ export class ServerCheckGuard implements CanActivateChild {
    */
   listenForRouteChanges(): void {
     // we'll always be too late for the first NavigationStart event with the router subscribe below,
-    // so this statement is for the very first route operation. A `find` without using the cache,
+    // so this statement is for the very first route operation.
-    // rather than an invalidateRootCache, because invalidating as the app is bootstrapping can
+    this.rootDataService.invalidateRootCache();
-    // break other features
-    this.rootDataService.findRoot(false);
 
     this.router.events.pipe(
       filter(event => event instanceof NavigationStart),

src/app/core/shared/hal-endpoint.service.spec.ts

@@ -1,4 +1,3 @@
-import { cold, hot } from 'jasmine-marbles';
 import { getMockRequestService } from '../../shared/mocks/request.service.mock';
 import { RequestService } from '../data/request.service';
 import { HALEndpointService } from './hal-endpoint.service';
@@ -7,12 +6,17 @@ import { combineLatest as observableCombineLatest, of as observableOf } from 'rx
 import { environment } from '../../../environments/environment';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { TestScheduler } from 'rxjs/testing';
+import { RemoteData } from '../data/remote-data';
+import { RequestEntryState } from '../data/request-entry-state.model';
 
 describe('HALEndpointService', () => {
   let service: HALEndpointService;
   let requestService: RequestService;
   let rdbService: RemoteDataBuildService;
   let envConfig;
+  let testScheduler;
+  let remoteDataMocks;
   const endpointMap = {
     test: {
       href: 'https://rest.api/test'
@@ -68,7 +72,30 @@ describe('HALEndpointService', () => {
   };
   const linkPath = 'test';
 
+  const timeStamp = new Date().getTime();
+  const msToLive = 15 * 60 * 1000;
+  const payload = {
+    _links: endpointMaps[one]
+  };
+  const statusCodeSuccess = 200;
+  const statusCodeError = 404;
+  const errorMessage = 'not found';
+  remoteDataMocks = {
+    RequestPending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.RequestPending, undefined, undefined, undefined),
+    ResponsePending: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePending, undefined, undefined, undefined),
+    ResponsePendingStale: new RemoteData(undefined, msToLive, timeStamp, RequestEntryState.ResponsePendingStale, undefined, undefined, undefined),
+    Success: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Success, undefined, payload, statusCodeSuccess),
+    SuccessStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.SuccessStale, undefined, payload, statusCodeSuccess),
+    Error: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.Error, errorMessage, undefined, statusCodeError),
+    ErrorStale: new RemoteData(timeStamp, msToLive, timeStamp, RequestEntryState.ErrorStale, errorMessage, undefined, statusCodeError),
+  };
+
   beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      // asserting the two objects are equal
+      // e.g. using chai.
+      expect(actual).toEqual(expected);
+    });
     requestService = getMockRequestService();
     rdbService = jasmine.createSpyObj('rdbService', {
       buildFromHref: createSuccessfulRemoteDataObject$({
@@ -111,20 +138,28 @@ describe('HALEndpointService', () => {
     });
 
     it(`should return the endpoint URL for the service's linkPath`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service as any, 'getEndpointAt').and
-        .returnValue(hot('a-', { a: 'https://rest.api/test' }));
+          .returnValue(cold('a-', { a: 'https://rest.api/test' }));
         const result = service.getEndpoint(linkPath);
 
-      const expected = cold('(b|)', { b: endpointMap.test.href });
+        const expected = '(b|)';
-      expect(result).toBeObservable(expected);
+        const values = {
+          b: endpointMap.test.href
+        };
+        expectObservable(result).toBe(expected, values);
+      });
     });
 
     it('should return undefined for a linkPath that isn\'t in the endpoint map', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service as any, 'getEndpointAt').and
-        .returnValue(hot('a-', { a: undefined }));
+          .returnValue(cold('a-', { a: undefined }));
         const result = service.getEndpoint('unknown');
-      const expected = cold('(b|)', { b: undefined });
+        const expected = '(b|)';
-      expect(result).toBeObservable(expected);
+        const values = { b: undefined };
+        expectObservable(result).toBe(expected, values);
+      });
     });
   });
 
@@ -183,29 +218,118 @@ describe('HALEndpointService', () => {
     });
 
     it('should return undefined as long as getRootEndpointMap hasn\'t fired', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service as any, 'getRootEndpointMap').and
-        .returnValue(hot('----'));
+          .returnValue(cold('----'));
 
         const result = service.isEnabledOnRestApi(linkPath);
-      const expected = cold('b---', { b: undefined });
+        const expected = 'b---';
-      expect(result).toBeObservable(expected);
+        const values = { b: undefined };
+        expectObservable(result).toBe(expected, values);
+      });
     });
 
     it('should return true if the service\'s linkPath is in the endpoint map', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service as any, 'getRootEndpointMap').and
-        .returnValue(hot('--a-', { a: endpointMap }));
+          .returnValue(cold('--a-', { a: endpointMap }));
         const result = service.isEnabledOnRestApi(linkPath);
-      const expected = cold('b-c-', { b: undefined, c: true });
+        const expected = 'b-c-';
-      expect(result).toBeObservable(expected);
+        const values = { b: undefined, c: true };
+        expectObservable(result).toBe(expected, values);
+      });
     });
 
     it('should return false if the service\'s linkPath isn\'t in the endpoint map', () => {
+      testScheduler.run(({ cold, expectObservable }) => {
         spyOn(service as any, 'getRootEndpointMap').and
-        .returnValue(hot('--a-', { a: endpointMap }));
+          .returnValue(cold('--a-',  { a: endpointMap }));
 
         const result = service.isEnabledOnRestApi('unknown');
-      const expected = cold('b-c-', { b: undefined, c: false });
+        const expected = 'b-c-';
-      expect(result).toBeObservable(expected);
+        const values = { b: undefined, c: false };
+        expectObservable(result).toBe(expected, values);
+      });
+    });
+
+  });
+
+  describe(`getEndpointMapAt`, () => {
+    const href = 'https://rest.api/some/sub/path';
+
+    it(`should call requestService.send with a new EndpointMapRequest for the given href. useCachedVersionIfAvailable should be true`, () => {
+      testScheduler.run(() => {
+        (service as any).getEndpointMapAt(href);
+      });
+      const expected = new EndpointMapRequest(requestService.generateRequestId(), href);
+      expect(requestService.send).toHaveBeenCalledWith(expected, true);
+    });
+
+    it(`should call rdbService.buildFromHref with the given href`, () => {
+      testScheduler.run(() => {
+        (service as any).getEndpointMapAt(href);
+      });
+      expect(rdbService.buildFromHref).toHaveBeenCalledWith(href);
+    });
+
+    describe(`when the RemoteData returned from rdbService is stale`, () => {
+      it(`should re-request it`, () => {
+        spyOn(service as any, 'getEndpointMapAt').and.callThrough();
+          testScheduler.run(({ cold }) => {
+            (rdbService.buildFromHref as jasmine.Spy).and.returnValue(cold('a', { a: remoteDataMocks.ResponsePendingStale }));
+            // we need to subscribe to the result, to ensure the "tap" that does the re-request can fire
+            (service as any).getEndpointMapAt(href).subscribe();
+          });
+          expect((service as any).getEndpointMapAt).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    describe(`when the RemoteData returned from rdbService isn't stale`, () => {
+      it(`should not re-request it`, () => {
+        spyOn(service as any, 'getEndpointMapAt').and.callThrough();
+          testScheduler.run(({ cold }) => {
+            (rdbService.buildFromHref as jasmine.Spy).and.returnValue(cold('a', { a: remoteDataMocks.ResponsePending }));
+            // we need to subscribe to the result, to ensure the "tap" that does the re-request can fire
+            (service as any).getEndpointMapAt(href).subscribe();
+          });
+          expect((service as any).getEndpointMapAt).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it(`should emit exactly once, returning the endpoint map in the response, when the RemoteData completes`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        (rdbService.buildFromHref as jasmine.Spy).and.returnValue(cold('a-b-c-d-e-f-g-h-i-j-k-l', {
+          a: remoteDataMocks.RequestPending,
+          b: remoteDataMocks.ResponsePending,
+          c: remoteDataMocks.ResponsePendingStale,
+          d: remoteDataMocks.SuccessStale,
+          e: remoteDataMocks.RequestPending,
+          f: remoteDataMocks.ResponsePending,
+          g: remoteDataMocks.Success,
+          h: remoteDataMocks.SuccessStale,
+          i: remoteDataMocks.RequestPending,
+          k: remoteDataMocks.ResponsePending,
+          l: remoteDataMocks.Error,
+        }));
+        const expected = '------------(g|)';
+        const values = {
+          g: endpointMaps[one]
+        };
+        expectObservable((service as any).getEndpointMapAt(one)).toBe(expected, values);
+      });
+    });
+
+    it(`should emit undefined when the response doesn't have a payload`, () => {
+      testScheduler.run(({ cold, expectObservable }) => {
+        (rdbService.buildFromHref as jasmine.Spy).and.returnValue(cold('a', {
+          a: remoteDataMocks.Error,
+        }));
+        const expected = '(a|)';
+        const values = {
+          g: undefined
+        };
+        expectObservable((service as any).getEndpointMapAt(href)).toBe(expected, values);
+      });
     });
 
   });

src/app/core/shared/hal-endpoint.service.ts

@@ -1,5 +1,12 @@
 import { Observable } from 'rxjs';
-import { distinctUntilChanged, map, startWith, switchMap, take } from 'rxjs/operators';
+import {
+  distinctUntilChanged,
+  map,
+  startWith,
+  switchMap,
+  take,
+  tap, filter
+} from 'rxjs/operators';
 import { RequestService } from '../data/request.service';
 import { EndpointMapRequest } from '../data/request.models';
 import { hasValue, isEmpty, isNotEmpty } from '../../shared/empty.util';
@@ -9,7 +16,7 @@ import { EndpointMap } from '../cache/response.models';
 import { getFirstCompletedRemoteData } from './operators';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { RemoteData } from '../data/remote-data';
-import { UnCacheableObject } from './uncacheable-object.model';
+import { CacheableObject } from '../cache/cacheable-object.model';
 
 @Injectable()
 export class HALEndpointService {
@@ -33,9 +40,18 @@ export class HALEndpointService {
 
     this.requestService.send(request, true);
 
-    return this.rdbService.buildFromHref<UnCacheableObject>(href).pipe(
+    return this.rdbService.buildFromHref<CacheableObject>(href).pipe(
+      // Re-request stale responses
+      tap((rd: RemoteData<CacheableObject>) => {
+        if (hasValue(rd) && rd.isStale) {
+          this.getEndpointMapAt(href);
+        }
+      }),
+      // Filter out all stale responses. We're only interested in a single, non-stale,
+      // completed RemoteData
+      filter((rd: RemoteData<CacheableObject>) => !rd.isStale),
       getFirstCompletedRemoteData(),
-      map((response: RemoteData<UnCacheableObject>) => {
+      map((response: RemoteData<CacheableObject>) => {
         if (hasValue(response.payload)) {
           return response.payload._links;
         } else {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -21,25 +21,25 @@
     <div class="btn-group">
       <div class="edit-field">
         <div class="btn-group edit-buttons" [ngbTooltip]="isVirtual ? (dsoType + '.edit.metadata.edit.buttons.virtual' | translate) : null">
-          <button class="btn btn-outline-primary btn-sm ng-star-inserted" id="metadata-edit-btn" *ngIf="!mdValue.editing"
+          <button class="btn btn-outline-primary btn-sm ng-star-inserted" data-test="metadata-edit-btn" *ngIf="!mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
                   [disabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
             <i class="fas fa-edit fa-fw"></i>
           </button>
-          <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="mdValue.editing"
+          <button class="btn btn-outline-success btn-sm ng-star-inserted" data-test="metadata-confirm-btn" *ngIf="mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
                   [disabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
             <i class="fas fa-check fa-fw"></i>
           </button>
-          <button class="btn btn-outline-danger btn-sm" id="metadata-remove-btn"
+          <button class="btn btn-outline-danger btn-sm" data-test="metadata-remove-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
                   [disabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
             <i class="fas fa-trash-alt fa-fw"></i>
           </button>
-          <button class="btn btn-outline-warning btn-sm" id="metadata-undo-btn"
+          <button class="btn btn-outline-warning btn-sm" data-test="metadata-undo-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
                   [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
@@ -47,7 +47,7 @@
           </button>
         </div>
       </div>
-      <button class="btn btn-outline-secondary ds-drag-handle btn-sm" id="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
+      <button class="btn btn-outline-secondary ds-drag-handle btn-sm" data-test="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
               cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
               [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
               ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">

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

@@ -149,7 +149,7 @@ describe('DsoEditMetadataValueComponent', () => {
       let btn: DebugElement;
 
       beforeEach(() => {
-        btn = fixture.debugElement.query(By.css(`#metadata-${name}-btn`));
+        btn = fixture.debugElement.query(By.css(`button[data-test="metadata-${name}-btn"]`));
       });
 
       if (exists) {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html

@@ -2,23 +2,23 @@
   <div class="button-row top d-flex my-2 space-children-mr ml-gap">
     <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.add-button' | translate"
-            (click)="add()"><i class="fas fa-plus"></i>
+            (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
     <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-            (click)="reinstate()"><i class="fas fa-undo-alt"></i>
+            (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.save-button' | translate"
-            (click)="submit()"><i class="fas fa-save"></i>
+            (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
     </button>
     <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [disabled]="!hasChanges || (saving$ | async)"
-            (click)="discard()"><i class="fas fa-times"></i>
+            (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
   </div>
@@ -74,16 +74,19 @@
     <div class="mt-2 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
               [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-              (click)="reinstate()"><i class="fas fa-undo-alt"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
+              (click)="reinstate()">
+        <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
       <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
               [title]="dsoType + '.edit.metadata.save-button' | translate"
-              (click)="submit()"><i class="fas fa-save"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
+              (click)="submit()">
+        <i class="fas fa-save" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
       </button>
       <button class="btn btn-danger" *ngIf="!isReinstatable"
               [title]="dsoType + '.edit.metadata.discard-button' | translate"
               [disabled]="!hasChanges || (saving$ | async)"
-              (click)="discard()"><i class="fas fa-times"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
+              (click)="discard()">
+        <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>
     </div>
   </div>

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

@@ -1,6 +1,7 @@
 <div class="w-100 position-relative">
   <input type="text" #mdFieldInput
          class="form-control" [ngClass]="{ 'is-invalid': showInvalid }"
+         [attr.aria-label]="(dsoType + '.edit.metadata.metadatafield') | translate"
          [value]="mdField"
          [formControl]="input"
          (focusin)="query$.next(mdField)"
@@ -10,9 +11,9 @@
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (mdFieldOptions$ | async)?.length > 0}">
     <div class="dropdown-list">
       <div *ngFor="let mdFieldOption of (mdFieldOptions$ | async)">
-        <a href="javascript:void(0);" class="d-block dropdown-item" (click)="select(mdFieldOption)">
+        <button class="d-block dropdown-item" (click)="select(mdFieldOption)">
           <span [innerHTML]="mdFieldOption"></span>
-        </a>
+        </button>
       </div>
     </div>
   </div>

src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html

@@ -11,7 +11,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">

src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.spec.ts

@@ -2,6 +2,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { OrgUnitInputSuggestionsComponent } from './org-unit-input-suggestions.component';
 import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 let component: OrgUnitInputSuggestionsComponent;
 let fixture: ComponentFixture<OrgUnitInputSuggestionsComponent>;
@@ -21,6 +22,7 @@ describe('OrgUnitInputSuggestionsComponent', () => {
       declarations: [OrgUnitInputSuggestionsComponent],
       imports: [
         FormsModule,
+        TranslateModule.forRoot(),
       ],
       providers: [
       ],

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-suggestions/person-input-suggestions.component.html

@@ -12,7 +12,9 @@
            [dsDebounce]="debounceTime" (onDebounce)="find($event)"
            [placeholder]="placeholder"
            [ngModelOptions]="{standalone: true}" autocomplete="off"/>
-    <input type="submit" class="d-none"/>
+    <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+    </button>
     <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">

src/app/forgot-password/forgot-password-form/forgot-password-form.component.html

@@ -1,13 +1,13 @@
 <div class="container" *ngIf="(registration$ |async)">
-    <h3 class="mb-4">{{'forgot-password.form.head' | translate}}</h3>
+    <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
     <div class="card mb-4">
         <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
         <div class="card-body">
             <div class="row">
                 <div class="col-12">
-                    <label class="font-weight-bold"
+                    <span class="font-weight-bold">{{'forgot-password.form.identification.email' | translate}} </span>
-                           for="email">{{'forgot-password.form.identification.email' | translate}}</label>
+                    <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
-                    <span id="email">{{(registration$ |async).email}}</span></div>
+                </div>
             </div>
         </div>
     </div>

src/app/forgot-password/forgot-password-form/forgot-password-form.component.spec.ts

@@ -21,6 +21,7 @@ import {
   createSuccessfulRemoteDataObject$
 } from '../../shared/remote-data.utils';
 import { CoreState } from '../../core/core-state.model';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
 describe('ForgotPasswordFormComponent', () => {
   let comp: ForgotPasswordFormComponent;
@@ -54,7 +55,10 @@ describe('ForgotPasswordFormComponent', () => {
 
     TestBed.configureTestingModule({
       imports: [CommonModule, RouterTestingModule.withRoutes([]), TranslateModule.forRoot(), ReactiveFormsModule],
-      declarations: [ForgotPasswordFormComponent],
+      declarations: [
+        BrowserOnlyPipe,
+        ForgotPasswordFormComponent,
+      ],
       providers: [
         {provide: Router, useValue: router},
         {provide: ActivatedRoute, useValue: route},
@@ -75,7 +79,7 @@ describe('ForgotPasswordFormComponent', () => {
 
   describe('init', () => {
     it('should initialise mail address', () => {
-      const elem = fixture.debugElement.queryAll(By.css('span#email'))[0].nativeElement;
+      const elem = fixture.debugElement.queryAll(By.css('span[data-test="email"]'))[0].nativeElement;
       expect(elem.innerHTML).toContain('test@email.org');
     });
   });

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

@@ -1,5 +1,5 @@
 <div class="container" *ngIf="(healthResponseInitialised | async) && (healthInfoResponseInitialised | async)">
-  <h2>{{'health-page.heading' | translate}}</h2>
+  <h1>{{'health-page.heading' | translate}}</h1>
   <div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
     <ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
       <li [ngbNavItem]="'status'" role="presentation">

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -1,9 +1,8 @@
 <div class="row row-offcanvas row-offcanvas-right">
   <div class="col-xs-12 col-sm-12 col-md-9">
-    <form class="primary" [formGroup]="feedbackForm" (ngSubmit)="createFeedback()">
     <h1>{{ 'info.feedback.head' | translate }}</h1>
     <p>{{ 'info.feedback.info' | translate }}</p>
-      <fieldset class="col p-0">
+    <form [formGroup]="feedbackForm" (ngSubmit)="createFeedback()" class="col p-0">
       <div class="row">
         <div class="control-group col-sm-12">
           <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
@@ -39,7 +38,6 @@
           <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
         </div>
       </div>
-      </fieldset>
     </form>
   </div>
 </div>

src/app/info/privacy/privacy-content/privacy-content.component.html

@@ -22,7 +22,7 @@
 <h2>Information we collect about you and how we collect it</h2>
 <p>We collect several types of information from and about users of our Website, including information:</p>
 <ul>
-  <li>by which you may be personally identified, such as name, e-mail address, telephone number, or any other identifier by which you may be contacted online or offline ("personal information"); and/or</li>
+  <li>by which you may be personally identified, such as name, email address, telephone number, or any other identifier by which you may be contacted online or offline ("personal information"); and/or</li>
   <li>about your internet connection, the equipment you use to access our Website and usage details.</li>
 </ul>
 <p>We collect this information:</p>

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

@@ -10,6 +10,7 @@
                            class="nav-link"
                            [ngClass]="{'active' : page.page === currentPage}"
                            [routerLink]="['./' + page.page]"
+                           [attr.data-test]="page.page"
                            role="tab">
                             {{'item.edit.tabs.' + page.page + '.head' | translate}}
                         </a>

src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html

@@ -6,7 +6,7 @@
       <p>{{'item.edit.item-mapper.description' | translate}}</p>
 
       <ul ngbNav (navChange)="tabChange($event)" [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs">
-        <li [ngbNavItem]="'browseTab'" role="presentation">
+        <li [ngbNavItem]="'browseTab'" role="presentation" data-test="browseTab">
           <a ngbNavLink>{{'item.edit.item-mapper.tabs.browse' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="mt-2">
@@ -22,7 +22,7 @@
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'" role="presentation">
+        <li [ngbNavItem]="'mapTab'" role="presentation" data-test="mapTab">
           <a ngbNavLink>{{'item.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">

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

@@ -107,7 +107,19 @@ export class ItemStatusComponent implements OnInit {
       // Observable for configuration determining whether the Register DOI feature is enabled
       let registerConfigEnabled$: Observable<boolean> = this.configurationService.findByPropertyName('identifiers.item-status.register-doi').pipe(
         getFirstCompletedRemoteData(),
-        map((enabledRD: RemoteData<ConfigurationProperty>) => enabledRD.hasSucceeded && enabledRD.payload.values.length > 0)
+        map((response: RemoteData<ConfigurationProperty>) => {
+          // Return true if a successful response with a 'true' value was retrieved, otherwise return false
+          if (response.hasSucceeded) {
+            const payload = response.payload;
+            if (payload.values.length > 0 && hasValue(payload.values[0])) {
+              return payload.values[0] === 'true';
+            } else {
+              return false;
+            }
+          } else {
+            return false;
+          }
+        })
       );
 
       /**
@@ -117,7 +129,7 @@ export class ItemStatusComponent implements OnInit {
        * The value is supposed to be a href for the button
        */
       const currentUrl = this.getCurrentUrl(item);
-      const inititalOperations: ItemOperation[] = [
+      const initialOperations: ItemOperation[] = [
         new ItemOperation('authorizations', `${currentUrl}/authorizations`, FeatureID.CanManagePolicies, true),
         new ItemOperation('mappedCollections', `${currentUrl}/mapper`, FeatureID.CanManageMappings, true),
         item.isWithdrawn
@@ -130,7 +142,7 @@ export class ItemStatusComponent implements OnInit {
         new ItemOperation('delete', `${currentUrl}/delete`, FeatureID.CanDelete, true)
       ];
 
-      this.operations$.next(inititalOperations);
+      this.operations$.next(initialOperations);
 
         /**
          *  When the identifier data stream changes, determine whether the register DOI button should be shown or not.
@@ -170,12 +182,12 @@ export class ItemStatusComponent implements OnInit {
           }),
           // Switch map pushes the register DOI operation onto a copy of the base array then returns to the pipe
           switchMap((showDoi: boolean) => {
-            const ops = [...inititalOperations];
+            const ops = [...initialOperations];
             if (showDoi) {
               const op = new ItemOperation('register-doi', `${currentUrl}/register-doi`, FeatureID.CanRegisterDOI, true);
               ops.splice(ops.length - 1, 0, op); // Add item before last
             }
-            return inititalOperations;
+            return ops;
           }),
           concatMap((op: ItemOperation) => {
             if (hasValue(op.featureID)) {

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

@@ -32,7 +32,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)">
+     [queryParams]="getQueryParams(value)">{{value}}</a>
-    {{value}}
-  </a>
 </ng-template>

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html

@@ -15,10 +15,10 @@
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
-      <span class="caret"></span>
+      <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu"
+         class="dropdown-menu p-0"
          id="importControlsDropdownMenu"
          aria-labelledby="dropdownImport">
       <ds-entity-dropdown [isSubmission]="false" (selectionChange)="openPage($event)"></ds-entity-dropdown>

src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html

@@ -13,10 +13,10 @@
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission' | translate}}">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
-      <span class="caret"></span>
+      <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu"
+         class="dropdown-menu p-0"
          id="entityControlsDropdownMenu"
          aria-labelledby="dropdownSubmission">
       <ds-entity-dropdown [isSubmission]="true" (selectionChange)="openDialog($event)"></ds-entity-dropdown>

src/app/profile-page/profile-page-metadata-form/profile-page-metadata-form.component.ts

@@ -43,7 +43,8 @@ export class ProfilePageMetadataFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'email',
       name: 'email',
-      readOnly: true
+      readOnly: true,
+      disabled: true,
     }),
     new DynamicInputModel({
       id: 'firstname',
@@ -55,6 +56,7 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'given-name',
     }),
     new DynamicInputModel({
       id: 'lastname',
@@ -66,10 +68,12 @@ export class ProfilePageMetadataFormComponent implements OnInit {
       errorMessages: {
         required: 'This field is required'
       },
+      autoComplete: 'family-name',
     }),
     new DynamicInputModel({
       id: 'phone',
-      name: 'eperson.phone'
+      name: 'eperson.phone',
+      autoComplete: 'tel',
     }),
     new DynamicSelectModel<string>({
       id: 'language',

src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts

@@ -39,12 +39,14 @@ export class ProfilePageSecurityFormComponent implements OnInit {
     new DynamicInputModel({
       id: 'password',
       name: 'password',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     }),
     new DynamicInputModel({
       id: 'passwordrepeat',
       name: 'passwordrepeat',
-      inputType: 'password'
+      inputType: 'password',
+      autoComplete: 'new-password',
     })
   ];
 
@@ -79,7 +81,8 @@ export class ProfilePageSecurityFormComponent implements OnInit {
         id: 'current-password',
         name: 'current-password',
         inputType: 'password',
-        required: true
+        required: true,
+        autoComplete: 'current-password',
       }));
     }
     if (this.passwordCanBeEmpty) {

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

@@ -1,7 +1,7 @@
 <ng-container *ngVar="(user$ | async) as user">
   <div class="container" *ngIf="user">
-    <ng-container *ngIf="isResearcherProfileEnabled() | async">
+    <h1>{{'profile.title' | translate}}</h1>
-      <h2 class="mb-4">{{'profile.head' | translate}}</h2>
+    <ng-container>
       <div class="card mb-4">
         <div class="card-header">{{'profile.card.researcher' | translate}}</div>
         <div class="card-body">

src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

@@ -88,7 +88,7 @@
       </div>
 
       <div>
-        <label>&nbsp;</label>
+        <span aria-hidden="true" class="mb-2 d-inline-block">&nbsp;</span>
         <div class="input-group">
 
           <button type="button" class="btn btn-outline-danger"

src/app/shared/access-control-form-container/access-control-form-container.component.html

@@ -23,10 +23,10 @@
               </ui-switch>
             </div>
 
-            <div class="row mt-3">
+            <fieldset class="row mt-3">
-              <div class="col-12 col-md-3">
+              <legend class="h4 col-12 col-md-3">
                 {{ 'access-control-mode' | translate }}
-              </div>
+              </legend>
               <div class="col-12 col-md-8">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
@@ -47,7 +47,7 @@
                   </label>
                 </div>
               </div>
-            </div>
+            </fieldset>
           </div>
 
           <div>
@@ -78,10 +78,10 @@
             </div>
 
             <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
-            <div class="col-12">
+            <fieldset class="col-12">
+              <legend class="h4">
                 {{'access-control-limit-to-specific' | translate}}
-            </div>
+              </legend>
-            <div class="col-12">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
                        name="changesLimit" id="processAll" value="all"
@@ -111,14 +111,14 @@
 
                 </label>
               </div>
-            </div>
+            </fieldset>
             </div>
           </div>
 
-          <div class="row mt-3">
+          <fieldset class="row mt-3">
-            <div class="col-12 col-md-3">
+            <legend class="h4 col-12 col-md-3">
               {{'access-control-mode' | translate}}
-            </div>
+            </legend>
             <div class="col-12 col-md-8">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
@@ -139,7 +139,7 @@
                 </label>
               </div>
             </div>
-          </div>
+          </fieldset>
 
           <div>
             <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>

src/app/shared/alert/alert.component.scss

@@ -1,3 +1,9 @@
-.close:focus {
+.close {
+  opacity: 0.75;
+  &:focus {
     outline: none !important;
   }
+}
+button.close {
+  opacity: 0.6;
+}

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -4,7 +4,7 @@
 }
 
 .loginDropdownMenu {
-  min-height: 260px;
+  min-height: 75px;
 }
 
 .dropdown-item.active, .dropdown-item:active,

src/app/shared/collection-dropdown/collection-dropdown.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="searchField" class="form-group w-100 pr-2 pl-2">
+<div *ngIf="searchField" class="form-group w-100 pr-2 pl-2 my-2">
   <input type="search"
          class="form-control w-100"
          (click)="$event.stopPropagation();"
@@ -6,9 +6,9 @@
          [formControl]="searchField"
          #searchFieldEl>
 </div>
-<div class="dropdown-divider"></div>
+<div class="dropdown-divider m-0"></div>
-<ul class="scrollable-menu p-0"
+<ul class="scrollable-menu p-0 m-0"
-     aria-labelledby="dropdownMenuButton"
+    role="menu"
      (scroll)="onScroll($event)"
      infiniteScroll
      [infiniteScrollDistance]="1.5"
@@ -18,12 +18,13 @@
      [scrollWindow]="false"
      (scrolled)="onScrollDown()">
 
-  <li class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
+  <li class="dropdown-item disabled" role="menuitem" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
     {{'submission.sections.general.no-collection' | translate}}
   </li>
   <ng-container *ngIf="searchListCollection?.length > 0">
     <li *ngFor="let listItem of searchListCollection"
             class="dropdown-item collection-item"
+            role="menuitem"
             title="{{ listItem.collection.name }}"
             (click)="onSelect(listItem)">
       <div class="list-unstyled mb-0">
@@ -34,9 +35,10 @@
       </div>
     </li>
   </ng-container>
-  <button class="dropdown-item disabled" *ngIf="(isLoading | async)">
+  <li *ngIf="(isLoading | async)">
+    <button class="dropdown-item disabled">
       <ds-themed-loading message="{{'loading.default' | translate}}">
       </ds-themed-loading>
     </button>
-
+  </li>
 </ul>

src/app/shared/collection-dropdown/collection-dropdown.component.scss

@@ -4,7 +4,8 @@
   overflow-x: hidden;
 }
 
-.collection-item {
+li:not(:last-of-type), .dropdown-divider {
+  border-top: none;
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
 

src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html

@@ -1,13 +1,13 @@
 <div class="container-fluid">
   <div class="row">
-    <div class="col-12 d-inline-block">
+    <div class="col-12 d-inline-block mb-1">
-      <label>{{type.value + '.edit.logo.label' | translate}}</label>
+      <span>{{type.value + '.edit.logo.label' | translate}}</span>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
       <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section" *ngIf="logo">
         <div class="row">
           <div class="col-8 d-inline-block">
-            <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>
+            <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
           </div>
           <div class="col-4 d-inline-block">
             <div *ngIf="logo" class="btn-group btn-group-sm float-right" role="group">
@@ -27,6 +27,7 @@
       </div>
       <div *ngIf="!logo" class="col-12 d-inline-block">
         <ds-uploader  *ngIf="initializedUploaderOptions | async"
+                      [ariaLabel]="type.value + '.browse.logo'"
                       [dropMsg]="type.value + '.edit.logo.upload'"
                       [dropOverDocumentMsg]="type.value + '.edit.logo.upload'"
                       [enableDragOverDocument]="true"
@@ -43,6 +44,6 @@
          [displayCancel]="false"
          (submitForm)="onSubmit()">
   <button before (click)="back.emit()" class="btn btn-outline-secondary" type="button">
-    <i class="fas fa-arrow-left"></i> {{ type.value + '.edit.return' | translate }}
+    <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type.value + '.edit.return' | translate }}
   </button>
 </ds-form>

src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html

@@ -5,8 +5,9 @@
         <h1>{{ type + '.edit.head' | translate }}</h1>
         <div class="my-auto">
           <a class="btn btn-danger"
-             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'">
+             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
-            <i class="fas fa-trash"></i> {{type + '.edit.delete' | translate}}</a>
+             data-test="delete-button">
+            <i class="fas fa-trash" aria-hidden="true"></i> {{type + '.edit.delete' | translate}}</a>
         </div>
       </div>
       <div class="pt-2">
@@ -14,7 +15,8 @@
           <li *ngFor="let page of pages" class="nav-item">
             <a class="nav-link"
                [ngClass]="{'active' : page === currentPage}"
-               [routerLink]="['./' + page]">
+               [routerLink]="['./' + page]"
+               [attr.data-test]="page">
               {{ type + '.edit.tabs.' + page + '.head' | translate}}
             </a>
           </li>
@@ -25,7 +27,7 @@
           </div>
           <div class="col-12 text-right">
             <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
-              <i class="fas fa-arrow-left"></i> {{ type + '.edit.return' | translate }}
+              <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
             </a>
           </div>
         </div>

src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html

@@ -1,3 +1,3 @@
 <div *ngIf="logo" class="dso-logo mb-3">
-    <img [src]="logo._links.content.href" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
+    <img [src]="logo._links.content.href" class="w-100 img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
 </div>

src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.scss

@@ -0,0 +1,4 @@
+img {
+  max-width: var(--ds-comcol-logo-max-width);
+  max-height: var(--ds-comcol-logo-max-height);
+}

src/app/shared/confirmation-modal/confirmation-modal.component.html

@@ -1,18 +1,18 @@
 <div>
-  <div class="modal-header">{{ headerLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+  <div class="modal-header">{{ headerLabel | translate:{ dsoName: name } }}
     <button type="button" class="close" (click)="close()" aria-label="Close">
       <span aria-hidden="true">×</span>
     </button>
   </div>
   <div class="modal-body">
-    <p>{{ infoLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}</p>
+    <p>{{ infoLabel | translate:{ dsoName: name } }}</p>
   </div>
   <div class="modal-footer">
     <button type="button" class="cancel btn btn-outline-secondary" (click)="cancelPressed()" aria-label="Cancel">
-      <i class="fas fa-times"></i> {{ cancelLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+      <i class="fas fa-times"></i> {{ cancelLabel | translate:{ dsoName: name } }}
     </button>
     <button type="button" class="confirm btn btn-{{brandColor}}" (click)="confirmPressed()" aria-label="Confirm" ngbAutofocus>
-      <i *ngIf="confirmIcon" class="{{confirmIcon}}"></i> {{ confirmLabel | translate:{ dsoName: dsoNameService.getName(dso) } }}
+      <i *ngIf="confirmIcon" class="{{confirmIcon}}"></i> {{ confirmLabel | translate:{ dsoName: name } }}
     </button>
   </div>
 </div>

src/app/shared/confirmation-modal/confirmation-modal.component.ts

@@ -1,7 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-confirmation-modal',
@@ -18,7 +16,7 @@ export class ConfirmationModalComponent {
    */
   @Input() brandColor = 'primary';
 
-  @Input() dso: DSpaceObject;
+  @Input() name: string;
 
   /**
    * An event fired when the cancel or confirm button is clicked, with respectively false or true
@@ -28,7 +26,6 @@ export class ConfirmationModalComponent {
 
   constructor(
     protected activeModal: NgbActiveModal,
-    public dsoNameService: DSONameService,
   ) {
   }
 

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

@@ -22,7 +22,7 @@
          class="dropdown-menu"
          id="dsSelectDropdownMenu"
          aria-labelledby="dsSelectMenuButton">
-      <div aria-labelledby="dropdownMenuButton">
+      <div>
         <ng-content select=".menu"></ng-content>
       </div>
     </div>

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html

@@ -1,25 +1,21 @@
 <div *ngIf="!canActivate" class="dso-button-menu mb-1"
-     [title]="itemModel.text | translate"
      [ngbTooltip]="itemModel.text | translate">
-    <a *ngIf="!section.model.disabled" class="d-flex flex-row flex-nowrap"
+    <a *ngIf="!section.model.disabled" class="btn btn-dark btn-sm"
-       [routerLink]="itemModel.link"
+       [routerLink]="itemModel.link">
-       href="javascript:void(0);">
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled">
+        <span class="sr-only">{{itemModel.text | translate}}</span>
-            <i class="fas fa-{{section.icon}} fa-fw"></i>
-        </button>
     </a>
-    <div *ngIf="section.model.disabled" class="d-flex flex-row flex-nowrap">
+    <button *ngIf="section.model.disabled" class="btn btn-dark btn-sm" [disabled]="true">
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled">
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
-            <i class="fas fa-{{section.icon}} fa-fw"></i>
+        <span class="sr-only">{{itemModel.text | translate}}</span>
     </button>
 </div>
-</div>
 
 <div *ngIf="canActivate" class="dso-button-menu mb-1"
-     [title]="itemModel.text | translate"
      [ngbTooltip]="itemModel.text | translate">
-    <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" [disabled]="section.model.disabled"
+    <button class="btn btn-dark btn-sm" [disabled]="section.model.disabled"
             (click)="activate($event)">
-        <i class="fas fa-{{section.icon}} fa-fw"></i>
+        <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
+        <span class="sr-only">{{itemModel.text | translate}}</span>
     </button>
 </div>