[ACS-4051] Copy to clipboard button is now accessible through the keyboard enter earlier which was only accessible through mouse click (#8165)

* Copy to clipboard button is now accessible through the keyboard enter earlier which was only accessible through mouse click

* review comments addressed
This commit is contained in:
Jatin Chugh
2023-01-31 18:28:03 +05:30
committed by GitHub
parent 4f25426c25
commit 11c3a02acc
2 changed files with 25 additions and 8 deletions

View File

@@ -64,6 +64,15 @@ 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 +137,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();

View File

@@ -40,13 +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() {
if (this.placeholder) {
@@ -61,7 +54,12 @@ export class ClipboardDirective {
this.viewContainerRef.remove();
}
private copyToClipboard() {
@HostListener('click', ['$event'])
@HostListener('keydown.enter', ['$event'])
copyToClipboard(event: MouseEvent | KeyboardEvent) {
event.preventDefault();
event.stopPropagation();
const isValidTarget = this.clipboardService.isTargetValid(this.target);
if (isValidTarget) {