hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'w2p-117544_support-for-disabled-elements-for-screen-readers-7.6' into w2p-117544_support-for-disabled-elements-for-screen-readers-8.0

Browse Source
This commit is contained in:
Jens Vannerum
2024-08-26 13:38:55 +02:00
parent 3e6adbba93 2d48cc0f69
commit b2a155386d
61 changed files with 328 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/access-control/bulk-access/bulk-access.component.html
View File

@@ -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>

3
src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
View File

@@ -57,6 +57,7 @@ import { NotificationsServiceStub } from '../../shared/testing/notifications-ser
import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
import { EPeopleRegistryComponent } from './epeople-registry.component';
import { EPersonFormComponent } from './eperson-form/eperson-form.component';
import {DisabledDirective} from '../../shared/disabled-directive';
describe('EPeopleRegistryComponent', () => {
let component: EPeopleRegistryComponent;
@@ -151,7 +152,7 @@ describe('EPeopleRegistryComponent', () => {
paginationService = new PaginationServiceStub();
TestBed.configureTestingModule({
imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule.withRoutes([]),
TranslateModule.forRoot(), EPeopleRegistryComponent],
TranslateModule.forRoot(), EPeopleRegistryComponent, DisabledDirective],
providers: [
{ provide: EPersonDataService, useValue: ePersonDataServiceStub },
{ provide: NotificationsService, useValue: new NotificationsServiceStub() },

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

@@ -68,6 +68,7 @@ import { HasNoValuePipe } from '../../../shared/utils/has-no-value.pipe';
import { EPeopleRegistryComponent } from '../epeople-registry.component';
import { EPersonFormComponent } from './eperson-form.component';
import { ValidateEmailNotTaken } from './validators/email-taken.validator';
import {DisabledDirective} from '../../../shared/disabled-directive';
describe('EPersonFormComponent', () => {
let component: EPersonFormComponent;
@@ -227,7 +228,7 @@ describe('EPersonFormComponent', () => {
route = new ActivatedRouteStub();
router = new RouterStub();
TestBed.configureTestingModule({
imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, DisabledDirective, BrowserModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
@@ -546,7 +547,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);

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

@@ -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"

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

@@ -71,6 +71,7 @@ import { NotificationsServiceStub } from '../../shared/testing/notifications-ser
import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
import { routeServiceStub } from '../../shared/testing/route-service.stub';
import { GroupsRegistryComponent } from './groups-registry.component';
import {DisabledDirective} from '../../shared/disabled-directive';
describe('GroupsRegistryComponent', () => {
let component: GroupsRegistryComponent;
@@ -208,6 +209,7 @@ describe('GroupsRegistryComponent', () => {
imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
TranslateModule.forRoot(),
GroupsRegistryComponent,
DisabledDirective
],
providers: [GroupsRegistryComponent,
{ provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -278,7 +280,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();
});
});
@@ -312,7 +315,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();
});
});
});
@@ -331,7 +335,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();
});
});
});

4
src/app/collection-page/delete-collection-page/delete-collection-page.component.html
View File

@@ -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) !== true"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
</button>

18
src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
View File

@@ -27,6 +27,7 @@ import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-dat
import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
import { VarDirective } from '../../../../shared/utils/var.directive';
import { CollectionSourceControlsComponent } from './collection-source-controls.component';
import {DisabledDirective} from '../../../../shared/disabled-directive';
describe('CollectionSourceControlsComponent', () => {
let comp: CollectionSourceControlsComponent;
@@ -104,7 +105,7 @@ describe('CollectionSourceControlsComponent', () => {
requestService = jasmine.createSpyObj('requestService', ['removeByHrefSubstring', 'setStaleByHrefSubstring']);
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective],
imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective, DisabledDirective],
providers: [
{ provide: ScriptDataService, useValue: scriptDataService },
{ provide: ProcessDataService, useValue: processDataService },
@@ -193,9 +194,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;
@@ -205,9 +208,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');

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

@@ -44,6 +44,7 @@ import {
DsoEditMetadataValue,
} from '../dso-edit-metadata-form';
import { DsoEditMetadataValueComponent } from './dso-edit-metadata-value.component';
import {DisabledDirective} from '../../../shared/disabled-directive';
const EDIT_BTN = 'edit';
const CONFIRM_BTN = 'confirm';
@@ -188,6 +189,7 @@ describe('DsoEditMetadataValueComponent', () => {
RouterTestingModule.withRoutes([]),
DsoEditMetadataValueComponent,
VarDirective,
DisabledDirective
],
providers: [
{ provide: RelationshipDataService, useValue: relationshipService },
@@ -524,7 +526,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', () => {

10
src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts
View File

@@ -32,6 +32,7 @@ import { DsoEditMetadataHeadersComponent } from './dso-edit-metadata-headers/dso
import { DsoEditMetadataValueComponent } from './dso-edit-metadata-value/dso-edit-metadata-value.component';
import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component';
import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component';
import {DisabledDirective} from '../../shared/disabled-directive';
const ADD_BTN = 'add';
const REINSTATE_BTN = 'reinstate';
@@ -87,6 +88,7 @@ describe('DsoEditMetadataComponent', () => {
]);
TestBed.configureTestingModule({
declarations: [DisabledDirective]
imports: [
CommonModule,
BrowserModule,
@@ -216,7 +218,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', () => {

2
src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
View File

@@ -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>

2
src/app/info/end-user-agreement/end-user-agreement.component.html
View File

@@ -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>

6
src/app/info/end-user-agreement/end-user-agreement.component.spec.ts
View File

@@ -20,6 +20,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
import { EndUserAgreementComponent } from './end-user-agreement.component';
import { EndUserAgreementContentComponent } from './end-user-agreement-content/end-user-agreement-content.component';
import {DisabledDirective} from '../../shared/disabled-directive';
describe('EndUserAgreementComponent', () => {
let component: EndUserAgreementComponent;
@@ -57,7 +58,7 @@ describe('EndUserAgreementComponent', () => {
beforeEach(waitForAsync(() => {
init();
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), EndUserAgreementComponent],
imports: [TranslateModule.forRoot(), EndUserAgreementComponent, DisabledDirective],
providers: [
{ provide: EndUserAgreementService, useValue: endUserAgreementService },
{ provide: NotificationsService, useValue: notificationsService },
@@ -95,7 +96,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();
});
});

9
src/app/info/feedback/feedback-form/feedback-form.component.spec.ts
View File

@@ -26,6 +26,7 @@ import { EPersonMock } from '../../../shared/testing/eperson.mock';
import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
import { routeServiceStub } from '../../../shared/testing/route-service.stub';
import { FeedbackFormComponent } from './feedback-form.component';
import {DisabledDirective} from '../../../shared/disabled-directive';
describe('FeedbackFormComponent', () => {
@@ -45,7 +46,7 @@ describe('FeedbackFormComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), FeedbackFormComponent],
imports: [TranslateModule.forRoot(), FeedbackFormComponent, DisabledDirective],
providers: [
{ provide: RouteService, useValue: routeServiceStub },
{ provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -79,7 +80,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', () => {
@@ -90,7 +92,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', () => {

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

@@ -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>

4
src/app/item-page/edit-item-page/item-move/item-move.component.html
View File

@@ -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>

4
src/app/item-page/edit-item-page/item-operation/item-operation.component.html
View File

@@ -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>

6
src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts
View File

@@ -8,6 +8,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { ItemOperationComponent } from './item-operation.component';
import { ItemOperation } from './itemOperation.model';
import {DisabledDirective} from '../../../shared/disabled-directive';
describe('ItemOperationComponent', () => {
let itemOperation: ItemOperation;
@@ -17,7 +18,7 @@ describe('ItemOperationComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent],
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent, DisabledDirective],
}).compileComponents();
}));
@@ -43,7 +44,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');
});
});

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

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

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

@@ -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>

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

@@ -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 }}

8
src/app/item-page/versions/item-versions.component.spec.ts
View File

@@ -51,6 +51,7 @@ import { PaginationServiceStub } from '../../shared/testing/pagination-service.s
import { createPaginatedList } from '../../shared/testing/utils.test';
import { VarDirective } from '../../shared/utils/var.directive';
import { ItemVersionsComponent } from './item-versions.component';
import {DisabledDirective} from '../../shared/disabled-directive';
describe('ItemVersionsComponent', () => {
let component: ItemVersionsComponent;
@@ -158,7 +159,7 @@ describe('ItemVersionsComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective],
imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective, DisabledDirective],
providers: [
{ provide: PaginationService, useValue: new PaginationServiceStub() },
{ provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -234,8 +235,9 @@ describe('ItemVersionsComponent', () => {
it('should not disable the delete button', () => {
const deleteButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-delete'));
expect(deleteButtons.length).not.toBe(0);
deleteButtons.forEach((btn: DebugElement) => {
expect(btn.nativeElement.disabled).toBe(false);
deleteButtons.forEach((btn) => {
expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('false');
expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
});
});

4
src/app/process-page/overview/process-overview.component.html
View File

@@ -64,10 +64,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>

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

@@ -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>

6
src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
View File

@@ -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>

2
src/app/register-page/create-profile/create-profile.component.html
View File

@@ -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>

89
src/app/shared/disabled-directive.spec.ts Normal file
View File

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

31
src/app/shared/disabled-directive.ts Normal file
View File

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

2
src/app/shared/ds-select/ds-select.component.html
View File

@@ -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>

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

@@ -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)"

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

@@ -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>

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

@@ -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)"

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

@@ -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">

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

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

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

@@ -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>

38
src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
View File

@@ -48,6 +48,7 @@ import {
DynamicLookupModelConfig,
} from './dynamic-lookup.model';
import { DynamicLookupNameModel } from './dynamic-lookup-name.model';
import {DisabledDirective} from '../../../../../disabled-directive';
let LOOKUP_TEST_MODEL_CONFIG: DynamicLookupModelConfig = {
vocabularyOptions: {
@@ -174,6 +175,7 @@ describe('Dynamic Lookup component', () => {
TestComponent,
AuthorityConfidenceStateDirective,
ObjNgFor,
DisabledDirective,
],
providers: [
ChangeDetectorRef,
@@ -255,8 +257,10 @@ describe('Dynamic Lookup component', () => {
const de = lookupFixture.debugElement.queryAll(By.css('button'));
const searchBtnEl = de[0].nativeElement;
const editBtnEl = de[1].nativeElement;
expect(searchBtnEl.disabled).toBe(true);
expect(editBtnEl.disabled).toBe(true);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(editBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(editBtnEl.classList.contains('disabled')).toBeTrue();
expect(editBtnEl.textContent.trim()).toBe('form.edit');
});
@@ -354,8 +358,10 @@ describe('Dynamic Lookup component', () => {
const de = lookupFixture.debugElement.queryAll(By.css('button'));
const searchBtnEl = de[0].nativeElement;
const saveBtnEl = de[1].nativeElement;
expect(searchBtnEl.disabled).toBe(true);
expect(saveBtnEl.disabled).toBe(false);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
expect(saveBtnEl.textContent.trim()).toBe('form.save');
});
@@ -395,8 +401,10 @@ describe('Dynamic Lookup component', () => {
const de = lookupFixture.debugElement.queryAll(By.css('button'));
const searchBtnEl = de[0].nativeElement;
const saveBtnEl = de[1].nativeElement;
expect(searchBtnEl.disabled).toBe(true);
expect(saveBtnEl.disabled).toBe(false);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
expect(saveBtnEl.textContent.trim()).toBe('form.save');
});
@@ -427,8 +435,10 @@ describe('Dynamic Lookup component', () => {
const editBtnEl = deBtn[1].nativeElement;
expect(de.length).toBe(2);
expect(searchBtnEl.disabled).toBe(true);
expect(editBtnEl.disabled).toBe(true);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(editBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(editBtnEl.classList.contains('disabled')).toBeTrue();
expect(editBtnEl.textContent.trim()).toBe('form.edit');
});
@@ -524,8 +534,10 @@ describe('Dynamic Lookup component', () => {
const de = lookupFixture.debugElement.queryAll(By.css('button'));
const searchBtnEl = de[0].nativeElement;
const saveBtnEl = de[1].nativeElement;
expect(searchBtnEl.disabled).toBe(true);
expect(saveBtnEl.disabled).toBe(false);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
expect(saveBtnEl.textContent.trim()).toBe('form.save');
});
@@ -567,8 +579,10 @@ describe('Dynamic Lookup component', () => {
const de = lookupFixture.debugElement.queryAll(By.css('button'));
const searchBtnEl = de[0].nativeElement;
const saveBtnEl = de[1].nativeElement;
expect(searchBtnEl.disabled).toBe(true);
expect(saveBtnEl.disabled).toBe(false);
expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
expect(saveBtnEl.textContent.trim()).toBe('form.save');
});

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

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

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

@@ -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>

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

@@ -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)"

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

@@ -44,6 +44,7 @@ import {
AddRelationshipAction,
RemoveRelationshipAction,
} from './relationship.actions';
import {DisabledDirective} from '../../../../disabled-directive';
describe('DsDynamicLookupRelationModalComponent', () => {
let component: DsDynamicLookupRelationModalComponent;
@@ -123,7 +124,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
beforeEach(waitForAsync(() => {
init();
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule, DsDynamicLookupRelationModalComponent],
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule, DsDynamicLookupRelationModalComponent, DisabledDirective],
providers: [
{
provide: SearchConfigurationService, useValue: {
@@ -223,10 +224,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();
});
});
@@ -264,9 +267,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('.discard')).nativeElement?.disabled).toBeTrue();
expect(debugElement.query(By.css('.close')).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();
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();
});
});

2
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
View File

@@ -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>

6
src/app/shared/form/number-picker/number-picker.component.html
View File

@@ -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>

10
src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
View File

@@ -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()">
@@ -39,7 +39,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)"
@@ -48,7 +48,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"
@@ -71,7 +71,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)"
@@ -80,7 +80,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"

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

@@ -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>
<ng-container *ngIf="canShowDivider$ | async">

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

@@ -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) !== true"><i class="fa fa-thumbs-up"></i> {{'submission.workflow.tasks.claimed.approve' | translate}}</span>

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

@@ -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">

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

@@ -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) !== true"><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) !== true">{{'submission.workflow.tasks.claimed.reject.reason.submit' | translate}}</span>

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

@@ -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) !== true"><i class="fa fa-undo"></i> {{'submission.workflow.tasks.claimed.return' | translate}}</span>

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

@@ -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>

2
src/app/shared/object-select/collection-select/collection-select.component.html
View File

@@ -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>

7
src/app/shared/object-select/item-select/item-select.component.spec.ts
View File

@@ -28,6 +28,7 @@ import { SearchConfigurationServiceStub } from '../../testing/search-configurati
import { createPaginatedList } from '../../testing/utils.test';
import { ObjectSelectService } from '../object-select.service';
import { ItemSelectComponent } from './item-select.component';
import {DisabledDirective} from '../../disabled-directive';
describe('ItemSelectComponent', () => {
let comp: ItemSelectComponent;
@@ -101,7 +102,7 @@ describe('ItemSelectComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), DisabledDirective],
providers: [
{ provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockItemList[1].id]) },
{ provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
@@ -196,7 +197,9 @@ 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);
});
}));
});
});

6
src/app/shared/pagination/pagination.component.html
View File

@@ -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>

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

@@ -68,6 +68,7 @@ import {
ResourcePolicyEvent,
ResourcePolicyFormComponent,
} from './resource-policy-form.component';
import {DisabledDirective} from '../../disabled-directive';
export const mockResourcePolicyFormData = {
name: [
@@ -216,6 +217,7 @@ describe('ResourcePolicyFormComponent test suite', () => {
ResourcePolicyFormComponent,
TestComponent,
NgxMaskModule.forRoot(),
DisabledDirective
],
providers: [
{ provide: ActivatedRoute, useValue: activatedRouteStub },
@@ -426,7 +428,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', () => {
@@ -480,7 +483,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();
});
});

2
src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
View File

@@ -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>

2
src/app/shared/subscriptions/subscription-view/subscription-view.component.html
View File

@@ -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>

2
src/app/shared/upload/uploader/uploader.component.html
View File

@@ -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>

5
src/app/submission/form/collection/submission-form-collection.component.spec.ts
View File

@@ -43,6 +43,7 @@ import { createTestComponent } from '../../../shared/testing/utils.test';
import { SectionsService } from '../../sections/sections.service';
import { SubmissionService } from '../../submission.service';
import { SubmissionFormCollectionComponent } from './submission-form-collection.component';
import {DisabledDirective} from '../../../shared/disabled-directive';
describe('SubmissionFormCollectionComponent Component', () => {
@@ -152,6 +153,7 @@ describe('SubmissionFormCollectionComponent Component', () => {
TranslateModule.forRoot(),
SubmissionFormCollectionComponent,
TestComponent,
DisabledDirective
],
providers: [
{ provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -275,7 +277,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', () => {

14
src/app/submission/form/footer/submission-form-footer.component.spec.ts
View File

@@ -31,6 +31,7 @@ import { SubmissionServiceStub } from '../../../shared/testing/submission-servic
import { createTestComponent } from '../../../shared/testing/utils.test';
import { SubmissionService } from '../../submission.service';
import { SubmissionFormFooterComponent } from './submission-form-footer.component';
import {DisabledDirective} from '../../../shared/disabled-directive';
const submissionServiceStub: SubmissionServiceStub = new SubmissionServiceStub();
@@ -51,6 +52,7 @@ describe('SubmissionFormFooterComponent', () => {
TranslateModule.forRoot(),
SubmissionFormFooterComponent,
TestComponent,
DisabledDirective
],
providers: [
{ provide: SubmissionService, useValue: submissionServiceStub },
@@ -227,7 +229,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', () => {
@@ -236,7 +239,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', () => {
@@ -244,7 +248,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', () => {
@@ -252,7 +257,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();
});
});

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

@@ -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 }}

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

@@ -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>

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

@@ -35,7 +35,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) !== true" class="fa fa-trash fa-2x text-danger"></i>

11
src/styles/_global-styles.scss
View File

@@ -459,6 +459,17 @@ ngb-accordion {
color: darken($danger, 22%);
}
// 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;
}
// Margin utility classes based on DSpace content spacing
.mt-cs { margin-top: var(--ds-content-spacing); }
.mb-cs { margin-bottom: var(--ds-content-spacing); }