Force tabindex="0" in Safari

clauderic · Sep 16, 2024 · 3fb972e · 3fb972e
1 parent 462a397
commit 3fb972e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/.changeset/safari-focus.md 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
@@ -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
@@ -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
@@ -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';