From d31e17894ce3f8f6be82f426de879816d76acd97 Mon Sep 17 00:00:00 2001 From: Alexandre Vryghem Date: Fri, 26 Jul 2024 13:57:47 +0200 Subject: [PATCH 01/14] 116728: Removed unnecessary *ngVars from the ThumbnailComponent --- src/app/thumbnail/thumbnail.component.html | 20 ++++++------- src/app/thumbnail/thumbnail.component.spec.ts | 28 +++++++++---------- src/app/thumbnail/thumbnail.component.ts | 14 +++++----- 3 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/app/thumbnail/thumbnail.component.html b/src/app/thumbnail/thumbnail.component.html index 6a0516b0d4..049a47e1b0 100644 --- a/src/app/thumbnail/thumbnail.component.html +++ b/src/app/thumbnail/thumbnail.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,16 +6,14 @@
- - - -
-
-
- {{ placeholder | translate }} -
+ + +
+
+
+ {{ placeholder | translate }}
- +
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts index ebecb5e075..2a25c9a318 100644 --- a/src/app/thumbnail/thumbnail.component.spec.ts +++ b/src/app/thumbnail/thumbnail.component.spec.ts @@ -67,31 +67,31 @@ describe('ThumbnailComponent', () => { describe('loading', () => { it('should start out with isLoading$ true', () => { - expect(comp.isLoading$.getValue()).toBeTrue(); + expect(comp.isLoading).toBeTrue(); }); it('should set isLoading$ to false once an image is successfully loaded', () => { comp.setSrc('http://bit.stream'); fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load')); - expect(comp.isLoading$.getValue()).toBeFalse(); + expect(comp.isLoading).toBeFalse(); }); it('should set isLoading$ to false once the src is set to null', () => { comp.setSrc(null); - expect(comp.isLoading$.getValue()).toBeFalse(); + expect(comp.isLoading).toBeFalse(); }); it('should show a loading animation while isLoading$ is true', () => { expect(de.query(By.css('ds-themed-loading'))).toBeTruthy(); - comp.isLoading$.next(false); + comp.isLoading = false; fixture.detectChanges(); expect(fixture.debugElement.query(By.css('ds-themed-loading'))).toBeFalsy(); }); describe('with a thumbnail image', () => { beforeEach(() => { - comp.src$.next('https://bit.stream'); + comp.src = 'https://bit.stream'; fixture.detectChanges(); }); @@ -100,7 +100,7 @@ describe('ThumbnailComponent', () => { expect(img).toBeTruthy(); expect(img.classes['d-none']).toBeTrue(); - comp.isLoading$.next(false); + comp.isLoading = false; fixture.detectChanges(); img = fixture.debugElement.query(By.css('img.thumbnail-content')); expect(img).toBeTruthy(); @@ -111,14 +111,14 @@ describe('ThumbnailComponent', () => { describe('without a thumbnail image', () => { beforeEach(() => { - comp.src$.next(null); + comp.src = null; fixture.detectChanges(); }); it('should only show the HTML placeholder once done loading', () => { expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy(); - comp.isLoading$.next(false); + comp.isLoading = false; fixture.detectChanges(); expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy(); }); @@ -214,14 +214,14 @@ describe('ThumbnailComponent', () => { describe('fallback', () => { describe('if there is a default image', () => { it('should display the default image', () => { - comp.src$.next('http://bit.stream'); + comp.src = 'http://bit.stream'; comp.defaultImage = 'http://default.img'; comp.errorHandler(); - expect(comp.src$.getValue()).toBe(comp.defaultImage); + expect(comp.src).toBe(comp.defaultImage); }); it('should include the alt text', () => { - comp.src$.next('http://bit.stream'); + comp.src = 'http://bit.stream'; comp.defaultImage = 'http://default.img'; comp.errorHandler(); @@ -233,10 +233,10 @@ describe('ThumbnailComponent', () => { describe('if there is no default image', () => { it('should display the HTML placeholder', () => { - comp.src$.next('http://default.img'); + comp.src = 'http://default.img'; comp.defaultImage = null; comp.errorHandler(); - expect(comp.src$.getValue()).toBe(null); + expect(comp.src).toBe(null); fixture.detectChanges(); const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement; @@ -328,7 +328,7 @@ describe('ThumbnailComponent', () => { it('should show the default image', () => { comp.defaultImage = 'default/image.jpg'; comp.ngOnChanges({}); - expect(comp.src$.getValue()).toBe('default/image.jpg'); + expect(comp.src).toBe('default/image.jpg'); }); }); }); diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts index 7f6531cc5e..0827a33e77 100644 --- a/src/app/thumbnail/thumbnail.component.ts +++ b/src/app/thumbnail/thumbnail.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { Bitstream } from '../core/shared/bitstream.model'; import { hasNoValue, hasValue } from '../shared/empty.util'; import { RemoteData } from '../core/data/remote-data'; -import { BehaviorSubject, of as observableOf } from 'rxjs'; +import { of as observableOf } from 'rxjs'; import { switchMap } from 'rxjs/operators'; import { FeatureID } from '../core/data/feature-authorization/feature-id'; import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service'; @@ -34,7 +34,7 @@ export class ThumbnailComponent implements OnChanges { /** * The src attribute used in the template to render the image. */ - src$ = new BehaviorSubject(undefined); + src: string = undefined; retriedWithToken = false; @@ -57,7 +57,7 @@ export class ThumbnailComponent implements OnChanges { * Whether the thumbnail is currently loading * Start out as true to avoid flashing the alt text while a thumbnail is being loaded. */ - isLoading$ = new BehaviorSubject(true); + isLoading = true; constructor( protected auth: AuthService, @@ -110,7 +110,7 @@ export class ThumbnailComponent implements OnChanges { * Otherwise, fall back to the default image or a HTML placeholder */ errorHandler() { - const src = this.src$.getValue(); + const src = this.src; const thumbnail = this.bitstream; const thumbnailSrc = thumbnail?._links?.content?.href; @@ -162,9 +162,9 @@ export class ThumbnailComponent implements OnChanges { * @param src */ setSrc(src: string): void { - this.src$.next(src); + this.src = src; if (src === null) { - this.isLoading$.next(false); + this.isLoading = false; } } @@ -172,6 +172,6 @@ export class ThumbnailComponent implements OnChanges { * Stop the loading animation once the thumbnail is successfully loaded */ successHandler() { - this.isLoading$.next(false); + this.isLoading = false; } } From c5b395802c890eab0761206aaae25f54b92212cc Mon Sep 17 00:00:00 2001 From: Julia Date: Fri, 4 Oct 2024 10:24:27 -0400 Subject: [PATCH 02/14] Update fr.json5 to add capitalization --- src/assets/i18n/fr.json5 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/i18n/fr.json5 b/src/assets/i18n/fr.json5 index 399363f017..185576e186 100644 --- a/src/assets/i18n/fr.json5 +++ b/src/assets/i18n/fr.json5 @@ -2053,7 +2053,7 @@ "community.all-lists.head": "Sous-communautés et collections", // "community.sub-collection-list.head": "Collections of this Community", - "community.sub-collection-list.head": "collections au sein de cette communauté", + "community.sub-collection-list.head": "Collections au sein de cette communauté", // "community.sub-community-list.head": "Communities of this Community", "community.sub-community-list.head": "Sous-communautés au sein de cette communauté", From e6a7fb852a147e9193fd3164660d12228c36d56a Mon Sep 17 00:00:00 2001 From: FrancescoMolinaro Date: Fri, 19 Jul 2024 17:41:12 +0200 Subject: [PATCH 03/14] [CST-15592] add accessibility tests for following pages: Metadata Import Batch Import Processes Overview New Process Quality Assurance Sources --- cypress/e2e/batch-import-page.cy.ts | 17 +++++++++++++++++ cypress/e2e/metadata-import-page.cy.ts | 17 +++++++++++++++++ cypress/e2e/new-process.cy.ts | 17 +++++++++++++++++ cypress/e2e/processes-overview.cy.ts | 18 ++++++++++++++++++ .../e2e/quality-assurance-source-page.cy.ts | 17 +++++++++++++++++ .../quality-assurance-source.component.html | 2 +- .../process-overview-table.component.html | 1 - 7 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 cypress/e2e/batch-import-page.cy.ts create mode 100644 cypress/e2e/metadata-import-page.cy.ts create mode 100644 cypress/e2e/new-process.cy.ts create mode 100644 cypress/e2e/processes-overview.cy.ts create mode 100644 cypress/e2e/quality-assurance-source-page.cy.ts diff --git a/cypress/e2e/batch-import-page.cy.ts b/cypress/e2e/batch-import-page.cy.ts new file mode 100644 index 0000000000..82660e8e43 --- /dev/null +++ b/cypress/e2e/batch-import-page.cy.ts @@ -0,0 +1,17 @@ +import { testA11y } from 'cypress/support/utils'; + +describe('Batch Import Page', () => { + // NOTE: these tests currently assume this query will return results! + beforeEach(() => { + // Must login as an Admin to see processes + cy.visit('/admin/batch-import'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should pass accessibility tests', () => { + // Batch import form must first be visible + cy.get('ds-batch-import-page').should('be.visible'); + // Analyze for accessibility issues + testA11y('ds-batch-import-page'); + }); +}); diff --git a/cypress/e2e/metadata-import-page.cy.ts b/cypress/e2e/metadata-import-page.cy.ts new file mode 100644 index 0000000000..3c1d1a91af --- /dev/null +++ b/cypress/e2e/metadata-import-page.cy.ts @@ -0,0 +1,17 @@ +import { testA11y } from 'cypress/support/utils'; + +describe('Metadata Import Page', () => { + // NOTE: these tests currently assume this query will return results! + beforeEach(() => { + // Must login as an Admin to see processes + cy.visit('/admin/metadata-import'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should pass accessibility tests', () => { + // Metadata import form must first be visible + cy.get('ds-metadata-import-page').should('be.visible'); + // Analyze for accessibility issues + testA11y('ds-metadata-import-page'); + }); +}); diff --git a/cypress/e2e/new-process.cy.ts b/cypress/e2e/new-process.cy.ts new file mode 100644 index 0000000000..d2a6ab4731 --- /dev/null +++ b/cypress/e2e/new-process.cy.ts @@ -0,0 +1,17 @@ +import { testA11y } from 'cypress/support/utils'; + +describe('New Process', () => { + // NOTE: these tests currently assume this query will return results! + beforeEach(() => { + // Must login as an Admin to see processes + cy.visit('/processes/new'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should pass accessibility tests', () => { + // Process form must first be visible + cy.get('ds-new-process').should('be.visible'); + // Analyze for accessibility issues + testA11y('ds-new-process'); + }); +}); diff --git a/cypress/e2e/processes-overview.cy.ts b/cypress/e2e/processes-overview.cy.ts new file mode 100644 index 0000000000..f0e1ccc3fe --- /dev/null +++ b/cypress/e2e/processes-overview.cy.ts @@ -0,0 +1,18 @@ +import { testA11y } from 'cypress/support/utils'; + +describe('Processes Overview', () => { + // NOTE: these tests currently assume this query will return results! + beforeEach(() => { + // Must login as an Admin to see processes + cy.visit('/processes'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should pass accessibility tests', () => { + + // Process overview must first be visible + cy.get('ds-process-overview').should('be.visible'); + // Analyze for accessibility issues + testA11y('ds-process-overview'); + }); +}); diff --git a/cypress/e2e/quality-assurance-source-page.cy.ts b/cypress/e2e/quality-assurance-source-page.cy.ts new file mode 100644 index 0000000000..beb797df41 --- /dev/null +++ b/cypress/e2e/quality-assurance-source-page.cy.ts @@ -0,0 +1,17 @@ +import { testA11y } from 'cypress/support/utils'; + +describe('Quality Assurance Source Page', () => { + // NOTE: these tests currently assume this query will return results! + beforeEach(() => { + // Must login as an Admin to see processes + cy.visit('/notifications/quality-assurance'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); + }); + + it('should pass accessibility tests', () => { + // Source page must first be visible + cy.get('ds-quality-assurance-source-page-component').should('be.visible'); + // Analyze for accessibility issues + testA11y('ds-quality-assurance-source-page-component'); + }); +}); diff --git a/src/app/notifications/qa/source/quality-assurance-source.component.html b/src/app/notifications/qa/source/quality-assurance-source.component.html index bf461873a1..faeb571234 100644 --- a/src/app/notifications/qa/source/quality-assurance-source.component.html +++ b/src/app/notifications/qa/source/quality-assurance-source.component.html @@ -7,7 +7,7 @@
-

{{'quality-assurance.source'| translate}}

+

{{'quality-assurance.source'| translate}}

{{tableEntry.info}} diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index 765b50ae86..b3120c08cd 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -466,3 +466,11 @@ ngb-accordion { .mt-ncs { margin-top: calc(var(--ds-content-spacing) * -1); } .mb-ncs { margin-bottom: calc(var(--ds-content-spacing) * -1); } .my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); } + + +.link-contrast { + // Rules for accessibility to meet minimum contrast and have an identifiable link between other texts + color: darken($link-color, 5%); + // We use underline to discern link from text as we can't make color lighter on a white bg + text-decoration: underline; +} From 69f618e8566445b800b83bcc4604bd2e59a98b28 Mon Sep 17 00:00:00 2001 From: FrancescoMolinaro Date: Tue, 23 Jul 2024 17:13:20 +0200 Subject: [PATCH 08/14] [CST-15592] improve tests, add attributes for testing, fix wrong references --- cypress/e2e/admin-add-new-modals.cy.ts | 6 ++-- cypress/e2e/admin-edit-modals.cy.ts | 6 ++-- cypress/e2e/admin-export-modals.cy.ts | 4 +-- cypress/e2e/admin-search-page.cy.ts | 3 ++ cypress/e2e/admin-workflow-page.cy.ts | 3 ++ cypress/e2e/bulk-access.cy.ts | 7 +++++ cypress/e2e/health-page.cy.ts | 31 +++++++++++++++---- .../health-page/health-page.component.html | 4 +-- .../onclick-menu-item.component.html | 3 +- 9 files changed, 50 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/admin-add-new-modals.cy.ts b/cypress/e2e/admin-add-new-modals.cy.ts index 6e2e8e6970..565ae154f1 100644 --- a/cypress/e2e/admin-add-new-modals.cy.ts +++ b/cypress/e2e/admin-add-new-modals.cy.ts @@ -14,7 +14,7 @@ describe('Admin Add New Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-new-title').click(); - cy.get('a[title="menu.section.new_community"]').click(); + cy.get('a[data-test="menu.section.new_community"]').click(); // Analyze for accessibility testA11y('ds-create-community-parent-selector'); @@ -27,7 +27,7 @@ describe('Admin Add New Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-new-title').click(); - cy.get('a[title="menu.section.new_collection"]').click(); + cy.get('a[data-test="menu.section.new_collection"]').click(); // Analyze for accessibility testA11y('ds-create-collection-parent-selector'); @@ -40,7 +40,7 @@ describe('Admin Add New Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-new-title').click(); - cy.get('a[title="menu.section.new_item"]').click(); + cy.get('a[data-test="menu.section.new_item"]').click(); // Analyze for accessibility testA11y('ds-create-item-parent-selector'); diff --git a/cypress/e2e/admin-edit-modals.cy.ts b/cypress/e2e/admin-edit-modals.cy.ts index 256a6d89cb..e96d6ce898 100644 --- a/cypress/e2e/admin-edit-modals.cy.ts +++ b/cypress/e2e/admin-edit-modals.cy.ts @@ -14,7 +14,7 @@ describe('Admin Edit Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-edit-title').click(); - cy.get('a[title="menu.section.edit_community"]').click(); + cy.get('a[data-test="menu.section.edit_community"]').click(); // Analyze for accessibility testA11y('ds-edit-community-selector'); @@ -27,7 +27,7 @@ describe('Admin Edit Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-edit-title').click(); - cy.get('a[title="menu.section.edit_collection"]').click(); + cy.get('a[data-test="menu.section.edit_collection"]').click(); // Analyze for accessibility testA11y('ds-edit-collection-selector'); @@ -40,7 +40,7 @@ describe('Admin Edit Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-edit-title').click(); - cy.get('a[title="menu.section.edit_item"]').click(); + cy.get('a[data-test="menu.section.edit_item"]').click(); // Analyze for accessibility testA11y('ds-edit-item-selector'); diff --git a/cypress/e2e/admin-export-modals.cy.ts b/cypress/e2e/admin-export-modals.cy.ts index b611bb8fd5..9f69764d19 100644 --- a/cypress/e2e/admin-export-modals.cy.ts +++ b/cypress/e2e/admin-export-modals.cy.ts @@ -14,7 +14,7 @@ describe('Admin Export Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-export-title').click(); - cy.get('a[title="menu.section.export_metadata"]').click(); + cy.get('a[data-test="menu.section.export_metadata"]').click(); // Analyze for accessibility testA11y('ds-export-metadata-selector'); @@ -27,7 +27,7 @@ describe('Admin Export Modals', () => { // Click on entry of menu cy.get('#admin-menu-section-export-title').click(); - cy.get('a[title="menu.section.export_batch"]').click(); + cy.get('a[data-test="menu.section.export_batch"]').click(); // Analyze for accessibility testA11y('ds-export-batch-selector'); diff --git a/cypress/e2e/admin-search-page.cy.ts b/cypress/e2e/admin-search-page.cy.ts index 2e1d13aa13..4fbf8939fe 100644 --- a/cypress/e2e/admin-search-page.cy.ts +++ b/cypress/e2e/admin-search-page.cy.ts @@ -12,6 +12,9 @@ describe('Admin Search Page', () => { cy.get('ds-admin-search-page').should('be.visible'); // At least one search result should be displayed cy.get('[data-test="list-object"]').should('be.visible'); + // Click each filter toggle to open *every* filter + // (As we want to scan filter section for accessibility issues as well) + cy.get('[data-test="filter-toggle"]').click({ multiple: true }); // Analyze for accessibility issues testA11y('ds-admin-search-page'); }); diff --git a/cypress/e2e/admin-workflow-page.cy.ts b/cypress/e2e/admin-workflow-page.cy.ts index cd2275f584..c3c235e346 100644 --- a/cypress/e2e/admin-workflow-page.cy.ts +++ b/cypress/e2e/admin-workflow-page.cy.ts @@ -12,6 +12,9 @@ describe('Admin Workflow Page', () => { cy.get('ds-admin-workflow-page').should('be.visible'); // At least one search result should be displayed cy.get('[data-test="list-object"]').should('be.visible'); + // Click each filter toggle to open *every* filter + // (As we want to scan filter section for accessibility issues as well) + cy.get('[data-test="filter-toggle"]').click({ multiple: true }); // Analyze for accessibility issues testA11y('ds-admin-workflow-page'); }); diff --git a/cypress/e2e/bulk-access.cy.ts b/cypress/e2e/bulk-access.cy.ts index 4d199f53f9..87033e13e4 100644 --- a/cypress/e2e/bulk-access.cy.ts +++ b/cypress/e2e/bulk-access.cy.ts @@ -11,6 +11,11 @@ describe('Bulk Access', () => { it('should pass accessibility tests', () => { // Page must first be visible cy.get('ds-bulk-access').should('be.visible'); + // At least one search result should be displayed + cy.get('[data-test="list-object"]').should('be.visible'); + // Click each filter toggle to open *every* filter + // (As we want to scan filter section for accessibility issues as well) + cy.get('[data-test="filter-toggle"]').click({ multiple: true }); // Analyze for accessibility issues testA11y('ds-bulk-access', { rules: { @@ -18,6 +23,8 @@ describe('Bulk Access', () => { // Seem to require updating ng-bootstrap and https://github.com/DSpace/dspace-angular/issues/2216 'aria-required-children': { enabled: false }, 'nested-interactive': { enabled: false }, + // Card titles fail this test currently + 'heading-order': { enabled: false }, }, } as Options); }); diff --git a/cypress/e2e/health-page.cy.ts b/cypress/e2e/health-page.cy.ts index 91c68638ea..79ebf4bc04 100644 --- a/cypress/e2e/health-page.cy.ts +++ b/cypress/e2e/health-page.cy.ts @@ -1,13 +1,14 @@ import { testA11y } from 'cypress/support/utils'; import { Options } from 'cypress-axe'; -describe('Health Page', () => { - beforeEach(() => { - // Must login as an Admin to see the page - cy.visit('/health'); - cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); - }); +beforeEach(() => { + // Must login as an Admin to see the page + cy.visit('/health'); + cy.loginViaForm(Cypress.env('DSPACE_TEST_ADMIN_USER'), Cypress.env('DSPACE_TEST_ADMIN_PASSWORD')); +}); + +describe('Health Page > Status Tab', () => { it('should pass accessibility tests', () => { // Page must first be visible cy.get('ds-health-page').should('be.visible'); @@ -22,3 +23,21 @@ describe('Health Page', () => { } as Options); }); }); + +describe('Health Page > Info Tab', () => { + it('should pass accessibility tests', () => { + // Page must first be visible + cy.get('ds-health-page').should('be.visible'); + cy.get('a[data-test="health-page.info-tab"]').click(); + + // Analyze for accessibility issues + testA11y('ds-health-page', { + 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); + }); +}); diff --git a/src/app/health-page/health-page.component.html b/src/app/health-page/health-page.component.html index d8cba1d46d..797ca0bc6e 100644 --- a/src/app/health-page/health-page.component.html +++ b/src/app/health-page/health-page.component.html @@ -3,7 +3,7 @@