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

Author: Jens Vannerum

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

@@ -10,7 +10,7 @@ <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
     <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 @@ <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | tra
                       <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 @@ <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | transla
                 <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 @@ <h3>{{ 'collection.source.controls.head' | translate }}</h3>
         </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();
-      expect(buttons[1].nativeElement.disabled).toBeTrue();
-      expect(buttons[2].nativeElement.disabled).toBeTrue();
+      buttons.forEach(button => {
+        console.log(button.nativeElement);
+        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();
-      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');

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', () => {