Improve accessibility

This commit is contained in:
Leo Herzog
2020-11-10 16:04:43 -05:00
parent 8135012c2c
commit 9a50bf75e7
5 changed files with 41 additions and 25 deletions

View File

@@ -33783,6 +33783,8 @@ function parseRemote(toLoad) {
resetProperties();
return;
}
originalSourceIcon.innerHTML = '<span class="fad fa-file fa-fw"></span>';
originalSourceIcon.title = 'Currently loaded information sourced from remotely fetched Torrent file';
parsed = result;
display();
});
@@ -33814,6 +33816,7 @@ function display() {
tracker.value = parsed.announce[i];
tracker.dataset.index = i;
tracker.dataset.group = 'announce';
tracker.setAttribute('aria-label', 'Tracker URL #' + i);
tracker.addEventListener('input', propertyChange);
row.appendChild(tracker);
let remove = document.createElement('a');
@@ -33839,6 +33842,7 @@ function display() {
webseed.value = parsed.urlList[i];
webseed.dataset.index = i;
webseed.dataset.group = 'urlList';
webseed.setAttribute('aria-label', 'Webseed URL #' + i);
webseed.addEventListener('input', propertyChange);
row.appendChild(webseed);
let remove = document.createElement('a');
@@ -33866,10 +33870,10 @@ function display() {
} else {
if (client.torrents.length > 0) {
getFiles.style.display = "none";
files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." disabled>';
files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." aria-label="Attempting fetching files from Webtorrent..." disabled>';
} else {
getFiles.style.display = "block";
files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" disabled>';
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>';
}
downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true;

2
bundle.min.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -1,5 +1,6 @@
<!DOCTYPE html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
@@ -33,8 +34,11 @@
</header>
<div id="startButtons">
<input id="magnet" type="text" placeholder="Enter Magnet URL" />
<input id="torrent" type="file" />
<input id="magnet" type="text" placeholder="Enter Magnet URL" aria-label="Enter Magnet URL and press enter" />
<label for="magnet" style="display:none">
Enter Magnet link and press enter
</label>
<input id="torrent" type="file" aria-label="Select Torrent file" />
<label for="torrent">
<span class="fas fa-cloud-upload"></span> Select Torrent File
</label>
@@ -43,18 +47,18 @@
<div id="properties" style="display:none">
<button id="reset">
<button id="reset" aria-label="Reset the page">
<span class="far fa-times"></span>
</button>
<div id="download">
<button id="copyURL">
<div id="share">
<button id="copyURL" aria-label="Copy this torrent.parts link to the clipboard">
<span class="fas fa-share-alt fa-2x" data-fa-transform="left-1"></span>
</button>
<button id="copyMagnet">
<button id="copyMagnet" aria-label="Copy this Magnet URL to the clipboard">
<span class="fas fa-magnet fa-2x" data-fa-transform="down-1"></span>
</button>
<button id="downloadTorrent">
<button id="downloadTorrent" aria-label="Download this as a Torrent file">
<span class="fas fa-file-download fa-2x"></span>
</button>
</div>
@@ -80,11 +84,12 @@
<div class="property">
<div class="labels">
<label for="created">Created</label>
<label for="createdBy" style="display:none">Created By</label>
</div>
<div class="content">
<input id="created" type="text" placeholder="Creation time unspecified" disabled />
<input id="created" type="text" placeholder="Creation time unspecified" aria-label="Creation time" disabled />
<br />
<input id="createdBy" type="text" placeholder="Creation client unspecified" disabled />
<input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled />
</div>
</div>

View File

@@ -120,6 +120,8 @@ function parseRemote(toLoad) {
resetProperties();
return;
}
originalSourceIcon.innerHTML = '<span class="fad fa-file fa-fw"></span>';
originalSourceIcon.title = 'Currently loaded information sourced from remotely fetched Torrent file';
parsed = result;
display();
});
@@ -151,6 +153,7 @@ function display() {
tracker.value = parsed.announce[i];
tracker.dataset.index = i;
tracker.dataset.group = 'announce';
tracker.setAttribute('aria-label', 'Tracker URL #' + i);
tracker.addEventListener('input', propertyChange);
row.appendChild(tracker);
let remove = document.createElement('a');
@@ -176,6 +179,7 @@ function display() {
webseed.value = parsed.urlList[i];
webseed.dataset.index = i;
webseed.dataset.group = 'urlList';
webseed.setAttribute('aria-label', 'Webseed URL #' + i);
webseed.addEventListener('input', propertyChange);
row.appendChild(webseed);
let remove = document.createElement('a');
@@ -203,10 +207,10 @@ function display() {
} else {
if (client.torrents.length > 0) {
getFiles.style.display = "none";
files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." disabled>';
files.innerHTML = '<input type="text" placeholder="Attempting fetching files from Webtorrent..." aria-label="Attempting fetching files from Webtorrent..." disabled>';
} else {
getFiles.style.display = "block";
files.innerHTML = '<input type="text" placeholder="Not included in the URL/File provided" disabled>';
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>';
}
downloadTorrent.removeEventListener('click', saveTorrent);
downloadTorrent.disabled = true;

View File

@@ -5,7 +5,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
--gradient: linear-gradient(180deg, #152332, #24384D);
--dark-blue: #102030;
--light-blue: #495563;
--accent: #63A079;
--accent: #46835C;
--grey: #BDBDBD;
--white: #FFF;
background: #24384D;
@@ -15,7 +15,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
overflow-x: hidden;
}
:root:-webkit-scrollbar { /* WebKit */
:root:-webkit-scrollbar {
display: none;
}
@@ -31,7 +31,7 @@ body {
overflow-x: hidden;
}
body:-webkit-scrollbar { /* WebKit */
body:-webkit-scrollbar {
display: none;
}
@@ -157,12 +157,13 @@ label[for="torrent"] {
height: 32px;
border-radius: 50%;
text-align: center;
line-height: 50%;
position: absolute;
top: -12px;
right: -12px;
}
#download {
#share {
position: absolute;
top: 0;
left: -28px;
@@ -170,11 +171,12 @@ label[for="torrent"] {
flex-direction: column;
}
#download > * {
width: 60px;
height: 60px;
#share > * {
width: 64px;
height: 64px;
border-radius: 50%;
text-align: center;
line-height: 50%;
margin: 4px 0;
}
@@ -242,7 +244,7 @@ input {
right: 8px;
}
#download {
#share {
justify-content: center;
width: 95%;
top: auto;
@@ -252,7 +254,7 @@ input {
flex-direction: row;
}
#download > * {
#share > * {
margin: 0 4px;
}
@@ -266,7 +268,8 @@ input {
#startButtons {
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
height: 90px;
}
#properties {