From 3fb972e228aabfe07d662b77c642405f909fddb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Mon, 16 Sep 2024 17:48:03 -0400
Subject: [PATCH] Force `tabindex="0"` in Safari

---
 .changeset/safari-focus.md                                  | 5 +++++
 .../dom/src/core/plugins/accessibility/Accessibility.ts     | 6 +++++-
 packages/dom/src/utilities/execution-context/isSafari.ts    | 3 +++
 packages/dom/src/utilities/index.ts                         | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/safari-focus.md
 create mode 100644 packages/dom/src/utilities/execution-context/isSafari.ts

diff --git a/.changeset/safari-focus.md b/.changeset/safari-focus.md
new file mode 100644
index 00000000..fb4bd9f6
--- /dev/null
+++ b/.changeset/safari-focus.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+**AccessibilityPlugin**: Force `tabindex="0"` in Safari even for natively focusable elements as they are not always focusable by default.
diff --git a/packages/dom/src/core/plugins/accessibility/Accessibility.ts b/packages/dom/src/core/plugins/accessibility/Accessibility.ts
index 97ebbae5..8a9c66ff 100644
--- a/packages/dom/src/core/plugins/accessibility/Accessibility.ts
+++ b/packages/dom/src/core/plugins/accessibility/Accessibility.ts
@@ -1,5 +1,6 @@
 import {effects} from '@dnd-kit/state';
 import {Plugin} from '@dnd-kit/abstract';
+import {isSafari} from '@dnd-kit/dom/utilities';
 
 import type {DragDropManager} from '../../manager/index.ts';
 import {
@@ -83,7 +84,10 @@ export class Accessibility extends Plugin<DragDropManager> {
             initialize();
           }
 
-          if (!isFocusable(activator) && !activator.hasAttribute('tabindex')) {
+          if (
+            (!isFocusable(activator) || isSafari()) &&
+            !activator.hasAttribute('tabindex')
+          ) {
             activator.setAttribute('tabindex', '0');
           }
 
diff --git a/packages/dom/src/utilities/execution-context/isSafari.ts b/packages/dom/src/utilities/execution-context/isSafari.ts
new file mode 100644
index 00000000..a1336129
--- /dev/null
+++ b/packages/dom/src/utilities/execution-context/isSafari.ts
@@ -0,0 +1,3 @@
+export function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
diff --git a/packages/dom/src/utilities/index.ts b/packages/dom/src/utilities/index.ts
index 616efe2a..cb0f69fc 100644
--- a/packages/dom/src/utilities/index.ts
+++ b/packages/dom/src/utilities/index.ts
@@ -6,6 +6,7 @@ export {
 export {getVisibleBoundingRectangle} from './bounding-rectangle/getVisibleBoundingRectangle.ts';
 
 export {canUseDOM, getDocument, getWindow} from './execution-context/index.ts';
+export {isSafari} from './execution-context/isSafari.ts';
 
 export {cloneElement, ProxiedElements} from './element/index.ts';