Add freeze DOM bookmarklet

bookmarklets/freeze-dom.html

@@ -0,0 +1,2 @@
+
+<p>Freezes DOM in 5 seconds for capture.</p>

bookmarklets/freeze-dom.js

@@ -0,0 +1,14 @@
+/**
+ * @bookmarklet Freeze DOM in 5 seconds
+ * @description Freezes DOM in 5 seconds for capture
+ * @author Jason Morris
+ * @authorUrl https://jasonmorris.com
+ * @tags accessibility
+ * @auditing true
+ * @pageTest true
+ */
+(function () {
+  setTimeout(function () {
+    debugger;
+  }, 5000);
+})();

data/auditing.html

@@ -14,6 +14,7 @@ <H1>Bookmarks Menu</H1>
     <DT><A HREF="javascript:void%20(()=%3E%7Bdocument.querySelectorAll(%22body%20*%22).forEach(function(t)%7Bt.setAttribute(%22tabindex%22,%220%22)%7D);%7D)();%0A">Focus everything</a>
     <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7Bwindow._focusLogEnabled?(document.removeEventListener(%22focusin%22,window._focusLogHandler),window._focusLogEnabled=!1,console.log(%22Focus%20logging%20disabled.%22),alert(%22Focus%20logging%20disabled.%22)):(window._focusLogHandler=function(o)%7Bconsole.log(%22Focused:%22,o.target)%7D,document.addEventListener(%22focusin%22,window._focusLogHandler),window._focusLogEnabled=!0,console.log(%22Focus%20logging%20enabled.%22),alert(%22Focus%20logging%20enabled.%20Open%20DevTools%20console%20(F12)%20to%20see%20results.%22))%7D)();%7D)();%0A">Follow focus (in console)</a>
     <DT><A HREF="javascript:void%20(()=%3E%7Bvar%20e=document.createElement(%22style%22),t=document.createTextNode(%22a:focus,%20*:focus%20%7B%20outline:%204px%20solid%20orange%20!important;%20outline-offset:1px%20!important;%20%7D%22),n=document.getElementsByTagName(%22head%22);e.appendChild(t);n%5B0%5D.appendChild(e);%7D)();%0A">Force focus indicator</a>
+    <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7BsetTimeout(function()%7Bdebugger%7D,5e3)%7D)();%7D)();%0A">Freeze DOM in 5 seconds</a>
     <DT><A HREF="javascript:void%20(()=%3E%7Bvar%20a=%22%22;for(let%20t%20of%20document.querySelectorAll(%22h1,%20h2,%20h3,%20h4,%20h5,%20h6%22))%7Blet%20e=r(t);if(i(t)&&(t.offsetHeight%3E0%7C%7Ct.offsetWidth)&&e)%7Blet%20n=parseInt(t.tagName.match(/%5Cd/)%5B0%5D);a+=new%20Array((n-1)*2).fill(%22-%22).join(%22%22)+t.tagName.toLowerCase()+%22:%20%22+e+%60%0A%60%7D%7Dconsole.log(a);function%20r(t)%7Blet%20e=t.getAttribute(%22aria-labelledby%22);return(t.getAttribute(%22alt%22)%7C%7Ct.getAttribute(%22aria-label%22)%7C%7Ce&&o(document.getElementById(e))%7C%7Co(t)).trim()%7Dfunction%20o(t)%7Blet%20e=%22%22;for(let%20n%20of%20t.childNodes)e+=n%20instanceof%20HTMLElement?r(n):n.textContent%7C%7C%22%22;return%20e%7Dfunction%20i(t)%7Breturn!t.closest('%5Baria-hidden=%22%22%5D,%20%5Baria-hidden=%22true%22%5D')%7D%7D)();%0A">Document outline in console</a>
     <DT><A HREF="javascript:void%20(()=%3E%7Bfunction%20n(o)%7Bs(o);for(var%20a=%5B%22frame%22,%22iframe%22%5D,e=0;e%3Ca.length;e++)for(var%20r=o.getElementsByTagName(a%5Be%5D),l=0;l%3Cr.length;l++)try%7Bn(r%5Bl%5D.contentWindow.document)%7Dcatch%7B%7D%7Dfunction%20s(o)%7Bfor(var%20a=o.querySelectorAll(%22h1,h2,h3,h4,h5,h6,%5Brole='heading'%5D%22),e=0;e%3Ca.length;e++)%7Bvar%20r=a%5Be%5D.tagName+%22%20%22;a%5Be%5D.hasAttribute(%22role%22)&&(r=r+%22role=%22+a%5Be%5D.getAttribute(%22role%22)+%22%20%22),a%5Be%5D.hasAttribute(%22aria-level%22)&&(r=r+%22aria-level=%22+a%5Be%5D.getAttribute(%22aria-level%22));var%20l=document.createTextNode(r),t=document.createElement(%22span%22);t.style.color=%22black%22,t.style.backgroundColor=%22gold%22,t.style.fontSize=%22small%22,t.style.border=%22thin%20solid%20black%22,t.style.position=%22absolute%22,t.appendChild(l),a%5Be%5D.parentNode.insertBefore(t,a%5Be%5D),a%5Be%5D.style.border=%22thin%20solid%20magenta%22%7D%7Dn(document);%7D)();%0A">Headings</a>
     <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7Blet%20e=document.documentElement.clientWidth,o=!1;function%20n()%7Blet%20t=document.documentElement.clientWidth,i=document.body.scrollWidth%3Edocument.documentElement.clientWidth;i&&!o&&t%3Ce?(console.log(%60%25cHorizontal%20scrollbar%20detected!%25c%0AWindow%20width:%20%60+t+%60px%0AContent%20width:%20%60+document.body.scrollWidth+%60px%0AOverflow:%20%60+(document.body.scrollWidth-t)+%22px%22,%22color:%20#ff0000;%20font-size:%2014px;%20font-weight:%20bold;%22,%22color:%20inherit;%20font-size:%20inherit;%22),o=!0):i%7C%7C(o=!1),e=t%7Dwindow.addEventListener(%22resize%22,n),n(),console.log(%60%25cHorizontal%20scrollbar%20detector%20activated!%25c%0AResize%20the%20window%20to%20test.%60,%22color:%20#4CAF50;%20font-size:%2014px;%20font-weight:%20bold;%22,%22color:%20inherit;%20font-size:%20inherit;%22)%7D)();%7D)();%0A">Horizontal scroll</a>

data/bookmarks.html

@@ -25,6 +25,7 @@ <H1>Bookmarks Menu</H1>
     <DT><A HREF="javascript:void%20(()=%3E%7Bdocument.querySelectorAll(%22body%20*%22).forEach(function(t)%7Bt.setAttribute(%22tabindex%22,%220%22)%7D);%7D)();%0A">Focus everything</a>
     <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7Bwindow._focusLogEnabled?(document.removeEventListener(%22focusin%22,window._focusLogHandler),window._focusLogEnabled=!1,console.log(%22Focus%20logging%20disabled.%22),alert(%22Focus%20logging%20disabled.%22)):(window._focusLogHandler=function(o)%7Bconsole.log(%22Focused:%22,o.target)%7D,document.addEventListener(%22focusin%22,window._focusLogHandler),window._focusLogEnabled=!0,console.log(%22Focus%20logging%20enabled.%22),alert(%22Focus%20logging%20enabled.%20Open%20DevTools%20console%20(F12)%20to%20see%20results.%22))%7D)();%7D)();%0A">Follow focus (in console)</a>
     <DT><A HREF="javascript:void%20(()=%3E%7Bvar%20e=document.createElement(%22style%22),t=document.createTextNode(%22a:focus,%20*:focus%20%7B%20outline:%204px%20solid%20orange%20!important;%20outline-offset:1px%20!important;%20%7D%22),n=document.getElementsByTagName(%22head%22);e.appendChild(t);n%5B0%5D.appendChild(e);%7D)();%0A">Force focus indicator</a>
+    <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7BsetTimeout(function()%7Bdebugger%7D,5e3)%7D)();%7D)();%0A">Freeze DOM in 5 seconds</a>
     <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7Blet%20e=document.createElement(%22style%22);e.type=%22text/css%22,e.appendChild(document.createTextNode(%22%22)),document.head.appendChild(e),e.sheet.insertRule(%22html%20%7B%20%20filter:%20grayscale(100%25)%20!important;%20-webkit-filter:%20grayscale(1)%20!important;%7D%22,e.sheet.cssRules.length)%7D)();%7D)();%0A">Grayscale</a>
     <DT><A HREF="javascript:void%20(()=%3E%7B(function()%7Bfunction%20b()%7Blet%20r=%22#662e2e%22,i=0;function%20a(e,l)%7Be.style.boxShadow=%220px%200px%200px%2010px%20white%22,e.style.outline=%225px%20solid%20%22+l,e.style.outlineOffset=%225px%22,i++%7Dfunction%20n(e,l,t)%7Blet%20o=document.createElement(%22span%22);o.innerHTML=l,o.style.display=%22inline-block%22,o.style.margin=%2220px%200%205px%20-10px%22,o.style.padding=%225px%22,o.style.background=t,o.style.fontWeight=%22bold%22,o.style.fontSize=%2218px%22,o.style.color=%22white%22,o.classList.add(%22group-description%22),e.parentNode.insertBefore(o,e)%7Dvar%20d,u=document.querySelectorAll(%22fieldset%22);console.log(u),Array.from(u).forEach(e=%3E%7Bconsole.log(e),a(e,r),e.querySelector(%22legend%22)&&n(e,'Group%20label%20(from%20fieldset%20%3E%20legend):%20%3Cbr%3E%3Cbr%3E%22'+e.querySelector(%22legend%22).textContent+'%22',r)%7D),r=%22#66482e%22,Array.from(document.querySelectorAll(%22%5Brole=group%5D%5Baria-label%5D,%5Brole=region%5D%5Baria-label%5D%22)).forEach(e=%3E%7Bconsole.log(e);let%20l=e.getAttribute(%22role%22).toLowerCase();a(e,r),n(e,%22Group%20label%20(from%20%5Brole=%22+l+'%5D%5Baria-label%5D):%20%3Cbr%3E%3Cbr%3E%22'+e.getAttribute(%22aria-label%22)+'%22',r)%7D),r=%22#662e43%22,Array.from(document.querySelectorAll(%22%5Brole=group%5D%5Baria-labelledby%5D,%5Brole=region%5D%5Baria-labelledby%5D%22)).forEach(e=%3E%7Bconsole.log(e);let%20l=e.getAttribute(%22role%22).toLowerCase();a(e,r);let%20t=%22Source%20for%20aria-labelledby%20is%20missing/broken%22;document.querySelector(%22#%22+e.getAttribute(%22aria-labelledby%22))&&(t=document.querySelector(%22#%22+e.getAttribute(%22aria-labelledby%22)).textContent),n(e,%22Group%20label%20(from%20%5Brole=%22+l+'%5D%5Baria-labelledby%5D):%20%3Cbr%3E%3Cbr%3E%22'+t+'%22',r)%7D),i===0&&alert(%22No%20grouped%20fields%20found%20on%20this%20page%22)%7Db()%7D)();%7D)();%0A">Grouped fields</a>
     <DT><A HREF="javascript:void%20(()=%3E%7Bvar%20a=%22%22;for(let%20t%20of%20document.querySelectorAll(%22h1,%20h2,%20h3,%20h4,%20h5,%20h6%22))%7Blet%20e=r(t);if(i(t)&&(t.offsetHeight%3E0%7C%7Ct.offsetWidth)&&e)%7Blet%20n=parseInt(t.tagName.match(/%5Cd/)%5B0%5D);a+=new%20Array((n-1)*2).fill(%22-%22).join(%22%22)+t.tagName.toLowerCase()+%22:%20%22+e+%60%0A%60%7D%7Dconsole.log(a);function%20r(t)%7Blet%20e=t.getAttribute(%22aria-labelledby%22);return(t.getAttribute(%22alt%22)%7C%7Ct.getAttribute(%22aria-label%22)%7C%7Ce&&o(document.getElementById(e))%7C%7Co(t)).trim()%7Dfunction%20o(t)%7Blet%20e=%22%22;for(let%20n%20of%20t.childNodes)e+=n%20instanceof%20HTMLElement?r(n):n.textContent%7C%7C%22%22;return%20e%7Dfunction%20i(t)%7Breturn!t.closest('%5Baria-hidden=%22%22%5D,%20%5Baria-hidden=%22true%22%5D')%7D%7D)();%0A">Document outline in console</a>