diff --git a/src/app/access-control/bulk-access/bulk-access.component.html b/src/app/access-control/bulk-access/bulk-access.component.html index c164cc5c319..cda6b805bcc 100644 --- a/src/app/access-control/bulk-access/bulk-access.component.html +++ b/src/app/access-control/bulk-access/bulk-access.component.html @@ -10,7 +10,7 @@

{{ 'admin.access-control.bulk-access.title' | translate }}

- diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts index e2cee5e9356..d9487323212 100644 --- a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts +++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts @@ -27,6 +27,7 @@ import { RequestService } from '../../core/data/request.service'; import { PaginationService } from '../../core/pagination/pagination.service'; import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub'; import { FindListOptions } from '../../core/data/find-list-options.model'; +import {BtnDisabledDirective} from '../../shared/btn-disabled.directive'; describe('EPeopleRegistryComponent', () => { let component: EPeopleRegistryComponent; @@ -131,7 +132,7 @@ describe('EPeopleRegistryComponent', () => { } }), ], - declarations: [EPeopleRegistryComponent], + declarations: [EPeopleRegistryComponent, BtnDisabledDirective], providers: [ { provide: EPersonDataService, useValue: ePersonDataServiceStub }, { provide: NotificationsService, useValue: new NotificationsServiceStub() }, @@ -239,7 +240,8 @@ describe('EPeopleRegistryComponent', () => { it('should be disabled', () => { ePeopleDeleteButton = fixture.debugElement.queryAll(By.css('#epeople tr td div button.delete-button')); ePeopleDeleteButton.forEach((deleteButton: DebugElement) => { - expect(deleteButton.nativeElement.disabled).toBe(true); + expect(deleteButton.nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(deleteButton.nativeElement.classList.contains('disabled')).toBeTrue(); }); }); }); diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html index d129e94ff96..769ff84c332 100644 --- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html +++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html @@ -25,7 +25,7 @@

{{messagePrefix + '.edit' | translate}}

-
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts index f8d526fe394..0dd30b2f24b 100644 --- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts +++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts @@ -35,6 +35,7 @@ import { ActivatedRoute, Router } from '@angular/router'; import { RouterStub } from '../../../shared/testing/router.stub'; import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub'; import { RouterTestingModule } from '@angular/router/testing'; +import {BtnDisabledDirective} from '../../../shared/btn-disabled.directive'; describe('EPersonFormComponent', () => { let component: EPersonFormComponent; @@ -195,7 +196,7 @@ describe('EPersonFormComponent', () => { RouterTestingModule, TranslateModule.forRoot(), ], - declarations: [EPersonFormComponent], + declarations: [EPersonFormComponent, BtnDisabledDirective], providers: [ { provide: EPersonDataService, useValue: ePersonDataServiceStub }, { provide: GroupDataService, useValue: groupsDataService }, @@ -481,7 +482,8 @@ describe('EPersonFormComponent', () => { // ePersonDataServiceStub.activeEPerson = eperson; spyOn(component.epersonService, 'deleteEPerson').and.returnValue(createSuccessfulRemoteDataObject$('No Content', 204)); const deleteButton = fixture.debugElement.query(By.css('.delete-button')); - expect(deleteButton.nativeElement.disabled).toBe(false); + expect(deleteButton.nativeElement.getAttribute('aria-disabled')).toBeNull(); + expect(deleteButton.nativeElement.classList.contains('disabled')).toBeFalse(); deleteButton.triggerEventHandler('click', null); fixture.detectChanges(); expect(component.epersonService.deleteEPerson).toHaveBeenCalledWith(eperson); diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html index e1fc69026b3..984442ebc4d 100644 --- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html +++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html @@ -34,7 +34,7 @@

{{messagePrefix + '.headMembers' | translate}}

- diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html index 521c771cfaf..05307b86eef 100644 --- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html +++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html @@ -19,32 +19,32 @@

{{ 'collection.source.controls.head' | translate }}

diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts index 3eb83ebe8ac..ed53f8ab2ff 100644 --- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts +++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts @@ -22,6 +22,7 @@ import { TestScheduler } from 'rxjs/testing'; import { By } from '@angular/platform-browser'; import { VarDirective } from '../../../../shared/utils/var.directive'; import { ContentSourceSetSerializer } from '../../../../core/shared/content-source-set-serializer'; +import {BtnDisabledDirective} from '../../../../shared/btn-disabled.directive'; describe('CollectionSourceControlsComponent', () => { let comp: CollectionSourceControlsComponent; @@ -100,7 +101,7 @@ describe('CollectionSourceControlsComponent', () => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), RouterTestingModule], - declarations: [CollectionSourceControlsComponent, VarDirective], + declarations: [CollectionSourceControlsComponent, VarDirective, BtnDisabledDirective], providers: [ {provide: ScriptDataService, useValue: scriptDataService}, {provide: ProcessDataService, useValue: processDataService}, @@ -189,9 +190,10 @@ describe('CollectionSourceControlsComponent', () => { const buttons = fixture.debugElement.queryAll(By.css('button')); - expect(buttons[0].nativeElement.disabled).toBeTrue(); - expect(buttons[1].nativeElement.disabled).toBeTrue(); - expect(buttons[2].nativeElement.disabled).toBeTrue(); + buttons.forEach(button => { + expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(button.nativeElement.classList.contains('disabled')).toBeTrue(); + }); }); it('should be enabled when isEnabled is true', () => { comp.shouldShow = true; @@ -201,9 +203,10 @@ describe('CollectionSourceControlsComponent', () => { const buttons = fixture.debugElement.queryAll(By.css('button')); - expect(buttons[0].nativeElement.disabled).toBeFalse(); - expect(buttons[1].nativeElement.disabled).toBeFalse(); - expect(buttons[2].nativeElement.disabled).toBeFalse(); + buttons.forEach(button => { + expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(button.nativeElement.classList.contains('disabled')).toBeFalse(); + }); }); it('should call the corresponding button when clicked', () => { spyOn(comp, 'testConfiguration'); diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html index 1fe121e8988..2839ba8fbf2 100644 --- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html +++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html @@ -1,7 +1,7 @@
- diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html index 47449bda5c9..f96759a75ef 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html @@ -24,31 +24,31 @@
- - @@ -76,13 +76,13 @@
- - diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts index 7067c44fbb4..eef3e45fa93 100644 --- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts +++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts @@ -16,6 +16,7 @@ import { DATA_SERVICE_FACTORY } from '../../core/data/base/data-service.decorato import { Operation } from 'fast-json-patch'; import { RemoteData } from '../../core/data/remote-data'; import { Observable } from 'rxjs/internal/Observable'; +import {BtnDisabledDirective} from '../../shared/btn-disabled.directive'; const ADD_BTN = 'add'; const REINSTATE_BTN = 'reinstate'; @@ -71,7 +72,7 @@ describe('DsoEditMetadataComponent', () => { notificationsService = jasmine.createSpyObj('notificationsService', ['error', 'success']); TestBed.configureTestingModule({ - declarations: [DsoEditMetadataComponent, VarDirective], + declarations: [DsoEditMetadataComponent, VarDirective, BtnDisabledDirective], imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])], providers: [ TestDataService, @@ -180,7 +181,13 @@ describe('DsoEditMetadataComponent', () => { }); it(`should${disabled ? ' ' : ' not '}be disabled`, () => { - expect(btn.nativeElement.disabled).toBe(disabled); + if (disabled) { + expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(btn.nativeElement.classList.contains('disabled')).toBeTrue(); + } else { + expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true'); + expect(btn.nativeElement.classList.contains('disabled')).toBeFalse(); + } }); } else { it('should not exist', () => { diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html index 189d0bee40c..6cff2903b94 100644 --- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html +++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html @@ -28,7 +28,7 @@

{{'forgot-password.form.head' | translate}}

diff --git a/src/app/info/end-user-agreement/end-user-agreement.component.html b/src/app/info/end-user-agreement/end-user-agreement.component.html index 2ab0005c69f..ceb2ad23a4c 100644 --- a/src/app/info/end-user-agreement/end-user-agreement.component.html +++ b/src/app/info/end-user-agreement/end-user-agreement.component.html @@ -7,7 +7,7 @@
- +
diff --git a/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts b/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts index dc4f4cf4124..c7735f0579f 100644 --- a/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts +++ b/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts @@ -11,6 +11,7 @@ import { Store } from '@ngrx/store'; import { By } from '@angular/platform-browser'; import { LogOutAction } from '../../core/auth/auth.actions'; import { ActivatedRouteStub } from '../../shared/testing/active-router.stub'; +import {BtnDisabledDirective} from '../../shared/btn-disabled.directive'; describe('EndUserAgreementComponent', () => { let component: EndUserAgreementComponent; @@ -49,7 +50,7 @@ describe('EndUserAgreementComponent', () => { init(); TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - declarations: [EndUserAgreementComponent], + declarations: [EndUserAgreementComponent, BtnDisabledDirective], providers: [ { provide: EndUserAgreementService, useValue: endUserAgreementService }, { provide: NotificationsService, useValue: notificationsService }, @@ -81,7 +82,8 @@ describe('EndUserAgreementComponent', () => { it('should disable the save button', () => { const button = fixture.debugElement.query(By.css('#button-save')).nativeElement; - expect(button.disabled).toBeTruthy(); + expect(button.getAttribute('aria-disabled')).toBe('true'); + expect(button.classList.contains('disabled')).toBeTrue(); }); }); diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html index 6ca584c82ef..c5c4b460a23 100644 --- a/src/app/info/feedback/feedback-form/feedback-form.component.html +++ b/src/app/info/feedback/feedback-form/feedback-form.component.html @@ -41,9 +41,9 @@

{{ 'info.feedback.head' | translate }}

- +
-
\ No newline at end of file + diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts b/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts index c3d38a28768..7b7c6e28b65 100644 --- a/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts +++ b/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts @@ -18,6 +18,7 @@ import { Router } from '@angular/router'; import { RouterMock } from '../../../shared/mocks/router.mock'; import { NativeWindowService } from '../../../core/services/window.service'; import { NativeWindowMockFactory } from '../../../shared/mocks/mock-native-window-ref'; +import {BtnDisabledDirective} from '../../../shared/btn-disabled.directive'; describe('FeedbackFormComponent', () => { @@ -38,7 +39,7 @@ describe('FeedbackFormComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot()], - declarations: [FeedbackFormComponent], + declarations: [FeedbackFormComponent, BtnDisabledDirective], providers: [ { provide: RouteService, useValue: routeServiceStub }, { provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() }, @@ -72,7 +73,8 @@ describe('FeedbackFormComponent', () => { }); it('should have disabled button', () => { - expect(de.query(By.css('button')).nativeElement.disabled).toBeTrue(); + expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeTrue(); }); describe('when message is inserted', () => { @@ -83,7 +85,8 @@ describe('FeedbackFormComponent', () => { }); it('should not have disabled button', () => { - expect(de.query(By.css('button')).nativeElement.disabled).toBeFalse(); + expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeFalse(); }); it('on submit should call createFeedback of feedbackDataServiceStub service', () => { diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html index 2d4ac89fcc3..5b4b1bda521 100644 --- a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html +++ b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html @@ -79,7 +79,7 @@

{{'bitstream-request-a-copy.header' | translate}}

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html index 2df1c363b0d..dc2555469b3 100644 --- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html +++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html @@ -16,7 +16,7 @@ class="fas fa-undo-alt">  {{"item.edit.bitstreams.reinstate-button" | translate}} - - - diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html index d136f003f4e..e8061ae88bf 100644 --- a/src/app/item-page/edit-item-page/item-move/item-move.component.html +++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html @@ -40,7 +40,7 @@

{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle - - diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html index 5364d5b9aaa..1b37a615c48 100644 --- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html +++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html @@ -5,12 +5,12 @@
- - diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts b/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts index 7570119b3a7..7d7087e02da 100644 --- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts +++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts @@ -4,6 +4,7 @@ import { ItemOperationComponent } from './item-operation.component'; import { TranslateModule } from '@ngx-translate/core'; import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; +import {BtnDisabledDirective} from '../../../shared/btn-disabled.directive'; describe('ItemOperationComponent', () => { let itemOperation: ItemOperation; @@ -14,7 +15,7 @@ describe('ItemOperationComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])], - declarations: [ItemOperationComponent] + declarations: [ItemOperationComponent, BtnDisabledDirective] }).compileComponents(); })); @@ -40,7 +41,8 @@ describe('ItemOperationComponent', () => { const span = fixture.debugElement.query(By.css('.action-label span')).nativeElement; expect(span.textContent).toContain('item.edit.tabs.status.buttons.key1.label'); const button = fixture.debugElement.query(By.css('button')).nativeElement; - expect(button.disabled).toBeTrue(); + expect(button.getAttribute('aria-disabled')).toBe('true'); + expect(button.classList.contains('disabled')).toBeTrue(); expect(button.textContent).toContain('item.edit.tabs.status.buttons.key1.button'); }); }); diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html index a4cc100377f..27faee89a79 100644 --- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html +++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html @@ -1,6 +1,6 @@

{{relationshipMessageKey$ | async | translate}} - diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts index 183720b2bb0..4ff09154cda 100644 --- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts +++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts @@ -356,7 +356,8 @@ describe('EditRelationshipListComponent', () => { comp.hasChanges = observableOf(true); fixture.detectChanges(); const element = de.query(By.css('.btn-success')); - expect(element.nativeElement?.disabled).toBeTrue(); + expect(element.nativeElement?.getAttribute('aria-disabled')).toBe('true'); + expect(element.nativeElement?.classList.contains('disabled')).toBeTrue(); }); }); diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html index e65cd237a34..8cd86d597b8 100644 --- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html +++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html @@ -9,12 +9,12 @@

- -
@@ -8,7 +8,7 @@ ngbDropdown *ngIf="(moreThanOne$ | async)">
-
diff --git a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html index a5bbb38d025..3233aa55550 100644 --- a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html +++ b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html @@ -29,7 +29,7 @@ {{ 'dso-selector.claim.item.not-mine-label' | translate }} - diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html index 2d959c1dfea..d14a9edfecc 100644 --- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html +++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html @@ -13,7 +13,7 @@

{{'researcher.profile.not.associated' | translate}}

- - - diff --git a/src/app/register-page/create-profile/create-profile.component.html b/src/app/register-page/create-profile/create-profile.component.html index dd9528925a7..14c06fd8db3 100644 --- a/src/app/register-page/create-profile/create-profile.component.html +++ b/src/app/register-page/create-profile/create-profile.component.html @@ -81,7 +81,7 @@

{{'register-page.create-profile.header' | translate}}

diff --git a/src/app/request-copy/email-request-copy/email-request-copy.component.html b/src/app/request-copy/email-request-copy/email-request-copy.component.html index 286e87554b8..b2227bfbaee 100644 --- a/src/app/request-copy/email-request-copy/email-request-copy.component.html +++ b/src/app/request-copy/email-request-copy/email-request-copy.component.html @@ -13,7 +13,7 @@
@@ -76,7 +76,7 @@
@@ -93,7 +93,7 @@ @@ -103,7 +103,7 @@ diff --git a/src/app/shared/btn-disabled.directive.ts b/src/app/shared/btn-disabled.directive.ts new file mode 100644 index 00000000000..512aa87edef --- /dev/null +++ b/src/app/shared/btn-disabled.directive.ts @@ -0,0 +1,57 @@ +import { Directive, Input, HostBinding, HostListener } from '@angular/core'; + +@Directive({ + selector: '[dsBtnDisabled]' +}) + +/** + * This directive can be added to a html element to disable it (make it non-interactive). + * It acts as a replacement for HTML's disabled attribute. + * + * This directive should always be used instead of the HTML disabled attribute as it is more accessible. + */ +export class BtnDisabledDirective { + + @Input() set dsBtnDisabled(value: boolean) { + this.isDisabled = !!value; + } + + /** + * Binds the aria-disabled attribute to the directive's isDisabled property. + * This is used to make the element accessible to screen readers. If the element is disabled, the screen reader will announce it as such. + */ + @HostBinding('attr.aria-disabled') isDisabled = false; + + /** + * Binds the class attribute to the directive's isDisabled property. + * This is used to style the element when it is disabled (make it look disabled). + */ + @HostBinding('class.disabled') get disabledClass() { return this.isDisabled; } + + /** + * Prevents the default action and stops the event from propagating when the element is disabled. + * This is used to prevent the element from being interacted with when it is disabled (via mouse click). + * @param event The click event. + */ + @HostListener('click', ['$event']) + handleClick(event: Event) { + if (this.isDisabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + } + + /** + * Prevents the default action and stops the event from propagating when the element is disabled. + * This is used to prevent the element from being interacted with when it is disabled (via keystrokes). + * @param event The keydown event. + */ + @HostListener('keydown', ['$event']) + handleKeydown(event: KeyboardEvent) { + if (this.isDisabled && (event.key === 'Enter' || event.key === 'Space')) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + } +} + diff --git a/src/app/shared/disabled-directive.spec.ts b/src/app/shared/disabled-directive.spec.ts new file mode 100644 index 00000000000..71515c48ff3 --- /dev/null +++ b/src/app/shared/disabled-directive.spec.ts @@ -0,0 +1,97 @@ +import { Component, DebugElement } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { BtnDisabledDirective } from './btn-disabled.directive'; + +@Component({ + template: ` + + ` +}) +class TestComponent { + isDisabled = false; +} + +describe('DisabledDirective', () => { + let component: TestComponent; + let fixture: ComponentFixture; + let button: DebugElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestComponent, BtnDisabledDirective] + }); + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + button = fixture.debugElement.query(By.css('button')); + fixture.detectChanges(); + }); + + it('should bind aria-disabled to false initially', () => { + expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(button.nativeElement.classList.contains('disabled')).toBeFalse(); + }); + + it('should bind aria-disabled to true and add disabled class when isDisabled is true', () => { + component.isDisabled = true; + fixture.detectChanges(); + + expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(button.nativeElement.classList.contains('disabled')).toBeTrue(); + }); + + it('should bind aria-disabled to false and not have disabled class when isDisabled is false', () => { + component.isDisabled = false; + fixture.detectChanges(); + + expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(button.nativeElement.classList.contains('disabled')).toBeFalse(); + }); + + it('should prevent click events when disabled', () => { + component.isDisabled = true; + fixture.detectChanges(); + + let clickHandled = false; + button.nativeElement.addEventListener('click', () => clickHandled = true); + + button.nativeElement.click(); + + expect(clickHandled).toBeFalse(); + }); + + it('should prevent Enter or Space keydown events when disabled', () => { + component.isDisabled = true; + fixture.detectChanges(); + + let keydownHandled = false; + button.nativeElement.addEventListener('keydown', () => keydownHandled = true); + + const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' }); + const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' }); + + button.nativeElement.dispatchEvent(enterEvent); + button.nativeElement.dispatchEvent(spaceEvent); + + expect(keydownHandled).toBeFalse(); + }); + + it('should allow click and keydown events when not disabled', () => { + let clickHandled = false; + let keydownHandled = false; + + button.nativeElement.addEventListener('click', () => clickHandled = true); + button.nativeElement.addEventListener('keydown', () => keydownHandled = true); + + button.nativeElement.click(); + + const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' }); + const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' }); + + button.nativeElement.dispatchEvent(enterEvent); + button.nativeElement.dispatchEvent(spaceEvent); + + expect(clickHandled).toBeTrue(); + expect(keydownHandled).toBeTrue(); + }); +}); diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html index c12ea613472..e87b7c5cc6c 100644 --- a/src/app/shared/ds-select/ds-select.component.html +++ b/src/app/shared/ds-select/ds-select.component.html @@ -13,7 +13,7 @@ class="btn btn-outline-primary selection" (blur)="close.emit($event)" (click)="close.emit($event)" - [disabled]="disabled" + [dsBtnDisabled]="disabled" ngbDropdownToggle> diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html index 6e427400eec..05032813296 100644 --- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html +++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html @@ -1,7 +1,7 @@
-
    diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html index bbc388a6014..0738e2f28ab 100644 --- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html +++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html @@ -5,7 +5,7 @@ {{itemModel.text | translate}} - @@ -13,7 +13,7 @@
    - @@ -60,7 +60,7 @@ type="button" ngbTooltip="{{'form.clear-help' | translate}}" placement="top" - [disabled]="model.readOnly" + [dsBtnDisabled]="model.readOnly" (click)="remove()">{{'form.clear' | translate}}
    @@ -69,14 +69,14 @@ type="button" ngbTooltip="{{'form.edit-help' | translate}}" placement="top" - [disabled]="isEditDisabled()" + [dsBtnDisabled]="isEditDisabled()" (click)="switchEditMode()">{{'form.edit' | translate}}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts index 2fea4fc9856..81db85f863b 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts @@ -26,6 +26,7 @@ import { mockDynamicFormLayoutService, mockDynamicFormValidationService } from '../../../../../testing/dynamic-form-mock-services'; +import {BtnDisabledDirective} from '../../../../../btn-disabled.directive'; let LOOKUP_TEST_MODEL_CONFIG: DynamicLookupModelConfig = { vocabularyOptions: { @@ -153,7 +154,8 @@ describe('Dynamic Lookup component', () => { DsDynamicLookupComponent, TestComponent, AuthorityConfidenceStateDirective, - ObjNgFor + ObjNgFor, + BtnDisabledDirective ], // declare the test component providers: [ ChangeDetectorRef, @@ -235,8 +237,10 @@ describe('Dynamic Lookup component', () => { const de = lookupFixture.debugElement.queryAll(By.css('button')); const searchBtnEl = de[0].nativeElement; const editBtnEl = de[1].nativeElement; - expect(searchBtnEl.disabled).toBe(true); - expect(editBtnEl.disabled).toBe(true); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(editBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(editBtnEl.classList.contains('disabled')).toBeTrue(); expect(editBtnEl.textContent.trim()).toBe('form.edit'); }); @@ -334,8 +338,10 @@ describe('Dynamic Lookup component', () => { const de = lookupFixture.debugElement.queryAll(By.css('button')); const searchBtnEl = de[0].nativeElement; const saveBtnEl = de[1].nativeElement; - expect(searchBtnEl.disabled).toBe(true); - expect(saveBtnEl.disabled).toBe(false); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true'); + expect(saveBtnEl.classList.contains('disabled')).toBeFalse(); expect(saveBtnEl.textContent.trim()).toBe('form.save'); }); @@ -375,8 +381,10 @@ describe('Dynamic Lookup component', () => { const de = lookupFixture.debugElement.queryAll(By.css('button')); const searchBtnEl = de[0].nativeElement; const saveBtnEl = de[1].nativeElement; - expect(searchBtnEl.disabled).toBe(true); - expect(saveBtnEl.disabled).toBe(false); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true'); + expect(saveBtnEl.classList.contains('disabled')).toBeFalse(); expect(saveBtnEl.textContent.trim()).toBe('form.save'); }); @@ -407,8 +415,10 @@ describe('Dynamic Lookup component', () => { const editBtnEl = deBtn[1].nativeElement; expect(de.length).toBe(2); - expect(searchBtnEl.disabled).toBe(true); - expect(editBtnEl.disabled).toBe(true); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(editBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(editBtnEl.classList.contains('disabled')).toBeTrue(); expect(editBtnEl.textContent.trim()).toBe('form.edit'); }); @@ -504,8 +514,10 @@ describe('Dynamic Lookup component', () => { const de = lookupFixture.debugElement.queryAll(By.css('button')); const searchBtnEl = de[0].nativeElement; const saveBtnEl = de[1].nativeElement; - expect(searchBtnEl.disabled).toBe(true); - expect(saveBtnEl.disabled).toBe(false); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true'); + expect(saveBtnEl.classList.contains('disabled')).toBeFalse(); expect(saveBtnEl.textContent.trim()).toBe('form.save'); }); @@ -547,8 +559,10 @@ describe('Dynamic Lookup component', () => { const de = lookupFixture.debugElement.queryAll(By.css('button')); const searchBtnEl = de[0].nativeElement; const saveBtnEl = de[1].nativeElement; - expect(searchBtnEl.disabled).toBe(true); - expect(saveBtnEl.disabled).toBe(false); + expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true'); + expect(searchBtnEl.classList.contains('disabled')).toBeTrue(); + expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true'); + expect(saveBtnEl.classList.contains('disabled')).toBeFalse(); expect(saveBtnEl.textContent.trim()).toBe('form.save'); }); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html index 05f443aad57..6a0e34f6719 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html @@ -32,21 +32,21 @@ @@ -73,18 +73,18 @@
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html index 5b39068ae22..fca41bc2523 100644 --- a/src/app/shared/form/form.component.html +++ b/src/app/shared/form/form.component.html @@ -41,7 +41,7 @@ title="{{'form.discard' | translate}}" attr.aria-label="{{'form.discard' | translate}}" (click)="removeItem($event, context, index)" - [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)"> + [dsBtnDisabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)"> {{'form.discard' | translate}}
@@ -62,7 +62,7 @@ diff --git a/src/app/shared/form/number-picker/number-picker.component.html b/src/app/shared/form/number-picker/number-picker.component.html index 12e29fa70e4..9b9d038e868 100644 --- a/src/app/shared/form/number-picker/number-picker.component.html +++ b/src/app/shared/form/number-picker/number-picker.component.html @@ -3,7 +3,7 @@ class="btn btn-link-focus" type="button" tabindex="0" - [disabled]="disabled" + [dsBtnDisabled]="disabled" (click)="toggleUp()"> {{'form.number-picker.increment' | translate: {field: name} }} @@ -30,7 +30,7 @@ class="btn btn-link-focus" type="button" tabindex="0" - [disabled]="disabled" + [dsBtnDisabled]="disabled" (click)="toggleDown()"> {{'form.number-picker.decrement' | translate: {field: name} }} diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html index ad894328a61..ff265b40c8f 100644 --- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html +++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html @@ -6,7 +6,7 @@ [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate" [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
- @@ -14,7 +14,7 @@ [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate"> {{'vocabulary-treeview.search.form.reset' | translate}} - @@ -51,7 +51,7 @@

{{ (message | async) | translate }}

+ [dsBtnDisabled]="!form.valid"> {{"login.form.submit" | translate}}
diff --git a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html index 7944d24d96d..9785715ee80 100644 --- a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html +++ b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html @@ -1,7 +1,7 @@ diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html index 8271633bcff..d1c2986076a 100644 --- a/src/app/shared/object-select/item-select/item-select.component.html +++ b/src/app/shared/object-select/item-select/item-select.component.html @@ -42,7 +42,7 @@ diff --git a/src/app/shared/object-select/item-select/item-select.component.spec.ts b/src/app/shared/object-select/item-select/item-select.component.spec.ts index fabd45e4842..9fb9a0260a1 100644 --- a/src/app/shared/object-select/item-select/item-select.component.spec.ts +++ b/src/app/shared/object-select/item-select/item-select.component.spec.ts @@ -24,6 +24,7 @@ import { LinkHeadService } from '../../../core/services/link-head.service'; import { GroupDataService } from '../../../core/eperson/group-data.service'; import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub'; import { ConfigurationProperty } from '../../../core/shared/configuration-property.model'; +import {BtnDisabledDirective} from '../../btn-disabled.directive'; describe('ItemSelectComponent', () => { let comp: ItemSelectComponent; @@ -98,7 +99,7 @@ describe('ItemSelectComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), SharedModule, RouterTestingModule.withRoutes([])], - declarations: [], + declarations: [BtnDisabledDirective], providers: [ { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockItemList[1].id]) }, { provide: HostWindowService, useValue: new HostWindowServiceStub(0) }, diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html index a1ec660592b..836c94bf6b3 100644 --- a/src/app/shared/pagination/pagination.component.html +++ b/src/app/shared/pagination/pagination.component.html @@ -56,12 +56,12 @@
-
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html index f967ffe132a..fe9527c2665 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.html +++ b/src/app/submission/form/collection/submission-form-collection.component.html @@ -25,7 +25,7 @@ class="btn btn-outline-primary" (blur)="onClose()" (click)="onClose()" - [disabled]="(processingChange$ | async) || collectionModifiable == false || isReadonly" + [dsBtnDisabled]="(processingChange$ | async) || collectionModifiable == false || isReadonly" ngbDropdownToggle> {{ selectedCollectionName$ | async }} diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts index c76de83b833..467f164f89c 100644 --- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts +++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts @@ -25,6 +25,7 @@ import { Collection } from '../../../core/shared/collection.model'; import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils'; import { DSONameService } from '../../../core/breadcrumbs/dso-name.service'; import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock'; +import {BtnDisabledDirective} from '../../../shared/btn-disabled.directive'; describe('SubmissionFormCollectionComponent Component', () => { @@ -135,7 +136,8 @@ describe('SubmissionFormCollectionComponent Component', () => { ], declarations: [ SubmissionFormCollectionComponent, - TestComponent + TestComponent, + BtnDisabledDirective ], providers: [ { provide: DSONameService, useValue: new DSONameServiceMock() }, @@ -255,7 +257,8 @@ describe('SubmissionFormCollectionComponent Component', () => { it('the dropdown button should be disabled when isReadonly is true', () => { comp.isReadonly = true; fixture.detectChanges(); - expect(dropdowBtn.nativeNode.attributes.disabled).toBeDefined(); + expect(dropdowBtn.nativeNode.getAttribute('aria-disabled')).toBe('true'); + expect(dropdowBtn.nativeNode.classList.contains('disabled')).toBeTrue(); }); it('should be simulated when the drop-down menu is closed', () => { diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html index e898e1c2207..457a56cc769 100644 --- a/src/app/submission/form/footer/submission-form-footer.component.html +++ b/src/app/submission/form/footer/submission-form-footer.component.html @@ -5,7 +5,7 @@ id="discard" [attr.data-test]="'discard' | dsBrowserOnly" class="btn btn-danger" - [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" + [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" (click)="$event.preventDefault();confirmDiscard(content)"> {{'submission.general.discard.submit' | translate}} @@ -28,7 +28,7 @@ class="btn btn-secondary" id="save" [attr.data-test]="'save' | dsBrowserOnly" - [disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)" + [dsBtnDisabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)" (click)="save($event)"> {{'submission.general.save' | translate}} @@ -38,7 +38,7 @@ class="btn" id="saveForLater" [attr.data-test]="'save-for-later' | dsBrowserOnly" - [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" + [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" (click)="saveLater($event)"> {{'submission.general.save-later' | translate}} @@ -47,7 +47,7 @@ id="deposit" [attr.data-test]="'deposit' | dsBrowserOnly" class="btn btn-success" - [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" + [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)" (click)="deposit($event)"> {{'submission.general.deposit' | translate}} diff --git a/src/app/submission/form/footer/submission-form-footer.component.spec.ts b/src/app/submission/form/footer/submission-form-footer.component.spec.ts index dd28f9a10a7..658926834c9 100644 --- a/src/app/submission/form/footer/submission-form-footer.component.spec.ts +++ b/src/app/submission/form/footer/submission-form-footer.component.spec.ts @@ -16,6 +16,7 @@ import { SubmissionFormFooterComponent } from './submission-form-footer.componen import { SubmissionRestService } from '../../../core/submission/submission-rest.service'; import { createTestComponent } from '../../../shared/testing/utils.test'; import { BrowserOnlyMockPipe } from '../../../shared/testing/browser-only-mock.pipe'; +import {BtnDisabledDirective} from '../../../shared/btn-disabled.directive'; const submissionServiceStub: SubmissionServiceStub = new SubmissionServiceStub(); @@ -39,6 +40,7 @@ describe('SubmissionFormFooterComponent', () => { SubmissionFormFooterComponent, TestComponent, BrowserOnlyMockPipe, + BtnDisabledDirective ], providers: [ { provide: SubmissionService, useValue: submissionServiceStub }, @@ -215,7 +217,8 @@ describe('SubmissionFormFooterComponent', () => { fixture.detectChanges(); const depositBtn: any = fixture.debugElement.query(By.css('.btn-success')); - expect(depositBtn.nativeElement.disabled).toBeFalsy(); + expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse(); }); it('should not have deposit button disabled when submission is valid', () => { @@ -224,7 +227,8 @@ describe('SubmissionFormFooterComponent', () => { fixture.detectChanges(); const depositBtn: any = fixture.debugElement.query(By.css('.btn-success')); - expect(depositBtn.nativeElement.disabled).toBeFalsy(); + expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse(); }); it('should disable save button when all modifications had been saved', () => { @@ -232,7 +236,8 @@ describe('SubmissionFormFooterComponent', () => { fixture.detectChanges(); const saveBtn: any = fixture.debugElement.query(By.css('#save')); - expect(saveBtn.nativeElement.disabled).toBeTruthy(); + expect(saveBtn.nativeElement.getAttribute('aria-disabled')).toBe('true'); + expect(saveBtn.nativeElement.classList.contains('disabled')).toBeTrue(); }); it('should enable save button when there are not saved modifications', () => { @@ -240,7 +245,8 @@ describe('SubmissionFormFooterComponent', () => { fixture.detectChanges(); const saveBtn: any = fixture.debugElement.query(By.css('#save')); - expect(saveBtn.nativeElement.disabled).toBeFalsy(); + expect(saveBtn.nativeElement.getAttribute('aria-disabled')).toBe('false'); + expect(saveBtn.nativeElement.classList.contains('disabled')).toBeFalse(); }); }); diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html index 040987d37bd..cb8dde18c50 100644 --- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html +++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html @@ -23,6 +23,6 @@

{{'submission.import-external.source.loading' | translate}}

- +
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html index 2baa6c1555a..b529d9aee49 100644 --- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html +++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html @@ -1,7 +1,7 @@

{{'submission.sections.upload.edit.title' | translate}}

-
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html index cd0ee512fde..3567ef5c64d 100644 --- a/src/app/submission/sections/upload/file/section-upload-file.component.html +++ b/src/app/submission/sections/upload/file/section-upload-file.component.html @@ -19,7 +19,7 @@

{{fileName}} ({{fileData?.sizeBytes | dsFileSize}}) -

- \ No newline at end of file + diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss index 99cc075dbe7..07c1cf538e0 100644 --- a/src/styles/_global-styles.scss +++ b/src/styles/_global-styles.scss @@ -496,3 +496,14 @@ ngb-accordion { // We use underline to discern link from text as we can't make color lighter on a white bg text-decoration: underline; } + +// An element that is disabled should not have focus styles to avoid confusion +// It however is still focusable for screen readers and keyboard navigation +.disabled { + pointer-events: none; +} + +.disabled:focus { + outline: none; + box-shadow: none; +}