Allow 0 tabindex to be focusable (#3617)

MDN recommends that divs with tabindex of 0 should be focusable, and also recommends that tabindex should only ever be -1 or 0.

Author: TylerWitt

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"))
     )
   },
 

assets/test/js_test.js

@@ -1193,4 +1193,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)
+    })
+  })
 })