romanmir/TorrentParts
1
0
Fork 0
mirror of https://github.com/leoherzog/TorrentParts.git synced 2026-01-25 04:38:53 -08:00
Code Issues Packages Projects Releases Wiki Activity

Improve Accessibility with Proper Button Elements and ARIA Labels

Browse Source
This commit is contained in:
Leo Herzog
2025-12-22 21:58:47 -05:00
parent dc93c4722e
commit 615fe5092c
2 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/parse.js
View File

@@ -279,10 +279,12 @@ function display() {
tracker.setAttribute('aria-label', 'Tracker URL #' + i); tracker.setAttribute('aria-label', 'Tracker URL #' + i);
tracker.addEventListener('input', propertyChange); tracker.addEventListener('input', propertyChange);
row.appendChild(tracker); row.appendChild(tracker);
let remove = document.createElement('a'); let remove = document.createElement('button');
remove.type = 'button';
remove.className = 'remove'; remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="far fa-trash"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.setAttribute('aria-label', 'Remove tracker #' + i);
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
announce.appendChild(row); announce.appendChild(row);
@@ -305,10 +307,12 @@ function display() {
webseed.setAttribute('aria-label', 'Webseed URL #' + i); webseed.setAttribute('aria-label', 'Webseed URL #' + i);
webseed.addEventListener('input', propertyChange); webseed.addEventListener('input', propertyChange);
row.appendChild(webseed); row.appendChild(webseed);
let remove = document.createElement('a'); let remove = document.createElement('button');
remove.type = 'button';
remove.className = 'remove'; remove.className = 'remove';
remove.dataset.index = i; remove.dataset.index = i;
remove.innerHTML = '<span class="far fa-trash"></span>'; remove.innerHTML = '<span class="far fa-trash"></span>';
remove.setAttribute('aria-label', 'Remove webseed #' + i);
remove.addEventListener('click', removeRow); remove.addEventListener('click', removeRow);
row.appendChild(remove); row.appendChild(remove);
urlList.appendChild(row); urlList.appendChild(row);
@@ -340,10 +344,10 @@ function display() {
} else { } else {
if (client.torrents.length > 0) { if (client.torrents.length > 0) {
getFiles.style.display = 'none'; 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 { } else {
getFiles.style.display = 'block'; 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.'); downloadTorrentTooltip.setContent('Files metadata is required to generate a Torrent file. Try fetching files list from WebTorrent.');
downloadTorrent.removeEventListener('click', saveTorrent); downloadTorrent.removeEventListener('click', saveTorrent);

47
src/style.css
View File

@@ -306,10 +306,35 @@ input {
#announce > *, #urlList > * { #announce > *, #urlList > * {
margin: 0 0 16px 0; margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 6px;
} }
.remove { .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) { @media (max-width: 1080px) {
@@ -378,8 +403,28 @@ input {
align-items: center; align-items: center;
} }
output {
text-align: center;
}
#announce, #urlList { #announce, #urlList {
text-align: center; 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 { #announce > * > *, #urlList > * > *, #addTracker, #addWebseed, #examples > button {