From ffded3fcac941dfcbe79e2c2fdf8897c104975e5 Mon Sep 17 00:00:00 2001
From: Aarya B C <60278134+ayy-bc@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:47:44 +0000
Subject: [PATCH] disable tab to change focus when dragging

---
 packages/react-dnd-accessible-backend/KeyboardBackend.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-dnd-accessible-backend/KeyboardBackend.tsx b/packages/react-dnd-accessible-backend/KeyboardBackend.tsx
index 5aef670..9bb9929 100644
--- a/packages/react-dnd-accessible-backend/KeyboardBackend.tsx
+++ b/packages/react-dnd-accessible-backend/KeyboardBackend.tsx
@@ -20,6 +20,7 @@ import type { AnnouncementMessages } from "./util/AnnouncementMessages";
 const Trigger = {
   DROP: [" ", "Enter"],
   CANCEL_DRAG: ["Escape"],
+  TAB: ["Tab"],
 };
 
 function isTrigger(event: KeyboardEvent, trigger: typeof Trigger[keyof typeof Trigger]) {
@@ -112,6 +113,8 @@ export class KeyboardBackend implements Backend {
       const sourceNode = this.sourceNodes.get(sourceId);
       this._announcer.announceCancel(sourceNode ?? null, sourceId);
     }
+    // Prevent tabbing to other elements when dragging locking the focus on drag source
+    if (this.monitor.isDragging() && isTrigger(event, Trigger.TAB)) event.preventDefault();
   };
 
   private setDndMode(enabled: boolean) {