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' providedIn: 'root'
}) })
export class ContentManagementService { export class ContentManagementService {
private readonly createMenuButtonSelector = 'app-create-menu button'; private readonly createMenuButtonSelector = 'app-toolbar-menu button[id="app.toolbar.create"]';
constructor( constructor(
private nodesApiService: NodesApiService, 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 { 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$', () => { describe('uploadFiles$', () => {
let createMenuButton: HTMLButtonElement; let uploadMenuButton: HTMLButtonElement;
const focusedClass = 'cdk-program-focused'; const focusedClass = 'cdk-program-focused';
beforeEach(() => { beforeEach(() => {
createMenuButton = document.createElement('button'); uploadMenuButton = document.createElement('button');
document.body.appendChild(createMenuButton); document.body.appendChild(uploadMenuButton);
store.dispatch(new UploadFilesAction({})); 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', () => { it('should call focus function on upload menu button', () => {
spyOn(createMenuButton, 'focus'); spyOn(uploadMenuButton, 'focus');
window.dispatchEvent(new FocusEvent('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', () => { it('should not call focus function on upload menu button if handler for focus of window is not fired', () => {
spyOn(createMenuButton, 'focus'); spyOn(uploadMenuButton, 'focus');
expect(createMenuButton.focus).not.toHaveBeenCalled(); 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')); window.dispatchEvent(new FocusEvent('focus'));
createMenuButton.dispatchEvent(new FocusEvent('focus')); uploadMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton).toHaveClass(focusedClass); 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', () => { it('should not add cdk-program-focused class to upload menu button if handler for focus of window is not fired', () => {
expect(createMenuButton).not.toHaveClass(focusedClass); expect(uploadMenuButton).not.toHaveClass(focusedClass);
}); });
afterEach(() => { afterEach(() => {
createMenuButton.remove(); uploadMenuButton.remove();
}); });
}); });
describe('uploadFolder$', () => { describe('uploadFolder$', () => {
let createMenuButton: HTMLButtonElement; let uploadMenuButton: HTMLButtonElement;
const focusedClass = 'cdk-program-focused'; const focusedClass = 'cdk-program-focused';
beforeEach(() => { beforeEach(() => {
createMenuButton = document.createElement('button'); uploadMenuButton = document.createElement('button');
document.body.appendChild(createMenuButton); document.body.appendChild(uploadMenuButton);
store.dispatch(new UploadFolderAction({})); 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', () => { it('should call focus function on upload menu button', () => {
spyOn(createMenuButton, 'focus'); spyOn(uploadMenuButton, 'focus');
window.dispatchEvent(new FocusEvent('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', () => { it('should not call focus function on upload menu button if handler for focus of window is not fired', () => {
spyOn(createMenuButton, 'focus'); spyOn(uploadMenuButton, 'focus');
expect(createMenuButton.focus).not.toHaveBeenCalled(); 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')); window.dispatchEvent(new FocusEvent('focus'));
createMenuButton.dispatchEvent(new FocusEvent('focus')); uploadMenuButton.dispatchEvent(new FocusEvent('focus'));
expect(createMenuButton).toHaveClass(focusedClass); 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', () => { it('should not add cdk-program-focused class to upload menu button if handler for focus of window is not fired', () => {
expect(createMenuButton).not.toHaveClass(focusedClass); expect(uploadMenuButton).not.toHaveClass(focusedClass);
}); });
afterEach(() => { 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 fileInput: HTMLInputElement;
private folderInput: HTMLInputElement; private folderInput: HTMLInputElement;
private fileVersionInput: HTMLInputElement; private fileVersionInput: HTMLInputElement;
private readonly createMenuButtonSelector = 'app-create-menu button'; private readonly uploadMenuButtonSelector = 'app-toolbar-menu button[id="app.toolbar.upload"]';
constructor( constructor(
private store: Store<AppStore>, private store: Store<AppStore>,
@ -91,7 +91,7 @@ export class UploadEffects {
this.actions$.pipe( this.actions$.pipe(
ofType<UploadFilesAction>(UploadActionTypes.UploadFiles), ofType<UploadFilesAction>(UploadActionTypes.UploadFiles),
map(() => { map(() => {
this.registerFocusingElementAfterModalClose(this.fileInput, this.createMenuButtonSelector); this.registerFocusingElementAfterModalClose(this.fileInput, this.uploadMenuButtonSelector);
this.fileInput.click(); this.fileInput.click();
}) })
), ),
@ -103,7 +103,7 @@ export class UploadEffects {
this.actions$.pipe( this.actions$.pipe(
ofType<UploadFolderAction>(UploadActionTypes.UploadFolder), ofType<UploadFolderAction>(UploadActionTypes.UploadFolder),
map(() => { map(() => {
this.registerFocusingElementAfterModalClose(this.folderInput, this.createMenuButtonSelector); this.registerFocusingElementAfterModalClose(this.folderInput, this.uploadMenuButtonSelector);
this.folderInput.click(); this.folderInput.click();
}) })
), ),