From f77d520cccf32330fa21b1820cc054d2f769ebf6 Mon Sep 17 00:00:00 2001
From: Tyler Witt <Ty.Mo.Witt@gmail.com>
Date: Sun, 5 Jan 2025 22:10:15 +0700
Subject: [PATCH] Allow 0 tabindex to be focusable

MDN recommends that divs with tabindex of 0 should be focusable, and also recommends that tabindex should only ever be -1 or 0.
---
 assets/js/phoenix_live_view/aria.js |  2 +-
 assets/test/js_test.js              | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/assets/js/phoenix_live_view/aria.js b/assets/js/phoenix_live_view/aria.js
index 9377c78728..25ecf74ab3 100644
--- a/assets/js/phoenix_live_view/aria.js
+++ b/assets/js/phoenix_live_view/aria.js
@@ -7,7 +7,7 @@ let ARIA = {
       (el instanceof HTMLAreaElement && el.href !== undefined) ||
       (!el.disabled && (this.anyOf(el, [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement]))) ||
       (el instanceof HTMLIFrameElement) ||
-      (el.tabIndex > 0 || (!interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true"))
+      (el.tabIndex >= 0 || (!interactiveOnly && el.getAttribute("tabindex") !== null && el.getAttribute("aria-hidden") !== "true"))
     )
   },
 
diff --git a/assets/test/js_test.js b/assets/test/js_test.js
index 25d1f97a84..7cef4f6cc9 100644
--- a/assets/test/js_test.js
+++ b/assets/test/js_test.js
@@ -900,4 +900,24 @@ describe("JS", () => {
       expect(document.activeElement).toBe(modal1)
     })
   })
+
+  describe("exec_focus_first", () => {
+    test("focuses div with tabindex 0", () => {
+      let view = setupView(`
+      <div id="parent">
+        <div id="modal1" class="modal">modal 1</div>
+        <div id="modal2" tabindex="0" class="modal">modal 2</div>
+        <div id="modal3" tabindex="1" class="modal">modal 1</div>
+        <div id="push" phx-click='[["focus_first", {"to": "#parent"}]]'></div>
+      </div>
+      `)
+      let modal2 = document.querySelector("#modal2")
+      let push = document.querySelector("#push")
+
+      JS.exec(event, "click", push.getAttribute("phx-click"), view, push)
+
+      jest.runAllTimers()
+      expect(document.activeElement).toBe(modal2)
+    })
+  })
 })