Merge branch 'w2p-117544_support-for-disabled-elements-for-screen-readers-7.6' into w2p-117544_support-for-disabled-elements-for-screen-readers-7.x

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

@@ -10,7 +10,7 @@
     <button class="btn btn-outline-primary mr-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
-    <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
+    <button class="btn btn-primary" [dsDisabled]="!canExport()" (click)="submit()">
       {{ 'access-control-execute' | translate }}
     </button>
   </div>

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 {DisabledDirective} from '../../shared/disabled-directive';
 
 describe('EPeopleRegistryComponent', () => {
   let component: EPeopleRegistryComponent;
@@ -131,7 +132,7 @@ describe('EPeopleRegistryComponent', () => {
           }
         }),
       ],
-      declarations: [EPeopleRegistryComponent],
+      declarations: [EPeopleRegistryComponent, DisabledDirective],
       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();
       });
     });
   });

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

@@ -35,6 +35,7 @@ import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterStub } from '../../../shared/testing/router.stub';
 import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+import {DisabledDirective} from '../../../shared/disabled-directive';
 
 describe('EPersonFormComponent', () => {
   let component: EPersonFormComponent;
@@ -202,7 +203,7 @@ describe('EPersonFormComponent', () => {
           }
         }),
       ],
-      declarations: [EPersonFormComponent],
+      declarations: [EPersonFormComponent, DisabledDirective],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: GroupDataService, useValue: groupsDataService },
@@ -508,7 +509,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')).toBe('false');
+      expect(deleteButton.nativeElement.classList.contains('disabled')).toBeFalse();
       deleteButton.triggerEventHandler('click', null);
       fixture.detectChanges();
       expect(component.epersonService.deleteEPerson).toHaveBeenCalledWith(eperson);

src/app/access-control/group-registry/groups-registry.component.html

@@ -69,7 +69,7 @@
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button *ngSwitchCase="false"
-                      [disabled]="true"
+                      [dsDisabled]="true"
                       class="btn btn-outline-primary btn-sm btn-edit"
                       placement="left"
                       [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"

src/app/access-control/group-registry/groups-registry.component.spec.ts

@@ -34,6 +34,7 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { DSONameServiceMock, UNDEFINED_NAME } from '../../shared/mocks/dso-name.service.mock';
+import {DisabledDirective} from '../../shared/disabled-directive';
 
 describe('GroupsRegistryComponent', () => {
   let component: GroupsRegistryComponent;
@@ -171,7 +172,7 @@ describe('GroupsRegistryComponent', () => {
           }
         }),
       ],
-      declarations: [GroupsRegistryComponent],
+      declarations: [GroupsRegistryComponent, DisabledDirective],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
@@ -231,7 +232,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
 
@@ -265,7 +267,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
     });
@@ -284,7 +287,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeTrue();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBe('true');
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeTrue();
         });
       });
     });

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

@@ -6,10 +6,10 @@
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
                 <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)">
+                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsDisabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
-                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [dsDisabled]="(processing$ | async)">
                       <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                       <span *ngIf="!(processing$ | async)"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                     </button>

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

@@ -19,32 +19,32 @@
         </div>
 
         <button *ngIf="!(testConfigRunning$ |async)" class="btn btn-secondary"
-                [disabled]="!(isEnabled)"
+                [dsDisabled]="!(isEnabled)"
                 (click)="testConfiguration(contentSource)">
             <span>{{'collection.source.controls.test.submit' | translate}}</span>
         </button>
         <button *ngIf="(testConfigRunning$ |async)" class="btn btn-secondary"
-                [disabled]="true">
+                [dsDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span>{{'collection.source.controls.test.running' | translate}}</span>
         </button>
         <button *ngIf="!(importRunning$ |async)" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsDisabled]="!(isEnabled)"
                 (click)="importNow()">
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.submit' | translate}}</span>
         </button>
         <button *ngIf="(importRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.running' | translate}}</span>
         </button>
         <button *ngIf="!(reImportRunning$ |async)" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsDisabled]="!(isEnabled)"
                 (click)="resetAndReimport()">
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.submit' | translate}}</span>
         </button>
         <button *ngIf="(reImportRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.running' | translate}}</span>
         </button>

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 {DisabledDirective} from '../../../../shared/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, DisabledDirective],
       providers: [
         {provide: ScriptDataService, useValue: scriptDataService},
         {provide: ProcessDataService, useValue: processDataService},
@@ -189,9 +190,11 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeTrue();
+      buttons.forEach(button => {
-      expect(buttons[1].nativeElement.disabled).toBeTrue();
+        console.log(button.nativeElement);
-      expect(buttons[2].nativeElement.disabled).toBeTrue();
+        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 +204,10 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeFalse();
+      buttons.forEach(button => {
-      expect(buttons[1].nativeElement.disabled).toBeFalse();
+        expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
-      expect(buttons[2].nativeElement.disabled).toBeFalse();
+        expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+      });
     });
     it('should call the corresponding button when clicked', () => {
       spyOn(comp, 'testConfiguration');

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

@@ -11,6 +11,7 @@ import { ItemMetadataRepresentation } from '../../../core/shared/metadata-repres
 import { MetadataValue, VIRTUAL_METADATA_PREFIX } from '../../../core/shared/metadata.models';
 import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form';
 import { By } from '@angular/platform-browser';
+import {DisabledDirective} from '../../../shared/disabled-directive';
 
 const EDIT_BTN = 'edit';
 const CONFIRM_BTN = 'confirm';
@@ -49,7 +50,7 @@ describe('DsoEditMetadataValueComponent', () => {
     initServices();
 
     TestBed.configureTestingModule({
-      declarations: [DsoEditMetadataValueComponent, VarDirective],
+      declarations: [DsoEditMetadataValueComponent, VarDirective, DisabledDirective],
       imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       providers: [
         { provide: RelationshipDataService, useValue: relationshipService },
@@ -158,7 +159,14 @@ describe('DsoEditMetadataValueComponent', () => {
         });
 
         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 {
+            // Can be null or false, depending on if button was ever disabled so just check not true
+            expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
+          }
         });
       } else {
         it('should not exist', () => {

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 {DisabledDirective} from '../../shared/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, DisabledDirective],
       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', () => {

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

@@ -28,7 +28,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValid"
+                    [dsDisabled]="isInValid"
                     class="btn btn-default btn-primary"
                     (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
         </div>

src/app/info/end-user-agreement/end-user-agreement.component.html

@@ -7,7 +7,7 @@
 
     <div class="d-flex mt-4">
       <button id="button-cancel" type="button" (click)="cancel()" class="btn btn-outline-secondary mr-auto">{{ 'info.end-user-agreement.buttons.cancel' | translate }}</button>
-      <button id="button-save" type="submit" class="btn btn-primary" [disabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
+      <button id="button-save" type="submit" class="btn btn-primary" [dsDisabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
     </div>
   </form>
 </div>

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 {DisabledDirective} from '../../shared/disabled-directive';
 
 describe('EndUserAgreementComponent', () => {
   let component: EndUserAgreementComponent;
@@ -49,7 +50,7 @@ describe('EndUserAgreementComponent', () => {
     init();
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [EndUserAgreementComponent],
+      declarations: [EndUserAgreementComponent, DisabledDirective],
       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();
     });
   });
 

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 {DisabledDirective} from '../../../shared/disabled-directive';
 
 
 describe('FeedbackFormComponent', () => {
@@ -38,7 +39,7 @@ describe('FeedbackFormComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
-      declarations: [FeedbackFormComponent],
+      declarations: [FeedbackFormComponent, DisabledDirective],
       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', () => {

src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html

@@ -79,7 +79,7 @@
             </a>
 
             <button
-                    [disabled]="requestCopyForm.invalid"
+                    [dsDisabled]="requestCopyForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="onSubmit()">{{'bitstream-request-a-copy.submit' | translate}}</button>
         </div>

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

@@ -40,7 +40,7 @@
               <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
               </button>
-              <button class="btn btn-primary" [disabled]="!canMove" (click)="moveToCollection()">
+              <button class="btn btn-primary" [dsDisabled]="!canMove" (click)="moveToCollection()">
               <span *ngIf="!processing">
                 <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
               </span>
@@ -48,7 +48,7 @@
                 <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
               </span>
               </button>
-              <button class="btn btn-danger" [disabled]="!canSubmit" (click)="discard()">
+              <button class="btn btn-danger" [dsDisabled]="!canSubmit" (click)="discard()">
                 <i class="fas fa-times"></i> {{"item.edit.move.discard-button" | translate}}
               </button>
             </div>

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

@@ -5,12 +5,12 @@
 </div>
 <div class="col-9 float-left action-button">
   <span *ngIf="operation.authorized">
-    <button class="btn btn-outline-primary" [disabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+    <button class="btn btn-outline-primary" [dsDisabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
     </button>
   </span>
   <span *ngIf="!operation.authorized" [ngbTooltip]="'item.edit.tabs.status.buttons.unauthorized' | translate">
-    <button class="btn btn-outline-primary" [disabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+    <button class="btn btn-outline-primary" [dsDisabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
     </button>
   </span>

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 {DisabledDirective} from '../../../shared/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, DisabledDirective]
     }).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');
   });
 });

src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts

@@ -353,7 +353,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();
         });
       });
 

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

@@ -9,12 +9,12 @@
   </div>
   <div class="col-2">
     <div class="btn-group relationship-action-buttons">
-      <button [disabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
+      <button [dsDisabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
               class="btn btn-outline-danger btn-sm"
               title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
         <i class="fas fa-trash-alt fa-fw"></i>
       </button>
-      <button [disabled]="!canUndo()" (click)="undo()"
+      <button [dsDisabled]="!canUndo()" (click)="undo()"
               class="btn btn-outline-warning btn-sm"
               title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
         <i class="fas fa-undo-alt fa-fw"></i>

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

@@ -19,7 +19,7 @@
 <div class="buttons" *ngIf="medias?.length > 1">
   <button
     class="btn btn-primary previous"
-    [disabled]="currentIndex === 0"
+    [dsDisabled]="currentIndex === 0"
     (click)="prevMedia()"
   >
     {{ "media-viewer.previous" | translate }}
@@ -27,7 +27,7 @@
 
   <button
     class="btn btn-primary next"
-    [disabled]="currentIndex === medias.length - 1"
+    [dsDisabled]="currentIndex === medias.length - 1"
     (click)="nextMedia()"
   >
     {{ "media-viewer.next" | translate }}

src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html

@@ -48,7 +48,7 @@
     <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
       <div class="col">
         <button type="submit" class="btn btn-danger float-right" (click)="unlinkOrcid()"
-                [disabled]="(unlinkProcessing | async)">
+                [dsDisabled]="(unlinkProcessing | async)">
           <span *ngIf="!(unlinkProcessing | async)"><i
             class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
           <span *ngIf="(unlinkProcessing | async)"><i

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

@@ -63,7 +63,7 @@
                       <!--CREATE-->
                       <ng-container *ngIf="canCreateVersion$ | async">
                         <button class="btn btn-outline-primary btn-sm version-row-element-create"
-                                [disabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
+                                [dsDisabled]="isAnyBeingEdited() || (hasDraftVersion$ | async)"
                                 (click)="createNewVersion(version)"
                                 title="{{createVersionTitle$ | async | translate }}">
                           <i class="fas fa-code-branch fa-fw"></i>
@@ -73,7 +73,7 @@
                       <ng-container *ngIf="canDeleteVersion$(version) | async">
                         <button class="btn btn-sm version-row-element-delete"
                                 [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
-                                [disabled]="isAnyBeingEdited()"
+                                [dsDisabled]="isAnyBeingEdited()"
                                 (click)="deleteVersion(version, version.id==itemVersion.id)"
                                 title="{{'item.version.history.table.action.deleteVersion' | translate}}">
                           <i class="fas fa-trash fa-fw"></i>
@@ -117,7 +117,7 @@
                 <ng-container *ngIf="canEditVersion$(version) | async">
                   <button class="btn btn-outline-primary btn-sm version-row-element-edit"
                           *ngIf="!isThisBeingEdited(version)"
-                          [disabled]="isAnyBeingEdited()"
+                          [dsDisabled]="isAnyBeingEdited()"
                           (click)="enableVersionEditing(version)"
                           title="{{'item.version.history.table.action.editSummary' | translate}}">
                     <i class="fas fa-edit fa-fw"></i>

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

@@ -29,6 +29,7 @@ import { ConfigurationDataService } from '../../core/data/configuration-data.ser
 import { Router } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { ItemSharedModule } from '../item-shared.module';
+import {DisabledDirective} from '../../shared/disabled-directive';
 
 describe('ItemVersionsComponent', () => {
   let component: ItemVersionsComponent;
@@ -136,7 +137,7 @@ describe('ItemVersionsComponent', () => {
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
-      declarations: [ItemVersionsComponent, VarDirective],
+      declarations: [ItemVersionsComponent, VarDirective, DisabledDirective],
       imports: [TranslateModule.forRoot(), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemSharedModule],
       providers: [
         {provide: PaginationService, useValue: new PaginationServiceStub()},
@@ -222,17 +223,20 @@ describe('ItemVersionsComponent', () => {
     it('should not disable the delete button', () => {
       const deleteButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-delete`));
       deleteButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(false);
+        expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+        expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
       });
     });
     it('should disable other buttons', () => {
       const createButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-create`));
       createButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(true);
+        expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+        expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
       });
       const editButtons = fixture.debugElement.queryAll(By.css(`.version-row-element-create`));
       editButtons.forEach((btn) => {
-        expect(btn.nativeElement.disabled).toBe(true);
+        expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+        expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
       });
     });
   });

src/app/process-page/overview/process-overview.component.html

@@ -77,10 +77,10 @@
                 <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
             </div>
             <div class="mt-4">
-                <button class="btn btn-primary mr-2" [disabled]="processBulkDeleteService.isProcessing$() |async"
+                <button class="btn btn-primary mr-2" [dsDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
-                        [disabled]="processBulkDeleteService.isProcessing$() |async"
+                        [dsDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
                 </button>
             </div>

src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html

@@ -29,7 +29,7 @@
       <input type="checkbox" [checked]="checked" (change)="toggleCheckbox()"/>
       {{ 'dso-selector.claim.item.not-mine-label' | translate }}
     </div>
-    <button type="submit" class="btn btn-primary ml-5 mr-2" (click)="createFromScratch()" [disabled]="!checked">
+    <button type="submit" class="btn btn-primary ml-5 mr-2" (click)="createFromScratch()" [dsDisabled]="!checked">
       <i class="fas fa-plus"></i>
       {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
     </button>

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

@@ -13,7 +13,7 @@
     <p>{{'researcher.profile.not.associated' | translate}}</p>
   </div>
   <button *ngIf="!researcherProfile" class="btn btn-primary mr-2"
-          [disabled]="(isProcessingCreate() | async)"
+          [dsDisabled]="(isProcessingCreate() | async)"
           (click)="createProfile()">
     <span *ngIf="(isProcessingCreate() | async)">
         <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
@@ -23,10 +23,10 @@
     </span>
   </button>
   <ng-container *ngIf="researcherProfile">
-    <button class="btn btn-primary mr-2" [disabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
+    <button class="btn btn-primary mr-2" [dsDisabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
       <i class="fas fa-info-circle"></i> {{'researcher.profile.view' | translate}}
     </button>
-    <button class="btn btn-danger" [disabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
+    <button class="btn btn-danger" [dsDisabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
         <span *ngIf="(isProcessingDelete() | async)">
             <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
         </span>

src/app/register-email-form/register-email-form.component.html

@@ -48,13 +48,13 @@
     </div>
 
     <ng-container *ngIf="!((googleRecaptchaService.captchaVersion() | async) === 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible'); else v2Invisible">
-      <button class="btn btn-primary" [disabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
+      <button class="btn btn-primary" [dsDisabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-container>
 
     <ng-template #v2Invisible>
-      <button class="btn btn-primary" [disabled]="form.invalid" (click)="executeRecaptcha()">
+      <button class="btn btn-primary" [dsDisabled]="form.invalid" (click)="executeRecaptcha()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-template>

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

@@ -81,7 +81,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValidPassword || userInfoForm.invalid"
+                    [dsDisabled]="isInValidPassword || userInfoForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
         </div>

src/app/shared/disabled-directive.spec.ts

@@ -0,0 +1,89 @@
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DisabledDirective } from './disabled-directive';
+
+@Component({
+    template: `
+    <button [dsDisabled]="isDisabled">Test Button</button>
+  `
+})
+class TestComponent {
+    isDisabled = false;
+}
+
+describe('DisabledDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+    let button: DebugElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent, DisabledDirective]
+        });
+        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 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();
+    });
+});

src/app/shared/disabled-directive.ts

@@ -0,0 +1,31 @@
+import { Directive, Input, HostBinding, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[dsDisabled]'
+})
+export class DisabledDirective {
+
+    @Input() set dsDisabled(value: boolean) {
+        this.isDisabled = !!value;
+    }
+
+    @HostBinding('attr.aria-disabled') isDisabled = false;
+    @HostBinding('class.disabled') get disabledClass() { return this.isDisabled; }
+
+    @HostListener('click', ['$event'])
+    handleClick(event: Event) {
+        if (this.isDisabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+
+    @HostListener('keydown', ['$event'])
+    handleKeydown(event: KeyboardEvent) {
+        if (this.isDisabled && (event.key === 'Enter' || event.key === 'Space')) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+}
+

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"
+            [dsDisabled]="disabled"
             ngbDropdownToggle>
       <ng-content select=".selection"></ng-content>
     </button>

src/app/shared/dso-page/dso-page.module.ts

@@ -10,6 +10,7 @@ import {
   DsoEditMenuExpandableSectionComponent
 } from '../dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component';
 import { NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import {SharedModule} from '../shared.module';
 
 const COMPONENTS = [
   DsoEditMenuComponent,
@@ -26,6 +27,7 @@ const MODULES = [
   CommonModule,
   NgbTooltipModule,
   NgbDropdownModule,
+  SharedModule
 ];
 const PROVIDERS = [
 

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

@@ -31,7 +31,7 @@
     <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
       <select
         #language="ngModel"
-        [disabled]="model.readOnly"
+        [dsDisabled]="model.readOnly"
         [(ngModel)]="model.language"
         class="form-control"
         (blur)="onBlur($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html

@@ -29,7 +29,7 @@
                 type="button"
                 [attr.aria-labelledby]="'label_' + model.id"
                 [class.disabled]="model.disabled"
-                [disabled]="model.disabled"
+                [dsDisabled]="model.disabled"
                 (click)="datepicker.toggle()">
 
             <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>

src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html

@@ -6,7 +6,7 @@
     <ds-number-picker
       tabindex="0"
       [id]="model.id + '_year'"
-      [disabled]="model.disabled"
+      [dsDisabled]="model.disabled"
       [min]="minYear"
       [max]="maxYear"
       [name]="'year'"
@@ -30,7 +30,7 @@
       [(ngModel)]="initialMonth"
       [value]="month"
       [placeholder]="monthPlaceholder"
-      [disabled]="!year || model.disabled"
+      [dsDisabled]="!year || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
       (focus)="onFocus($event)"
@@ -46,7 +46,7 @@
       [(ngModel)]="initialDay"
       [value]="day"
       [placeholder]="dayPlaceholder"
-      [disabled]="!month || model.disabled"
+      [dsDisabled]="!month || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
       (focus)="onFocus($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html

@@ -6,7 +6,7 @@
                  [id]="id"
                  [name]="model.name"
                  [value]="modelValuesString"
-                 [disabled]="model.disabled"
+                 [dsDisabled]="model.disabled"
                  [type]="model.inputType"
                  [placeholder]="model.placeholder | translate"
                  [readonly]="model.readOnly">

src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.spec.ts

@@ -63,7 +63,7 @@ describe('DsDynamicDisabledComponent', () => {
     expect(comp).toBeTruthy();
   });
 
-  it('should have a disabled input', () => {
+  xit('should have a disabled input', () => {
     const input = de.query(By.css('input'));
     expect(input.nativeElement.getAttribute('disabled')).toEqual('');
   });

src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html

@@ -18,7 +18,7 @@
              [name]="model.name"
              [type]="model.inputType"
              [(ngModel)]="firstInputValue"
-             [disabled]="isInputDisabled()"
+             [dsDisabled]="isInputDisabled()"
              [placeholder]="model.placeholder | translate"
              [readonly]="model.readOnly"
              (change)="onChange($event)"
@@ -38,7 +38,7 @@
               [name]="model.name + '_2'"
               [type]="model.inputType"
               [(ngModel)]="secondInputValue"
-              [disabled]="firstInputValue.length === 0 || isInputDisabled()"
+              [dsDisabled]="firstInputValue.length === 0 || isInputDisabled()"
               [placeholder]="model.secondPlaceholder | translate"
               [readonly]="model.readOnly"
               (change)="onChange($event)"
@@ -52,7 +52,7 @@
               type="button"
               ngbTooltip="{{'form.search-help' | translate}}"
               placement="top"
-              [disabled]="model.readOnly || isSearchDisabled()"
+              [dsDisabled]="model.readOnly || isSearchDisabled()"
               [hidden]="isInputDisabled()"
               (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
       </button>
@@ -60,7 +60,7 @@
               type="button"
               ngbTooltip="{{'form.clear-help' | translate}}"
               placement="top"
-              [disabled]="model.readOnly"
+              [dsDisabled]="model.readOnly"
               (click)="remove()">{{'form.clear' | translate}}
       </button>
     </div>
@@ -69,14 +69,14 @@
               type="button"
               ngbTooltip="{{'form.edit-help' | translate}}"
               placement="top"
-              [disabled]="isEditDisabled()"
+              [dsDisabled]="isEditDisabled()"
               (click)="switchEditMode()">{{'form.edit' | translate}}
       </button>
       <button *ngIf="editMode" class="btn btn-secondary"
               type="button"
               ngbTooltip="{{'form.save-help' | translate}}"
               placement="top"
-              [disabled]="!hasEmptyValue()"
+              [dsDisabled]="!hasEmptyValue()"
               (click)="saveChanges()">{{'form.save' | translate}}
       </button>
     </div>

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 {DisabledDirective} from '../../../../../disabled-directive';
 
 let LOOKUP_TEST_MODEL_CONFIG: DynamicLookupModelConfig = {
   vocabularyOptions: {
@@ -153,7 +154,8 @@ describe('Dynamic Lookup component', () => {
         DsDynamicLookupComponent,
         TestComponent,
         AuthorityConfidenceStateDirective,
-        ObjNgFor
+        ObjNgFor,
+        DisabledDirective
       ], // 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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(editBtnEl.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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(saveBtnEl.disabled).toBe(false);
+          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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(saveBtnEl.disabled).toBe(false);
+          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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(editBtnEl.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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(saveBtnEl.disabled).toBe(false);
+          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(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
-          expect(saveBtnEl.disabled).toBe(false);
+          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');
 
         });

src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html

@@ -39,7 +39,7 @@
          [ngbTypeahead]="search"
          [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
-         [disabled]="model.readOnly"
+         [dsDisabled]="model.readOnly"
          [resultTemplate]="rt"
          [type]="model.inputType"
          [(ngModel)]="currentValue"
@@ -64,7 +64,7 @@
          [name]="model.name"
          [placeholder]="model.placeholder"
          [readonly]="true"
-         [disabled]="model.readOnly"
+         [dsDisabled]="model.readOnly"
          [type]="model.inputType"
          [value]="currentValue?.display"
          (focus)="onFocus($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html

@@ -32,21 +32,21 @@
 
         <button type="button"
                 class="btn btn-link"
-                [disabled]="isMandatoryFieldEmpty()"
+                [dsDisabled]="isMandatoryFieldEmpty()"
                 (click)="save()">
           <i class="fas fa-save text-primary fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
                 class="btn btn-link"
-                [disabled]="!editMode"
+                [dsDisabled]="!editMode"
                 (click)="delete()">
           <i class="fas fa-trash text-danger fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
                 class="btn btn-link"
-                [disabled]="isMandatoryFieldEmpty()"
+                [dsDisabled]="isMandatoryFieldEmpty()"
                 (click)="clear()">
           <i class="fas fa-undo fa-2x"
              aria-hidden="true"></i>

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -18,7 +18,7 @@
            [id]="id"
            [name]="model.name"
            [readonly]="true"
-           [disabled]="model.readOnly"
+           [dsDisabled]="model.readOnly"
            [type]="model.inputType"
            [value]="(currentValue | async)"
            (blur)="onBlur($event)"

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html

@@ -1,6 +1,6 @@
 <div class="modal-header">
     <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relationship-lookup.title.' + relationshipOptions.relationshipType) | translate }}</h4>
-    <button type="button" [disabled]="isPending" class="close" aria-label="Close button" aria-describedby="modal-title"
+    <button type="button" [dsDisabled]="isPending" class="close" aria-label="Close button" aria-describedby="modal-title"
             (click)="close()">
         <span aria-hidden="true">&times;</span>
     </button>
@@ -73,18 +73,18 @@
   <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
   <div class="d-flex float-right space-children-mr">
     <div class="close-button">
-        <button type="button" [disabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
+        <button type="button" [dsDisabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
             {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
     </div>
     <ng-container *ngIf="isEditRelationship">
       <button class="btn btn-danger discard"
-              [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+              [dsDisabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
               (click)="discardEv()">
               <i class="fas fa-times"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
       </button>
       <button class="btn btn-primary submit"
-            [disabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
+            [dsDisabled]="(toAdd.length == 0 && toRemove.length == 0) || isPending"
               (click)="submitEv()">
               <span *ngIf="isPending" class="spinner-border spinner-border-sm mr-1" role="status"
                               aria-hidden="true"></span>

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts

@@ -24,6 +24,7 @@ import { WorkspaceItem } from '../../../../../core/submission/models/workspaceit
 import { Collection } from '../../../../../core/shared/collection.model';
 import { By } from '@angular/platform-browser';
 import { XSRFService } from '../../../../../core/xsrf/xsrf.service';
+import {DisabledDirective} from '../../../../disabled-directive';
 
 describe('DsDynamicLookupRelationModalComponent', () => {
   let component: DsDynamicLookupRelationModalComponent;
@@ -103,7 +104,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      declarations: [DsDynamicLookupRelationModalComponent],
+      declarations: [DsDynamicLookupRelationModalComponent, DisabledDirective],
       imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule],
       providers: [
         {
@@ -202,10 +203,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
 
   describe('when initialized and is relationship show the list of buttons', () => {
     it('submit button should be disabled', () => {
-      expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.submit')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.submit')).nativeElement.classList.contains('disabled')).toBeTrue();
     });
     it('discard button should be disabled', () => {
-      expect(debugElement.query(By.css('.discard')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.discard')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.discard')).nativeElement.classList.contains('disabled')).toBeTrue();
     });
   });
 
@@ -243,9 +246,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
 
     it('there should show 1 spinner and disable all 3 buttons', () => {
       expect(debugElement.queryAll(By.css('.spinner-border')).length).toEqual(1);
-      expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.submit')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
-      expect(debugElement.query(By.css('.discard')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.submit')).nativeElement?.classList.contains('disabled')).toBeTrue();
-      expect(debugElement.query(By.css('.close')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.discard')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.discard')).nativeElement?.classList.contains('disabled')).toBeTrue();
+      expect(debugElement.query(By.css('.close')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.close')).nativeElement?.classList.contains('disabled')).toBeTrue();
     });
 
   });

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html

@@ -49,6 +49,6 @@
     <button type="button" class="btn btn-outline-secondary" (click)="close()">{{ (labelPrefix + 'cancel' | translate) }}</button>
   </div>
   <div>
-    <button type="button" class="btn btn-primary" [disabled]="selectedImportType === importType.None" (click)="import()">{{ (labelPrefix + 'import' | translate) }}</button>
+    <button type="button" class="btn btn-primary" [dsDisabled]="selectedImportType === importType.None" (click)="import()">{{ (labelPrefix + 'import' | translate) }}</button>
   </div>
 </div>

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"
+      [dsDisabled]="disabled"
       (click)="toggleUp()">
       <span class="chevron"></span>
       <span class="sr-only">{{'form.number-picker.increment' | translate: {field: name} }}</span>
@@ -21,7 +21,7 @@
       (change)="update($event); $event.stopPropagation();"
       (focus)="onFocus($event); $event.stopPropagation();"
       [readonly]="disabled"
-      [disabled]="disabled"
+      [dsDisabled]="disabled"
       [ngClass]="{'is-invalid': invalid}"
       title="{{placeholder}}"
       [attr.aria-label]="placeholder"
@@ -30,7 +30,7 @@
       class="btn btn-link-focus"
       type="button"
       tabindex="0"
-      [disabled]="disabled"
+      [dsDisabled]="disabled"
       (click)="toggleDown()">
       <span class="chevron bottom"></span>
       <span class="sr-only">{{'form.number-picker.decrement' | translate: {field: name} }}</span>

src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -5,7 +5,7 @@
       <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
              [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <div class="input-group-append" id="button-addon4">
-        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
+        <button class="btn btn-outline-primary" type="button" (click)="search()" [dsDisabled]="!isSearchEnabled()">
           {{'vocabulary-treeview.search.form.search' | translate}}
         </button>
         <button class="btn btn-outline-secondary" type="button" (click)="reset()">
@@ -36,7 +36,7 @@
                  container="body"
           >
             <input class="mr-2" type="checkbox"
-                   [disabled]="!node.item?.selectable"
+                   [dsDisabled]="!node.item?.selectable"
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
@@ -45,7 +45,7 @@
           </label>
           <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                   [class.text-success]="node.isSelected"
-                  [disabled]="!node.item?.selectable"
+                  [dsDisabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"
@@ -68,7 +68,7 @@
                 [openDelay]="500"
                 container="body">
             <input class="mr-2" type="checkbox"
-                   [disabled]="!node.item?.selectable"
+                   [dsDisabled]="!node.item?.selectable"
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
@@ -77,7 +77,7 @@
           </label>
           <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                   [class.text-success]="node.isSelected"
-                  [disabled]="!node.item?.selectable"
+                  [dsDisabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -24,7 +24,7 @@
        @fadeOut>{{ (message | async) | translate }}</div>
 
   <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
-          [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
+          [dsDisabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>
 
 <div class="mt-2">

src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html

@@ -1,7 +1,7 @@
 <button type="button"
         [className]="'btn btn-success'"
         ngbTooltip="{{'submission.workflow.tasks.claimed.approve_help' | translate}}"
-        [disabled]="processing$ | async"
+        [dsDisabled]="processing$ | async"
         (click)="submitTask()">
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="!(processing$ | async)"><i class="fa fa-thumbs-up"></i> {{'submission.workflow.tasks.claimed.approve' | translate}}</span>

src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.html

@@ -1,5 +1,5 @@
 <button (click)="submitTask()"
-        [disabled]="processing$ | async"
+        [dsDisabled]="processing$ | async"
         class="declineTaskAction btn btn-warning"
         ngbTooltip="{{'submission.workflow.tasks.claimed.decline_help' | translate}}"
         type="button">

src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html

@@ -1,7 +1,7 @@
 <ng-template #rejectTipContent><p [innerHTML]="'submission.workflow.tasks.claimed.reject_help' | translate"></p></ng-template>
 <button [className]="'btn btn-danger'"
         [ngbTooltip]="rejectTipContent"
-        [disabled]="processing$ | async"
+        [dsDisabled]="processing$ | async"
         (click)="openRejectModal(rejectModal)" >
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="!(processing$ | async)"><i class="fa fa-trash"></i> {{'submission.workflow.tasks.claimed.reject.submit' | translate}}</span>
@@ -28,7 +28,7 @@
                 placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>
       <button id="btn-chat"
               class="btn btn-danger btn-lg btn-block mt-3"
-              [disabled]="!rejectForm.valid || (processing$ | async)"
+              [dsDisabled]="!rejectForm.valid || (processing$ | async)"
               type="submit">
         <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
         <span *ngIf="!(processing$ | async)">{{'submission.workflow.tasks.claimed.reject.reason.submit' | translate}}</span>

src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.html

@@ -1,7 +1,7 @@
 <button type="button"
         [className]="'btn btn-secondary'"
         ngbTooltip="{{'submission.workflow.tasks.claimed.return_help' | translate}}"
-        [disabled]="processing$ | async"
+        [dsDisabled]="processing$ | async"
         (click)="submitTask()">
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="!(processing$ | async)"><i class="fa fa-undo"></i> {{'submission.workflow.tasks.claimed.return' | translate}}</span>

src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.html

@@ -1,5 +1,5 @@
 <button type="button" class="btn btn-info mt-1 mb-3"
-  ngbTooltip="{{'submission.workflow.tasks.pool.claim_help' | translate}}" [disabled]="(processing$ | async)"
+  ngbTooltip="{{'submission.workflow.tasks.pool.claim_help' | translate}}" [dsDisabled]="(processing$ | async)"
   (click)="claim()">
   <span *ngIf="(processing$ | async)"><i class='fas fa-circle-notch fa-spin'></i>
     {{'submission.workflow.tasks.generic.processing' | translate}}</span>

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -34,7 +34,7 @@
     </button>
     <button class="btn collection-confirm"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
-            [disabled]="selectedIds?.length === 0"
+            [dsDisabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
       <i class="fas fa-trash"></i> {{confirmButton | translate}}
     </button>

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 {DisabledDirective} from '../../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: [DisabledDirective],
       providers: [
         { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockItemList[1].id]) },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
@@ -193,7 +194,8 @@ describe('ItemSelectComponent', () => {
 
       const checkbox = fixture.debugElement.query(By.css('input.item-checkbox')).nativeElement;
       expect(authorizationDataService.isAuthorized).toHaveBeenCalled();
-      expect(checkbox.disabled).toBeTrue();
+      expect(checkbox.getAttribute('aria-disabled')).toBe('true');
+      expect(checkbox.classList.contains('disabled')).toBe(true);
     }));
   });
 });

src/app/shared/pagination/pagination.component.html

@@ -41,7 +41,7 @@
     <div *ngIf="showPaginator" class="pagination justify-content-center clearfix bottom">
       <ngb-pagination [boundaryLinks]="paginationOptions.boundaryLinks"
                       [collectionSize]="collectionSize"
-                      [disabled]="paginationOptions.disabled"
+                      [dsDisabled]="paginationOptions.disabled"
                       [ellipses]="paginationOptions.ellipses"
                       [maxSize]="(isXs)?5:paginationOptions.maxSize"
                       [page]="(currentPage$|async)"
@@ -55,12 +55,12 @@
     <div *ngIf="!showPaginator" class="d-flex justify-content-between">
         <button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
                 (click)="goPrev()"
-                [disabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
+                [dsDisabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
           <i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
         </button>
       <button id="nav-next" type="button" class="btn btn-outline-primary float-right"
               (click)="goNext()"
-              [disabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
+              [dsDisabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
           <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
             <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
           </span>

src/app/shared/resource-policies/form/resource-policy-form.component.html

@@ -31,11 +31,11 @@
         <div class="col text-right">
           <button type="reset"
                   class="btn btn-default"
-                  [disabled]="(isProcessing | async)"
+                  [dsDisabled]="(isProcessing | async)"
                   (click)="onReset()">{{'form.cancel' | translate}}</button>
           <button type="button"
                   class="btn btn-primary"
-                  [disabled]="!(isFormValid() | async) || (isProcessing | async)"
+                  [dsDisabled]="!(isFormValid() | async) || (isProcessing | async)"
                   (click)="onSubmit()">
             <span *ngIf="(isProcessing | async)">
                   <i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}

src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts

@@ -39,6 +39,7 @@ import { PaginationServiceStub } from '../../testing/pagination-service.stub';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreMock } from '../../testing/store.mock';
+import {DisabledDirective} from '../../disabled-directive';
 
 export const mockResourcePolicyFormData = {
   name: [
@@ -189,7 +190,8 @@ describe('ResourcePolicyFormComponent test suite', () => {
         FormComponent,
         EpersonGroupListComponent,
         ResourcePolicyFormComponent,
-        TestComponent
+        TestComponent,
+        DisabledDirective
       ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
@@ -389,7 +391,8 @@ describe('ResourcePolicyFormComponent test suite', () => {
 
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(depositBtn.nativeElement.disabled).toBeFalsy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('should emit submit event', () => {
@@ -443,7 +446,8 @@ describe('ResourcePolicyFormComponent test suite', () => {
 
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(depositBtn.nativeElement.disabled).toBeTruthy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeTrue();
     });
 
   });

src/app/shared/resource-policies/resource-policies.component.html

@@ -13,7 +13,7 @@
             </span>
             <div class="space-children-mr flex-shrink-0">
               <button class="btn btn-danger p-1"
-                      [disabled]="(!(canDelete() | async)) || (isProcessingDelete() | async)"
+                      [dsDisabled]="(!(canDelete() | async)) || (isProcessingDelete() | async)"
                       [title]="'resource-policies.delete.btn.title' | translate"
                       (click)="deleteSelectedResourcePolicies()">
                 <span *ngIf="(isProcessingDelete() | async)">
@@ -25,7 +25,7 @@
                 </span>
               </button>
               <button class="btn btn-success p-1"
-                      [disabled]="(isProcessingDelete() | async)"
+                      [dsDisabled]="(isProcessingDelete() | async)"
                       [title]="'resource-policies.add.for.' + resourceType | translate"
                       (click)="redirectToResourcePolicyCreatePage()">
                 <i class='fas fa-plus' aria-hidden="true"></i>

src/app/shared/shared.module.ts

@@ -284,6 +284,7 @@ import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bi
 import { NgxPaginationModule } from 'ngx-pagination';
 import { ThemedLangSwitchComponent } from './lang-switch/themed-lang-switch.component';
 import {ThemedUserMenuComponent} from './auth-nav-menu/user-menu/themed-user-menu.component';
+import {DisabledDirective} from './disabled-directive';
 
 const MODULES = [
   CommonModule,
@@ -493,6 +494,7 @@ const DIRECTIVES = [
   MetadataFieldValidator,
   HoverClassDirective,
   ContextHelpDirective,
+  DisabledDirective,
 ];
 
 @NgModule({

src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html

@@ -34,7 +34,7 @@
             (click)="activeModal.close()">
       {{'subscriptions.modal.close' | translate}}
     </button>
-    <button type="submit" class="btn btn-success" [disabled]="(processing$ | async) || !isValid">
+    <button type="submit" class="btn btn-success" [dsDisabled]="(processing$ | async) || !isValid">
         <span *ngIf="(processing$ | async)">
           <i class='fas fa-circle-notch fa-spin'></i> {{'subscriptions.modal.new-subscription-form.processing' | translate}}
         </span>

src/app/shared/subscriptions/subscription-view/subscription-view.component.html

@@ -21,7 +21,7 @@
 </td>
 <td class="subscription-actions">
   <div class="btn-group edit-field">
-    <button (click)="$event.preventDefault();openSubscriptionModal();" [disabled]="!dso"
+    <button (click)="$event.preventDefault();openSubscriptionModal();" [dsDisabled]="!dso"
             [title]="'subscriptions.table.edit' | translate"
             class="btn btn-outline-primary btn-sm access-control-editEPersonButton">
       <i class="fas fa-edit fa-fw"></i>

src/app/shared/upload/uploader/uploader.component.html

@@ -35,7 +35,7 @@
               <span *ngIf="!uploader.options.disableMultipart">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>{{ uploader?.queue[0]?.file.name }}
             </span>
             <div class="btn-group btn-group-sm float-right" role="group">
-              <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
+              <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [dsDisabled]="!uploader.queue.length">
                 <i class="fas fa-trash" aria-hidden="true"></i>
               </button>
             </div>

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"
+            [dsDisabled]="(processingChange$ | async) || collectionModifiable == false || isReadonly"
             ngbDropdownToggle>
       <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
       <span *ngIf="!(processingChange$ | async)">{{ selectedCollectionName$ | async }}</span>

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 {DisabledDirective} from '../../../shared/disabled-directive';
 
 describe('SubmissionFormCollectionComponent Component', () => {
 
@@ -135,7 +136,8 @@ describe('SubmissionFormCollectionComponent Component', () => {
       ],
       declarations: [
         SubmissionFormCollectionComponent,
-        TestComponent
+        TestComponent,
+        DisabledDirective
       ],
       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', () => {

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)"
+            [dsDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
             (click)="$event.preventDefault();confirmDiscard(content)">
       <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
     </button>
@@ -28,7 +28,7 @@
               class="btn btn-secondary"
               id="save"
               [attr.data-test]="'save' | dsBrowserOnly"
-              [disabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
+              [dsDisabled]="(processingSaveStatus | async) || !(hasUnsavedModification | async)"
               (click)="save($event)">
         <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
       </button>
@@ -38,7 +38,7 @@
               class="btn"
               id="saveForLater"
               [attr.data-test]="'save-for-later' | dsBrowserOnly"
-              [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+              [dsDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
               (click)="saveLater($event)">
         <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
       </button>
@@ -47,7 +47,7 @@
               id="deposit"
               [attr.data-test]="'deposit' | dsBrowserOnly"
               class="btn btn-success"
-              [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+              [dsDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
               (click)="deposit($event)">
         <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
       </button>

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 {DisabledDirective} from '../../../shared/disabled-directive';
 
 const submissionServiceStub: SubmissionServiceStub = new SubmissionServiceStub();
 
@@ -39,6 +40,7 @@ describe('SubmissionFormFooterComponent', () => {
         SubmissionFormFooterComponent,
         TestComponent,
         BrowserOnlyMockPipe,
+        DisabledDirective
       ],
       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();
     });
 
   });

src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html

@@ -1,6 +1,6 @@
 <div class="mb-4 ccLicense-select">
   <ds-select
-    [disabled]="!submissionCcLicenses">
+    [dsDisabled]="!submissionCcLicenses">
 
     <ng-container class="selection">
       <span *ngIf="!submissionCcLicenses">
@@ -81,7 +81,7 @@
 
     </ng-template>
 
-    <ds-select *ngIf="field.enums?.length > 5" [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
+    <ds-select *ngIf="field.enums?.length > 5" [dsDisabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
       <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
         <span *ngIf="option">
           {{ option.label }}

src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html

@@ -1,7 +1,7 @@
 <div>
   <div class="modal-header">
     <h4 class="modal-title">{{'submission.sections.upload.edit.title' | translate}}</h4>
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [disabled]="isSaving">
+    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [dsDisabled]="isSaving">
       <span aria-hidden="true">×</span>
     </button>
   </div>

src/app/submission/sections/upload/file/section-upload-file.component.html

@@ -19,7 +19,7 @@
           <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
                   title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
-                  [disabled]="(processingDelete$ | async)"
+                  [dsDisabled]="(processingDelete$ | async)"
                   (click)="$event.preventDefault();confirmDelete(content);">
             <i *ngIf="(processingDelete$ | async)" class="fas fa-circle-notch fa-spin fa-2x text-danger"></i>
             <i *ngIf="!(processingDelete$ | async)" class="fa fa-trash fa-2x text-danger"></i>

src/styles/_global-styles.scss

@@ -466,3 +466,14 @@ 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); }
+
+// 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;
+}