inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-4692] fixed focus for create and upload modals (#3146)

Browse Source 
* fixed focus for modals

* implemented review comments
This commit is contained in:
SheenaMalhotra182 2023-04-25 17:34:06 +05:30 committed by GitHub
parent c335a148b9
commit ef5cbb07d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/aca-content/src/lib/services/content-management.service.ts
View File

@ -85,7 +85,7 @@ interface RestoredNode {
providedIn: 'root'
})
export class ContentManagementService {
private readonly createMenuButtonSelector = 'app-create-menu button';
private readonly createMenuButtonSelector = 'app-toolbar-menu button[id="app.toolbar.create"]';
constructor(
private nodesApiService: NodesApiService,

2
projects/aca-content/src/lib/services/node-template.service.ts
View File

@ -166,6 +166,6 @@ export class NodeTemplateService {
}
private static focusCreateMenuButton(): void {
document.querySelector<HTMLElement>('app-create-menu button').focus();
document.querySelector<HTMLElement>('app-toolbar-menu button[id="app.toolbar.create"]').focus();
}
}

64
projects/aca-content/src/lib/store/effects/upload.effects.spec.ts
View File

@ -59,76 +59,76 @@ describe('UploadEffects', () => {
});
describe('uploadFiles$', () => {
let createMenuButton: HTMLButtonElement;
let uploadMenuButton: HTMLButtonElement;
const focusedClass = 'cdk-program-focused';
beforeEach(() => {
createMenuButton = document.createElement('button');
document.body.appendChild(createMenuButton);
uploadMenuButton = document.createElement('button');
document.body.appendChild(uploadMenuButton);
store.dispatch(new UploadFilesAction({}));
spyOn(document, 'querySelector').withArgs('app-create-menu button').and.returnValue(createMenuButton);
spyOn(document, 'querySelector').withArgs('app-toolbar-menu button[id="app.toolbar.upload"]').and.returnValue(uploadMenuButton);
});
it('should call focus function on create menu button', () => {
spyOn(createMenuButton, 'focus');
it('should call focus function on upload menu button', () => {
spyOn(uploadMenuButton, 'focus');
window.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton.focus).toHaveBeenCalledWith();
expect(uploadMenuButton.focus).toHaveBeenCalledWith();
});
it('should not call focus function on create menu button if handler for focus of window is not fired', () => {
spyOn(createMenuButton, 'focus');
expect(createMenuButton.focus).not.toHaveBeenCalled();
it('should not call focus function on upload menu button if handler for focus of window is not fired', () => {
spyOn(uploadMenuButton, 'focus');
expect(uploadMenuButton.focus).not.toHaveBeenCalled();
});
it('should add cdk-program-focused class to create menu button', () => {
it('should add cdk-program-focused class to upload menu button', () => {
window.dispatchEvent(new FocusEvent('focus'));
createMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton).toHaveClass(focusedClass);
uploadMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(uploadMenuButton).toHaveClass(focusedClass);
});
it('should not add cdk-program-focused class to create menu button if handler for focus of window is not fired', () => {
expect(createMenuButton).not.toHaveClass(focusedClass);
it('should not add cdk-program-focused class to upload menu button if handler for focus of window is not fired', () => {
expect(uploadMenuButton).not.toHaveClass(focusedClass);
});
afterEach(() => {
createMenuButton.remove();
uploadMenuButton.remove();
});
});
describe('uploadFolder$', () => {
let createMenuButton: HTMLButtonElement;
let uploadMenuButton: HTMLButtonElement;
const focusedClass = 'cdk-program-focused';
beforeEach(() => {
createMenuButton = document.createElement('button');
document.body.appendChild(createMenuButton);
uploadMenuButton = document.createElement('button');
document.body.appendChild(uploadMenuButton);
store.dispatch(new UploadFolderAction({}));
spyOn(document, 'querySelector').withArgs('app-create-menu button').and.returnValue(createMenuButton);
spyOn(document, 'querySelector').withArgs('app-toolbar-menu button[id="app.toolbar.upload"]').and.returnValue(uploadMenuButton);
});
it('should call focus function on create menu button', () => {
spyOn(createMenuButton, 'focus');
it('should call focus function on upload menu button', () => {
spyOn(uploadMenuButton, 'focus');
window.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton.focus).toHaveBeenCalledWith();
expect(uploadMenuButton.focus).toHaveBeenCalledWith();
});
it('should not call focus function on create menu button if handler for focus of window is not fired', () => {
spyOn(createMenuButton, 'focus');
expect(createMenuButton.focus).not.toHaveBeenCalled();
it('should not call focus function on upload menu button if handler for focus of window is not fired', () => {
spyOn(uploadMenuButton, 'focus');
expect(uploadMenuButton.focus).not.toHaveBeenCalled();
});
it('should add cdk-program-focused class to create menu button', () => {
it('should add cdk-program-focused class to upload menu button', () => {
window.dispatchEvent(new FocusEvent('focus'));
createMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton).toHaveClass(focusedClass);
uploadMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(uploadMenuButton).toHaveClass(focusedClass);
});
it('should not add cdk-program-focused class to create menu button if handler for focus of window is not fired', () => {
expect(createMenuButton).not.toHaveClass(focusedClass);
it('should not add cdk-program-focused class to upload menu button if handler for focus of window is not fired', () => {
expect(uploadMenuButton).not.toHaveClass(focusedClass);
});
afterEach(() => {
createMenuButton.remove();
uploadMenuButton.remove();
});
});

6
projects/aca-content/src/lib/store/effects/upload.effects.ts
View File

@ -47,7 +47,7 @@ export class UploadEffects {
private fileInput: HTMLInputElement;
private folderInput: HTMLInputElement;
private fileVersionInput: HTMLInputElement;
private readonly createMenuButtonSelector = 'app-create-menu button';
private readonly uploadMenuButtonSelector = 'app-toolbar-menu button[id="app.toolbar.upload"]';
constructor(
private store: Store<AppStore>,
@ -91,7 +91,7 @@ export class UploadEffects {
this.actions$.pipe(
ofType<UploadFilesAction>(UploadActionTypes.UploadFiles),
map(() => {
this.registerFocusingElementAfterModalClose(this.fileInput, this.createMenuButtonSelector);
this.registerFocusingElementAfterModalClose(this.fileInput, this.uploadMenuButtonSelector);
this.fileInput.click();
})
),
@ -103,7 +103,7 @@ export class UploadEffects {
this.actions$.pipe(
ofType<UploadFolderAction>(UploadActionTypes.UploadFolder),
map(() => {
this.registerFocusingElementAfterModalClose(this.folderInput, this.createMenuButtonSelector);
this.registerFocusingElementAfterModalClose(this.folderInput, this.uploadMenuButtonSelector);
this.folderInput.click();
})
),