From 53733d6f92f724962d457b00f9bd1442968dc0b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Tue, 12 Dec 2023 14:14:52 +0100 Subject: [PATCH] fix(shortcut): close order assign and dnd --- .../services/a11yDrag.service.ts | 178 +++++++++--------- 1 file changed, 90 insertions(+), 88 deletions(-) diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/services/a11yDrag.service.ts b/javascript/apps/taiga/src/app/modules/project/feature-kanban/services/a11yDrag.service.ts index f6c7f816d..4d19a32a6 100644 --- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/services/a11yDrag.service.ts +++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/services/a11yDrag.service.ts @@ -29,6 +29,7 @@ import { KanbanStoryA11y, } from '~/app/modules/project/feature-kanban/kanban.model'; import { KanbanState } from '../data-access/+state/reducers/kanban.reducer'; +import { ShortcutsService } from '@taiga/cdk/services/shortcuts'; @Injectable({ providedIn: 'root', @@ -37,7 +38,8 @@ export class A11yDragService { constructor( private store: Store, private translocoService: TranslocoService, - private liveAnnouncer: LiveAnnouncer + private liveAnnouncer: LiveAnnouncer, + public shortcutsService: ShortcutsService ) {} public inProgress = false; @@ -53,6 +55,93 @@ export class A11yDragService { this.dragOrDropStoryA11y(); this.events(); + this.shortcutsService.setScope('cancel-dnd'); + this.shortcutsService + .task('cancel', {}, 'cancel-dnd') + .pipe( + take(1), + takeUntil(this.onDestroy), + tap((e) => { + e.event.stopPropagation(); + }), + switchMap(() => this.store.select(selectKanbanState).pipe(take(1))) + ) + .subscribe((state) => { + const storyA11y = state.activeA11yDragDropStory; + const story = findStory(state, (it) => it.ref === this.storyRef); + + if (!storyA11y || !story) { + return; + } + + // Manage focus + // Get current story element + const statuses = Array.from( + document.querySelectorAll('tg-kanban-status') + ); + + const currentStatus = statuses.find((status) => { + return ( + status.getAttribute('data-id') === + storyA11y.initialPosition?.status + ); + }); + + const currentStatusData: KanbanStory['status'] = { + id: currentStatus!.getAttribute('data-id')!, + color: Number(currentStatus!.getAttribute('data-color'))!, + name: currentStatus!.getAttribute('data-name')!, + }; + + this.finish(); + this.store.dispatch( + KanbanActions.cancelDragStoryA11y({ + story: storyA11y, + status: currentStatusData, + }) + ); + + const announcementDrop = this.translocoService.translate( + 'kanban.dropped_live_announce', + { + title: story.title, + } + ); + + const announcementReorderCancelled = this.translocoService.translate( + 'kanban.reorder_cancelled_live_announce' + ); + + const announcement = `${announcementDrop}. ${announcementReorderCancelled}`; + + this.liveAnnouncer.announce(announcement, 'assertive').then( + () => { + setTimeout(() => { + const currentStatusStories = Array.from( + currentStatus!.querySelectorAll( + 'tg-kanban-story' + ) + ); + + const currentStory = currentStatusStories.at( + storyA11y.initialPosition.index! + ); + + if (currentStory) { + currentStory + .querySelector( + '.story-kanban-ref-focus .story-title' + )! + .focus(); + } + this.liveAnnouncer.clear(); + }, 50); + }, + () => { + // error + } + ); + }); this.inProgress = true; return { @@ -64,97 +153,10 @@ export class A11yDragService { } public events() { - const keyEscape$ = fromEvent(document.body, 'keydown').pipe( - filter((event) => event.code === 'Escape') - ); const keySpace$ = fromEvent(document.body, 'keydown').pipe( filter((event) => event.code == 'Space') ); - // On press escape anywhere - keyEscape$ - .pipe( - take(1), - takeUntil(this.onDestroy), - tap((e) => { - e.stopPropagation(); - }), - switchMap(() => this.store.select(selectKanbanState).pipe(take(1))) - ) - .subscribe((state) => { - const storyA11y = state.activeA11yDragDropStory; - const story = findStory(state, (it) => it.ref === this.storyRef); - - if (!storyA11y || !story) { - return; - } - - // Manage focus - // Get current story element - const statuses = Array.from( - document.querySelectorAll('tg-kanban-status') - ); - - const currentStatus = statuses.find((status) => { - return ( - status.getAttribute('data-id') === storyA11y.initialPosition?.status - ); - }); - - const currentStatusData: KanbanStory['status'] = { - id: currentStatus!.getAttribute('data-id')!, - color: Number(currentStatus!.getAttribute('data-color'))!, - name: currentStatus!.getAttribute('data-name')!, - }; - - this.finish(); - this.store.dispatch( - KanbanActions.cancelDragStoryA11y({ - story: storyA11y, - status: currentStatusData, - }) - ); - - const announcementDrop = this.translocoService.translate( - 'kanban.dropped_live_announce', - { - title: story.title, - } - ); - - const announcementReorderCancelled = this.translocoService.translate( - 'kanban.reorder_cancelled_live_announce' - ); - - const announcement = `${announcementDrop}. ${announcementReorderCancelled}`; - - this.liveAnnouncer.announce(announcement, 'assertive').then( - () => { - setTimeout(() => { - const currentStatusStories = Array.from( - currentStatus!.querySelectorAll('tg-kanban-story') - ); - - const currentStory = currentStatusStories.at( - storyA11y.initialPosition.index! - ); - - if (currentStory) { - currentStory - .querySelector( - '.story-kanban-ref-focus .story-title' - )! - .focus(); - } - this.liveAnnouncer.clear(); - }, 50); - }, - () => { - // error - } - ); - }); - // On press space keySpace$.pipe(takeUntil(this.onDestroy), take(1)).subscribe((e) => { e.stopPropagation();