From 7d09845b8c8a8a5ba9a5287609b9bb927d5c3744 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 22 Dec 2021 12:06:08 -0600
Subject: [PATCH 1/2] Remove unnecessary `window.requestAnimationFrame`.

---
 assets/js/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index afb2ef5..834d1de 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -199,7 +199,7 @@ window.addEventListener("phx:page-loading-start", info => topbar.show())
 window.addEventListener("phx:page-loading-stop", info => topbar.hide())
 
 // Accessible routing
-window.addEventListener("phx:page-loading-stop", () => window.requestAnimationFrame(routeUpdated))
+window.addEventListener("phx:page-loading-stop", routeUpdated)
 
 window.addEventListener("js:exec", e => e.target[e.detail.call](...e.detail.args))
 

From 7b48c2fbaf4fdaecd6cb240afb3522f380929093 Mon Sep 17 00:00:00 2001
From: Nolan Darilek <nolan@thewordnerd.info>
Date: Wed, 22 Dec 2021 12:41:19 -0600
Subject: [PATCH 2/2] Further simplify post-route handler.

* Use `HtmlElement.tabIndex` directly rather than going through attributes.
* Always restore `tabIndex` after focus.
* Remove `setTimeout` to simplify implementation.

This does have a disadvantage in that it leaves unnecessary `tabindex="1"` instances around. On the other hand, it does simplify the implementation and get the job done' so is probably a more clear example of how to do this correctly.
---
 assets/js/app.js | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 834d1de..dc3b466 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -180,16 +180,10 @@ let liveSocket = new LiveSocket("/live", Socket, {
 let routeUpdated = () => {
   let target = document.querySelector("main h1") || document.querySelector("main")
   if (target) {
-    let origTabIndex = target.getAttribute("tabindex")
-    target.setAttribute("tabindex", "-1")
+    let origTabIndex = target.tabIndex
+    target.tabIndex = -1
     target.focus()
-    window.setTimeout(() => {
-      if (origTabIndex) {
-        target.setAttribute("tabindex", origTabIndex)
-      } else {
-        target.removeAttribute("tabindex")
-      }
-    }, 1000)
+    target.tabIndex = origTabIndex
   }
 }