From f6a6de1711c34a70680c6686e0f81e568a67baa5 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 9 Aug 2023 14:54:47 +0200 Subject: [PATCH 1/2] fix(NcModal): use additionalTrapElements on init Signed-off-by: Grigorii K. Shartsev --- src/components/NcModal/NcModal.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index f98f9a4f26..6bf309592f 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -717,7 +717,7 @@ export default { } // Init focus trap - this.focusTrap = createFocusTrap(contentContainer, options) + this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options) this.focusTrap.activate() }, clearFocusTrap() { From d7410b75eaa58e4bf1ba9a991351e5b0dfbaf856 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 9 Aug 2023 14:58:57 +0200 Subject: [PATCH 2/2] fix(NcModal): ignore arrow navigation when active element is outside Signed-off-by: Grigorii K. Shartsev --- src/components/NcModal/NcModal.vue | 35 ++++++++++++++++++++---------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index 6bf309592f..2daef41968 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -616,18 +616,26 @@ export default { } }, - // Key Handlers - handleKeydown(e) { - switch (e.keyCode) { - case 37: // left arrow - this.previous(e) - break - case 39: // right arrow - this.next(e) - break - case 27: // escape key - this.close(e) - break + /** + * @param {KeyboardEvent} event - keyboard event + */ + handleKeydown(event) { + if (event.key === 'Escape') { + return this.close(event) + } + + const arrowHandlers = { + ArrowLeft: this.previous, + ArrowRight: this.next, + } + if (arrowHandlers[event.key]) { + // Ignore arrow navigation, if there is a current focus outside the modal. + // For example, when the focus is in Sidebar or NcActions's items, + // arrow navigation should not be intercept by modal slider + if (document.activeElement && !this.$el.contains(document.activeElement)) { + return + } + return arrowHandlers[event.key](event) } }, @@ -714,6 +722,9 @@ export default { allowOutsideClick: true, fallbackFocus: contentContainer, trapStack: getTrapStack(), + // Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap. + // Focus trap is deactivated on modal close anyway. + escapeDeactivates: false, } // Init focus trap