Accessibility / Focus Interactive / Lost Focus Alert Bookmarklet

The Lost Focus Alert bookmarklet tracks focus changes on interactive elements and displays a large alert notification when focus is lost to the document body. This typically indicates a focus management bug where JavaScript intercepts a click/focus event but fails to properly set focus to a new element, leaving keyboard users stranded. The offending element is highlighted with a red outline and a warning icon. Alerts appear at the bottom of the screen with details logged to the console. Reload the page to stop tracking.

javascript:%21function()%7Bconsole.log(%22Tracking%20focus%20loss%20now%20------------------------------------%22)%3Bconst%20e%3Ddocument.querySelectorAll(%27a%5Bhref%5D%2Cbutton%2Cselect%2Cinput%3Anot(%5Btype%3D%22hidden%22%5D)%2Ctextarea%2Csummary%2Carea%2C%5Btabindex%5D%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)%27)%3Blet%20t%2Co%2Cn%2Cs%3Bconst%20l%3Ddocument.createElement(%22div%22)%3Bl.setAttribute(%22role%22%2C%22alert%22)%2Cl.setAttribute(%22aria-atomic%22%2C%22false%22)%2Cl.setAttribute(%22id%22%2C%22focLostNotif%22)%2Cdocument.body.appendChild(l)%3Blet%20i%2Cc%3Ddocument.createElement(%22style%22)%3Bdocument.head.appendChild(c)%2C(i%3Dc.sheet).insertRule(%22%23focLostNotif%3Aempty%20%7Bvisibility%3Ahidden%3B%7D%22%2C0)%2Ci.insertRule(%22%23focLostNotif%20%7Bbackground%3Ablack%3Bcolor%3Awhite%3Bpadding%3A1em%3Bfont-size%3A2em%3Bborder-radius%3A10px%3Boutline%3A4px%20solid%20white%3Bposition%3Afixed%3Bbottom%3A2em%3Bleft%3A50%25%3Btransform%3AtranslateX(-50%25)%7D%22%2C0)%2Ci.insertRule(%22.elCausedLossOfFocus%20%7Boutline%3A4px%20solid%20red%7D%22%2C0)%2Ci.insertRule(%27.elCausedLossOfFocus%3Abefore%20%7Bcontent%3A%22%5Cud83d%5Cudea8%20%22%7D%27%2C0)%2CArray.from(e).forEach(e%3D%3E%7Be.addEventListener(%22focus%22%2C()%3D%3E%7Bconsole.log(%22Focus%3A%20%22%2Ce)%2Co%3Ddocument.activeElement%7D)%2Ce.addEventListener(%22click%22%2C()%3D%3E%7BclearTimeout(n)%2Cn%3DsetTimeout(function()%7Bt%3Ddocument.activeElement%2Cl.innerHTML%3D%22%22%2C%22BODY%22%3D%3D%3Dt.tagName%26%26(console.log(%22%5Cud83d%5Cudea8%20FOCUS%20WAS%20LOST%21%20%5Cud83d%5Cudea8%22)%2Cconsole.log(%22*%20Active%20element%20before%20was%20%3D%20%22%2Co)%2Cconsole.log(%22*%20Focus%20after%20%3D%20%22%2Ct)%2Co.classList.add(%22elCausedLossOfFocus%22)%2Cl.innerHTML%3D%22FOCUS%20WAS%20LOST%21%3Cbr%3ECheck%20Console%20for%20details%22%2CclearTimeout(s)%2Cs%3DsetTimeout(function()%7Bl.innerHTML%3D%22%22%7D%2C300))%7D%2C100)%7D)%7D)%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fa11y-tools.com%2Fbookmarklets%2F%23lostfocus%5CnBookmarklet%20name%3A%20Lost%20focus%20alert%5Cn%22)%3B