From 615fe5092cf2b694f1562ac816622d0b3cddc03e Mon Sep 17 00:00:00 2001
From: Leo Herzog <leo@herzog.tech>
Date: Mon, 22 Dec 2025 21:58:47 -0500
Subject: [PATCH] Improve Accessibility with Proper Button Elements and ARIA
 Labels

---
 src/parse.js  | 12 ++++++++----
 src/style.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/parse.js b/src/parse.js
index 41f9eb4..38f4464 100644
--- a/src/parse.js
+++ b/src/parse.js
@@ -279,10 +279,12 @@ function display() {
       tracker.setAttribute('aria-label', 'Tracker URL #' + i);
       tracker.addEventListener('input', propertyChange);
       row.appendChild(tracker);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
       remove.className = 'remove';
       remove.dataset.index = i;
       remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove tracker #' + i);
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       announce.appendChild(row);
@@ -305,10 +307,12 @@ function display() {
       webseed.setAttribute('aria-label', 'Webseed URL #' + i);
       webseed.addEventListener('input', propertyChange);
       row.appendChild(webseed);
-      let remove = document.createElement('a');
+      let remove = document.createElement('button');
+      remove.type = 'button';
       remove.className = 'remove';
       remove.dataset.index = i;
       remove.innerHTML = '<span class="far fa-trash"></span>';
+      remove.setAttribute('aria-label', 'Remove webseed #' + i);
       remove.addEventListener('click', removeRow);
       row.appendChild(remove);
       urlList.appendChild(row);
@@ -340,10 +344,10 @@ function display() {
   } else {
     if (client.torrents.length > 0) {
       getFiles.style.display = 'none';
-      files.innerHTML = '<input type="text" placeholder="Attempting fetching of files from Webtorrent..." aria-label="Attempting fetching of files from Webtorrent..." disabled>';
+      files.innerHTML = '<output>Attempting fetching of files from Webtorrent...</output>';
     } else {
       getFiles.style.display = 'block';
-      files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" aria-label="Files information not included in the URL/File provided" disabled>';
+      files.innerHTML = '<output>Not included in the URL/File provided</output>';
     }
     downloadTorrentTooltip.setContent('Files metadata is required to generate a Torrent file. Try fetching files list from WebTorrent.');
     downloadTorrent.removeEventListener('click', saveTorrent);
diff --git a/src/style.css b/src/style.css
index 6076775..84e1c62 100644
--- a/src/style.css
+++ b/src/style.css
@@ -306,10 +306,35 @@ input {
 
 #announce > *, #urlList > * {
   margin: 0 0 16px 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .remove {
-  margin-left: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  padding: 0;
+  cursor: pointer;
+  display: inline;
+  color: var(--grey);
+  flex-shrink: 0;
+}
+
+output {
+  color: rgb(120, 126, 133) !important;
+  -webkit-text-fill-color: rgb(120, 126, 133) !important;
+  background: transparent;
+  border: 0;
+  padding: 8px 0;
+  font-style: normal;
+  display: block;
+  width: 440px;
+  height: 40px;
+  box-sizing: border-box;
 }
 
 @media (max-width: 1080px) {
@@ -378,8 +403,28 @@ input {
     align-items: center;
   }
 
+  output {
+    text-align: center;
+  }
+
   #announce, #urlList {
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #announce > *, #urlList > * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80vw;
+    gap: 6px;
+  }
+
+  #announce > * > input, #urlList > * > input {
+    width: calc(80vw - 40px);
+    flex: none;
   }
 
   #announce > * > *, #urlList > * > *, #addTracker, #addWebseed, #examples > button {