mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ACS-10304] KN: personal files: Column resizing available via mouse but not accessible via keyboard (#11616)
This commit is contained in:
@@ -161,5 +161,17 @@ describe('ResizeHandleDirective', () => {
|
|||||||
expect(resizableContainer.resizeByKeyboard).not.toHaveBeenCalled();
|
expect(resizableContainer.resizeByKeyboard).not.toHaveBeenCalled();
|
||||||
expect(event.preventDefault).not.toHaveBeenCalled();
|
expect(event.preventDefault).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should not prevent default on Shift+Tab to allow reverse focus navigation', () => {
|
||||||
|
const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true });
|
||||||
|
spyOn(event, 'preventDefault');
|
||||||
|
spyOn(event, 'stopPropagation');
|
||||||
|
|
||||||
|
directive.onKeydown(event);
|
||||||
|
|
||||||
|
expect(resizableContainer.resizeByKeyboard).not.toHaveBeenCalled();
|
||||||
|
expect(event.preventDefault).not.toHaveBeenCalled();
|
||||||
|
expect(event.stopPropagation).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -34,32 +34,29 @@ export class ResizeHandleDirective implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
@HostListener('keydown', ['$event'])
|
@HostListener('keydown', ['$event'])
|
||||||
onKeydown(event: KeyboardEvent): void {
|
onKeydown(event: KeyboardEvent): void {
|
||||||
let delta: number | null = null;
|
|
||||||
const shiftDelta = 40;
|
const shiftDelta = 40;
|
||||||
if (event.shiftKey) {
|
|
||||||
delta += shiftDelta;
|
|
||||||
}
|
|
||||||
const rightStepBaseValue = 20;
|
const rightStepBaseValue = 20;
|
||||||
|
const shiftModifier = event.shiftKey ? shiftDelta : 0;
|
||||||
|
|
||||||
|
let delta: number | null = null;
|
||||||
|
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case 'ArrowRight':
|
case 'ArrowRight':
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
delta += rightStepBaseValue;
|
delta = shiftModifier + rightStepBaseValue;
|
||||||
break;
|
break;
|
||||||
case 'ArrowLeft':
|
case 'ArrowLeft':
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
delta = -delta;
|
delta = -shiftModifier;
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (delta !== null) {
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
||||||
this.resizableContainer.resizeByKeyboard(delta);
|
this.resizableContainer.resizeByKeyboard(delta);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.zone.runOutsideAngular(() => {
|
this.zone.runOutsideAngular(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user