inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-4051] Copy to clipboard button is now accessible through the keyboard (#8225)

Browse Source
This commit is contained in:
Jatin Chugh
2023-02-03 02:23:30 +05:30
committed by GitHub
parent d50aa91922
commit 65e0c2405a
2 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
lib/core/src/lib/clipboard/clipboard.directive.spec.ts
View File

@@ -64,6 +64,14 @@ describe('ClipboardDirective', () => {
expect(clipboardService.copyToClipboard).toHaveBeenCalled();
});
it('should notify copy target value on keydown event', () => {
spyOn(clipboardService, 'copyToClipboard');
fixture.nativeElement.querySelector('input').value = 'some value';
fixture.nativeElement.querySelector('button').dispatchEvent(new KeyboardEvent('keydown', {code: 'Enter', key: 'Enter'}));
expect(clipboardService.copyToClipboard).toHaveBeenCalled();
});
});
describe('CopyClipboardDirective', () => {
@@ -128,6 +136,16 @@ describe('CopyClipboardDirective', () => {
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text to copy');
}));
it('should copy the content of element on keydown event', fakeAsync(() => {
const spanHTMLElement = element.querySelector<HTMLInputElement>('span');
fixture.detectChanges();
spyOn(navigator.clipboard, 'writeText');
spanHTMLElement.dispatchEvent(new KeyboardEvent('keydown', {code: 'Enter', key: 'Enter'}));
tick();
fixture.detectChanges();
expect(navigator.clipboard.writeText).toHaveBeenCalledWith('text to copy');
}));
it('should not copy the content of element when click it', fakeAsync(() => {
const spanHTMLElement = element.querySelector<HTMLInputElement>('span');
fixture.detectChanges();

13
lib/core/src/lib/clipboard/clipboard.directive.ts
View File

@@ -40,12 +40,6 @@ export class ClipboardDirective {
public viewContainerRef: ViewContainerRef,
private resolver: ComponentFactoryResolver) {}
@HostListener('click', ['$event'])
handleClickEvent(event: MouseEvent) {
event.preventDefault();
event.stopPropagation();
this.copyToClipboard();
}
@HostListener('mouseenter')
showTooltip() {
@@ -61,7 +55,12 @@ export class ClipboardDirective {
this.viewContainerRef.remove();
}
private copyToClipboard() {
@HostListener('keydown.enter', ['$event'])
@HostListener('click', ['$event'])
copyToClipboard(event: KeyboardEvent | MouseEvent): void {
event.preventDefault();
event.stopPropagation();
const isValidTarget = this.clipboardService.isTargetValid(this.target);
if (isValidTarget) {