Improve Accessibility

This commit is contained in:
Leo Herzog
2020-11-11 21:44:28 -05:00
parent f09514e8d5
commit 8e12c1b6b4
5 changed files with 145 additions and 118 deletions

View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Inspect and edit what's in your Torrent file or Magnet link" />
<meta name="keywords" content="torrent, webtorrent, magnet, p2p, peer to peer, filesharing, announce, tracker, webseed" />
@@ -35,7 +35,7 @@
<title>Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet" />
<script async src="https://kit.fontawesome.com/9ca49f101f.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
@@ -52,18 +52,18 @@
<body>
<header>
<h1 id="logo">Torrent<span id="originalSourceIcon"><span class="fad fa-magnet fa-fw"></span></span>Parts</h1>
<a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-color-scheme="no-preference:light;light:light;dark:dark;" data-icon="octicon-star" data-show-count="true" aria-label="Star leoherzog/TorrentParts on GitHub">Star</a>
<h1 id="logo">Torrent<span id="originalSourceIcon"><span class="fad fa-magnet fa-fw" aria-hidden="true"></span></span>Parts</h1>
<a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star leoherzog/TorrentParts on GitHub">Star</a>
</header>
<div id="startButtons">
<input id="magnet" type="text" placeholder="Enter Magnet URL" aria-label="Enter Magnet URL and press enter" />
<label for="magnet" style="display:none">
<label for="magnet" class="sr-only">
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
<span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
</label>
</div>
@@ -88,10 +88,10 @@
<div class="property">
<div class="labels">
<label for="hash">
<div>
<span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span>
Unique Hash
</label>
<label for="hash">Unique Hash</label>
</div>
</div>
<div class="content">
<input id="hash" type="text" placeholder="" disabled/>
@@ -100,10 +100,10 @@
<div class="property">
<div class="labels">
<label for="name">
<div>
<span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
Torrent Name
</label>
<label for="name">Torrent Name</label>
</div>
</div>
<div class="content">
<input id="name" type="text" placeholder="Unnamed" />
@@ -112,10 +112,10 @@
<div class="property">
<div class="labels">
<label for="created">
<div>
<span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
Created
</label>
<label for="created">Created</label>
</div>
<label for="createdBy" style="display:none">Created By</label>
</div>
<div class="content">
@@ -127,10 +127,10 @@
<div class="property">
<div class="labels">
<label for="comment">
<div>
<span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
Comment
</label>
<label for="comment">Comment</label>
</div>
</div>
<div class="content">
<input id="comment" type="text" placeholder="Not included in the URL/File provided" />
@@ -139,10 +139,10 @@
<div class="property">
<div class="labels">
<label for="announce">
<div>
<span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span>
Tracker URLs
</label>
<label for="announce">Tracker URLs</label>
</div>
<a id="addTrackers">Add Known Working Trackers</a>
<a id="removeTrackers">Remove All</a>
</div>
@@ -156,10 +156,10 @@
<div class="property">
<div class="labels">
<label for="urlList">
<div>
<span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span>
Webseed URLs
</label>
<label for="urlList">Webseed URLs</label>
</div>
<a id="removeWebseeds">Remove All</a>
</div>
<div class="content">
@@ -172,10 +172,10 @@
<div class="property">
<div class="labels">
<label for="files">
<div>
<span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
Files
</label>
<label for="files">Files</label>
</div>
<a id="getFiles">Fetch Files List from WebTorrent</a>
</div>
<table id="files">