a11y improvements

handlers/form.html

@@ -32,7 +32,9 @@
       <div class="place-self-end z-10">
         <div class="relative" id="dropdown">
           <button
-            aria-expanded="closed"
+            aria-expanded="false"
+            id="dropdownButton"
+            aria-label="Toggle dropdown menu"
             onclick="toggleDropdown()"
             type="button"
             class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-white dark:ring-offset-slate-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
@@ -248,6 +250,7 @@
           </button>
           <button
             type="submit"
+            id="submitButton"
             class="inline-flex items-center justify-center h-11 px-8 whitespace-nowrap rounded-md text-sm font-medium text-slate-200 dark:text-slate-900 ring-offset-white dark:ring-offset-slate-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-slate-800 dark:bg-slate-200 hover:bg-slate-800/90 dark:hover:bg-slate-200/90"
           >
             Proxy Search
@@ -258,17 +261,9 @@
       <footer class="mx-4 text-center text-slate-600 dark:text-slate-400">
         <p>
           Code Licensed Under GPL v3.0 |
-          <a
+          <a href="https://github.com/everywall/ladder">View Source</a>
-            href="https://github.com/everywall/ladder"
-            class="hover:text-blue-500 dark:hover:text-blue-500 hover:underline underline-offset-2 transition-colors duration-300"
-            >View Source</a
-          >
           |
-          <a
+          <a href="https://github.com/everywall">Everywall</a>
-            href="https://github.com/everywall"
-            class="hover:text-blue-500 dark:hover:text-blue-500 hover:underline underline-offset-2 transition-colors duration-300"
-            >Everywall</a
-          >
         </p>
       </footer>
     </div>

handlers/playground.html

@@ -80,6 +80,7 @@
               <div class="flex">
                 <a
                   href="/"
+                  aria-label="ladder"
                   class="flex -ml-2 h-8 font-extrabold tracking-tight hover:no-underline focus:outline-none ring-offset-white dark:ring-offset-slate-900 focus:ring ring-offset-2"
                 >
                   <svg
@@ -97,14 +98,21 @@
                       d="M153.196 310.121L133.153 285.021C140.83 283.798 148.978 285.092 156.741 284.353L156.637 277.725L124.406 278.002C123.298 277.325 122.856 276.187 122.058 275.193L116.089 267.862C110.469 260.975 103.827 254.843 98.6026 247.669C103.918 246.839 105.248 246.537 111.14 246.523L129.093 246.327C130.152 238.785 128.62 240.843 122.138 240.758C111.929 240.623 110.659 242.014 105.004 234.661L97.9953 225.654C94.8172 221.729 91.2219 218.104 88.2631 214.005C84.1351 208.286 90.1658 209.504 94.601 209.489L236.752 209.545C257.761 209.569 268.184 211.009 285.766 221.678L285.835 206.051C285.837 197.542 286.201 189.141 284.549 180.748C280.22 158.757 260.541 143.877 240.897 135.739C238.055 134.561 232.259 133.654 235.575 129.851C244.784 119.288 263.680 111.990 277.085 111.105C288.697 109.828 301.096 113.537 311.75 117.703C360.649 136.827 393.225 183.042 398.561 234.866C402.204 270.253 391.733 308.356 367.999 335.1C332.832 374.727 269.877 384.883 223.294 360.397C206.156 351.388 183.673 333.299 175.08 316.6C173.511 313.551 174.005 313.555 170.443 313.52L160.641 313.449C158.957 313.435 156.263 314.031 155.122 312.487L153.196 310.121Z"
                     />
                   </svg>
+                  <span
+                    class="text-3xl ml-1 text-[#7AA7D1] leading-8 align-middle"
+                    >ladder</span
+                  >
                 </a>
+                <span
+                  class="text-3xl mx-1 text-[#7AA7D1] leading-8 align-middle"
+                  >|</span
+                >
                 <a
                   href="/playground"
-                  class="flex ml-1 h-8 font-extrabold tracking-tight hover:no-underline focus:outline-none focus:ring ring-offset-2 ring-offset-white dark:ring-offset"
+                  class="flex h-8 font-extrabold tracking-tight hover:no-underline focus:outline-none focus:ring ring-offset-2 ring-offset-white dark:ring-offset"
                 >
-                  <span
+                  <span class="text-3xl text-[#7AA7D1] leading-8 align-middle"
-                    class="text-3xl mr-1 text-[#7AA7D1] leading-8 align-middle"
+                    >playground</span
-                    >ladder | playground</span
                   >
                 </a>
               </div>
@@ -113,7 +121,9 @@
             <div class="flex justify-center z-10">
               <div class="relative" id="dropdown">
                 <button
-                  aria-expanded="closed"
+                  aria-expanded="false"
+                  id="dropdownButton"
+                  aria-label="Toggle dropdown menu"
                   onclick="toggleDropdown()"
                   type="button"
                   class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-white dark:ring-offset transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
@@ -337,6 +347,7 @@
       <iframe
         name="resultIframe"
         id="resultIframe"
+        title="resultIframe"
         class="mt-48 h-[calc(100vh-14.5rem)] w-full overflow-x-hidden overflow-y-auto border-t-2 border-b-2 border-slate-400 dark:border-slate-700"
       ></iframe>
 

handlers/script.js

@@ -111,11 +111,13 @@ function trap(node) {
 
 const toggleDropdown = () => {
   const dropdown = document.getElementById("dropdown");
+  const dropdown_button = dropdown.querySelector("button");
   const dropdown_panel = document.getElementById("dropdown_panel");
   const focusTrap = trap(dropdown);
 
   const closeDropdown = () => {
     dropdown_panel.classList.add("hidden");
+    dropdown_button.setAttribute("aria-expanded", "false");
     focusTrap.destroy();
     dropdown.removeEventListener("keydown", handleEscapeKey);
     document.removeEventListener("click", handleClickOutside);
@@ -175,6 +177,7 @@ const toggleDropdown = () => {
 
   if (dropdown_panel.classList.contains("hidden")) {
     dropdown_panel.classList.remove("hidden");
+    dropdown_button.setAttribute("aria-expanded", "true");
     dropdown.addEventListener("keydown", handleEscapeKey);
     inputs.forEach((input) => {
       input.addEventListener("change", handleInputChange);

proxychain/responsemodifiers/vendor/generate_readable_outline.html

@@ -39,6 +39,7 @@
         <div class="flex">
           <a
             href="/"
+            aria-label="ladder"
             class="flex -ml-2 h-8 font-extrabold tracking-tight hover:no-underline focus:outline-none focus:ring focus:border-[#7AA7D1] ring-offset-2"
           >
             <svg
@@ -70,7 +71,9 @@
         <div class="flex justify-center z-10">
           <div class="relative" id="dropdown">
             <button
-              aria-expanded="closed"
+              aria-expanded="false"
+              id="dropdownButton"
+              aria-label="Toggle dropdown menu"
               onclick="toggleDropdown()"
               type="button"
               class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"

styles/input.css

@@ -4,7 +4,7 @@
 
 @layer base {
   a {
-    @apply text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-500 hover:underline underline-offset-2 transition-colors duration-300;
+    @apply text-slate-600 dark:text-slate-400 hover:text-blue-500 dark:hover:text-blue-500 underline underline-offset-4 transition-colors duration-300;
   }
   h1 {
     @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-slate-900 dark:text-slate-200;