Improve Accessibility

bundle.js

@@ -2123,9 +2123,7 @@ function fromByteArray (uint8) {
 
   // go through the array every three bytes, we'll deal with trailing stuff later
   for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) {
-    parts.push(encodeChunk(
+    parts.push(encodeChunk(uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)))
-      uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength)
-    ))
   }
 
   // pad the end with zeros, but make sure to not forget the extra bytes
@@ -27514,18 +27512,18 @@ simpleGet.concat = (opts, cb) => {
 
 }).call(this)}).call(this,require("buffer").Buffer)
 },{"buffer":60,"decompress-response":55,"http":264,"https":116,"once":183,"querystring":192,"simple-concat":221,"url":299}],223:[function(require,module,exports){
-(function (Buffer){(function (){
 /*! simple-peer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
-var debug = require('debug')('simple-peer')
+const debug = require('debug')('simple-peer')
-var getBrowserRTC = require('get-browser-rtc')
+const getBrowserRTC = require('get-browser-rtc')
-var randombytes = require('randombytes')
+const randombytes = require('randombytes')
-var stream = require('readable-stream')
+const stream = require('readable-stream')
-var queueMicrotask = require('queue-microtask') // TODO: remove when Node 10 is not supported
+const queueMicrotask = require('queue-microtask') // TODO: remove when Node 10 is not supported
-var errCode = require('err-code')
+const errCode = require('err-code')
+const { Buffer } = require('buffer')
 
-var MAX_BUFFERED_AMOUNT = 64 * 1024
+const MAX_BUFFERED_AMOUNT = 64 * 1024
-var ICECOMPLETE_TIMEOUT = 5 * 1000
+const ICECOMPLETE_TIMEOUT = 5 * 1000
-var CHANNEL_CLOSING_TIMEOUT = 5 * 1000
+const CHANNEL_CLOSING_TIMEOUT = 5 * 1000
 
 // HACK: Filter trickle lines when trickle is disabled #354
 function filterTrickle (sdp) {
@@ -27569,6 +27567,7 @@ class Peer extends stream.Duplex {
     this.iceCompleteTimeout = opts.iceCompleteTimeout || ICECOMPLETE_TIMEOUT
 
     this.destroyed = false
+    this.destroying = false
     this._connected = false
 
     this.remoteAddress = undefined
@@ -27735,7 +27734,7 @@ class Peer extends stream.Duplex {
   }
 
   _addIceCandidate (candidate) {
-    var iceCandidateObj = new this._wrtc.RTCIceCandidate(candidate)
+    const iceCandidateObj = new this._wrtc.RTCIceCandidate(candidate)
     this._pc.addIceCandidate(iceCandidateObj)
       .catch(err => {
         if (!iceCandidateObj.address || iceCandidateObj.address.endsWith('.local')) {
@@ -27771,6 +27770,7 @@ class Peer extends stream.Duplex {
       }
     } else {
       this.emit('signal', { // request initiator to renegotiate
+        type: 'transceiverRequest',
         transceiverRequest: { kind, init }
       })
     }
@@ -27796,8 +27796,8 @@ class Peer extends stream.Duplex {
   addTrack (track, stream) {
     this._debug('addTrack()')
 
-    var submap = this._senderMap.get(track) || new Map() // nested Maps map [track, stream] to sender
+    const submap = this._senderMap.get(track) || new Map() // nested Maps map [track, stream] to sender
-    var sender = submap.get(stream)
+    let sender = submap.get(stream)
     if (!sender) {
       sender = this._pc.addTrack(track, stream)
       submap.set(stream, sender)
@@ -27819,8 +27819,8 @@ class Peer extends stream.Duplex {
   replaceTrack (oldTrack, newTrack, stream) {
     this._debug('replaceTrack()')
 
-    var submap = this._senderMap.get(oldTrack)
+    const submap = this._senderMap.get(oldTrack)
-    var sender = submap ? submap.get(stream) : null
+    const sender = submap ? submap.get(stream) : null
     if (!sender) {
       throw errCode(new Error('Cannot replace track that was never added.'), 'ERR_TRACK_NOT_ADDED')
     }
@@ -27841,8 +27841,8 @@ class Peer extends stream.Duplex {
   removeTrack (track, stream) {
     this._debug('removeSender()')
 
-    var submap = this._senderMap.get(track)
+    const submap = this._senderMap.get(track)
-    var sender = submap ? submap.get(stream) : null
+    const sender = submap ? submap.get(stream) : null
     if (!sender) {
       throw errCode(new Error('Cannot remove track that was never added.'), 'ERR_TRACK_NOT_ADDED')
     }
@@ -27905,6 +27905,7 @@ class Peer extends stream.Duplex {
       } else {
         this._debug('requesting negotiation from initiator')
         this.emit('signal', { // request initiator to renegotiate
+          type: 'renegotiate',
           renegotiate: true
         })
       }
@@ -27920,62 +27921,71 @@ class Peer extends stream.Duplex {
   }
 
   _destroy (err, cb) {
-    if (this.destroyed) return
+    if (this.destroyed || this.destroying) return
+    this.destroying = true
 
-    this._debug('destroy (error: %s)', err && (err.message || err))
+    this._debug('destroying (error: %s)', err && (err.message || err))
 
-    this.readable = this.writable = false
+    queueMicrotask(() => { // allow events concurrent with the call to _destroy() to fire (see #692)
+      this.destroyed = true
+      this.destroying = false
 
-    if (!this._readableState.ended) this.push(null)
+      this._debug('destroy (error: %s)', err && (err.message || err))
-    if (!this._writableState.finished) this.end()
 
-    this.destroyed = true
+      this.readable = this.writable = false
-    this._connected = false
-    this._pcReady = false
-    this._channelReady = false
-    this._remoteTracks = null
-    this._remoteStreams = null
-    this._senderMap = null
 
-    clearInterval(this._closingInterval)
+      if (!this._readableState.ended) this.push(null)
-    this._closingInterval = null
+      if (!this._writableState.finished) this.end()
 
-    clearInterval(this._interval)
+      this._connected = false
-    this._interval = null
+      this._pcReady = false
-    this._chunk = null
+      this._channelReady = false
-    this._cb = null
+      this._remoteTracks = null
+      this._remoteStreams = null
+      this._senderMap = null
 
-    if (this._onFinishBound) this.removeListener('finish', this._onFinishBound)
+      clearInterval(this._closingInterval)
-    this._onFinishBound = null
+      this._closingInterval = null
 
-    if (this._channel) {
+      clearInterval(this._interval)
-      try {
+      this._interval = null
-        this._channel.close()
+      this._chunk = null
-      } catch (err) {}
+      this._cb = null
 
-      this._channel.onmessage = null
+      if (this._onFinishBound) this.removeListener('finish', this._onFinishBound)
-      this._channel.onopen = null
+      this._onFinishBound = null
-      this._channel.onclose = null
-      this._channel.onerror = null
-    }
-    if (this._pc) {
-      try {
-        this._pc.close()
-      } catch (err) {}
 
-      this._pc.oniceconnectionstatechange = null
+      if (this._channel) {
-      this._pc.onicegatheringstatechange = null
+        try {
-      this._pc.onsignalingstatechange = null
+          this._channel.close()
-      this._pc.onicecandidate = null
+        } catch (err) {}
-      this._pc.ontrack = null
-      this._pc.ondatachannel = null
-    }
-    this._pc = null
-    this._channel = null
 
-    if (err) this.emit('error', err)
+        // allow events concurrent with destruction to be handled
-    this.emit('close')
+        this._channel.onmessage = null
-    cb()
+        this._channel.onopen = null
+        this._channel.onclose = null
+        this._channel.onerror = null
+      }
+      if (this._pc) {
+        try {
+          this._pc.close()
+        } catch (err) {}
+
+        // allow events concurrent with destruction to be handled
+        this._pc.oniceconnectionstatechange = null
+        this._pc.onicegatheringstatechange = null
+        this._pc.onsignalingstatechange = null
+        this._pc.onicecandidate = null
+        this._pc.ontrack = null
+        this._pc.ondatachannel = null
+      }
+      this._pc = null
+      this._channel = null
+
+      if (err) this.emit('error', err)
+      this.emit('close')
+      cb()
+    })
   }
 
   _setupData (event) {
@@ -28013,7 +28023,7 @@ class Peer extends stream.Duplex {
 
     // HACK: Chrome will sometimes get stuck in readyState "closing", let's check for this condition
     // https://bugs.chromium.org/p/chromium/issues/detail?id=882743
-    var isClosing = false
+    let isClosing = false
     this._closingInterval = setInterval(() => { // No "onclosing" event
       if (this._channel && this._channel.readyState === 'closing') {
         if (isClosing) this._onChannelClose() // closing timed out: equivalent to onclose firing
@@ -28091,7 +28101,7 @@ class Peer extends stream.Duplex {
 
         const sendOffer = () => {
           if (this.destroyed) return
-          var signal = this._pc.localDescription || offer
+          const signal = this._pc.localDescription || offer
           this._debug('signal')
           this.emit('signal', {
             type: signal.type,
@@ -28141,7 +28151,7 @@ class Peer extends stream.Duplex {
 
         const sendAnswer = () => {
           if (this.destroyed) return
-          var signal = this._pc.localDescription || answer
+          const signal = this._pc.localDescription || answer
           this._debug('signal')
           this.emit('signal', {
             type: signal.type,
@@ -28178,8 +28188,8 @@ class Peer extends stream.Duplex {
 
   _onIceStateChange () {
     if (this.destroyed) return
-    var iceConnectionState = this._pc.iceConnectionState
+    const iceConnectionState = this._pc.iceConnectionState
-    var iceGatheringState = this._pc.iceGatheringState
+    const iceGatheringState = this._pc.iceGatheringState
 
     this._debug(
       'iceStateChange (connection: %s) (gathering: %s)',
@@ -28215,7 +28225,7 @@ class Peer extends stream.Duplex {
     if (this._pc.getStats.length === 0 || this._isReactNativeWebrtc) {
       this._pc.getStats()
         .then(res => {
-          var reports = []
+          const reports = []
           res.forEach(report => {
             reports.push(flattenValues(report))
           })
@@ -28228,9 +28238,9 @@ class Peer extends stream.Duplex {
         // If we destroy connection in `connect` callback this code might happen to run when actual connection is already closed
         if (this.destroyed) return
 
-        var reports = []
+        const reports = []
         res.result().forEach(result => {
-          var report = {}
+          const report = {}
           result.names().forEach(name => {
             report[name] = result.stat(name)
           })
@@ -28265,10 +28275,10 @@ class Peer extends stream.Duplex {
         // Treat getStats error as non-fatal. It's not essential.
         if (err) items = []
 
-        var remoteCandidates = {}
+        const remoteCandidates = {}
-        var localCandidates = {}
+        const localCandidates = {}
-        var candidatePairs = {}
+        const candidatePairs = {}
-        var foundSelectedCandidatePair = false
+        let foundSelectedCandidatePair = false
 
         items.forEach(item => {
           // TODO: Once all browsers support the hyphenated stats report types, remove
@@ -28287,7 +28297,7 @@ class Peer extends stream.Duplex {
         const setSelectedCandidatePair = selectedCandidatePair => {
           foundSelectedCandidatePair = true
 
-          var local = localCandidates[selectedCandidatePair.localCandidateId]
+          let local = localCandidates[selectedCandidatePair.localCandidateId]
 
           if (local && (local.ip || local.address)) {
             // Spec
@@ -28307,7 +28317,7 @@ class Peer extends stream.Duplex {
             this.localFamily = this.localAddress.includes(':') ? 'IPv6' : 'IPv4'
           }
 
-          var remote = remoteCandidates[selectedCandidatePair.remoteCandidateId]
+          let remote = remoteCandidates[selectedCandidatePair.remoteCandidateId]
 
           if (remote && (remote.ip || remote.address)) {
             // Spec
@@ -28329,7 +28339,10 @@ class Peer extends stream.Duplex {
 
           this._debug(
             'connect local: %s:%s remote: %s:%s',
-            this.localAddress, this.localPort, this.remoteAddress, this.remotePort
+            this.localAddress,
+            this.localPort,
+            this.remoteAddress,
+            this.remotePort
           )
         }
 
@@ -28367,7 +28380,7 @@ class Peer extends stream.Duplex {
           this._chunk = null
           this._debug('sent chunk from "write before connect"')
 
-          var cb = this._cb
+          const cb = this._cb
           this._cb = null
           cb(null)
         }
@@ -28412,8 +28425,8 @@ class Peer extends stream.Duplex {
         this._queuedNegotiation = false
         this._needsNegotiation() // negotiate again
       } else {
-        this._debug('negotiate')
+        this._debug('negotiated')
-        this.emit('negotiate')
+        this.emit('negotiated')
       }
     }
 
@@ -28425,6 +28438,7 @@ class Peer extends stream.Duplex {
     if (this.destroyed) return
     if (event.candidate && this.trickle) {
       this.emit('signal', {
+        type: 'candidate',
         candidate: {
           candidate: event.candidate.candidate,
           sdpMLineIndex: event.candidate.sdpMLineIndex,
@@ -28443,7 +28457,7 @@ class Peer extends stream.Duplex {
 
   _onChannelMessage (event) {
     if (this.destroyed) return
-    var data = event.data
+    let data = event.data
     if (data instanceof ArrayBuffer) data = Buffer.from(data)
     this.push(data)
   }
@@ -28451,7 +28465,7 @@ class Peer extends stream.Duplex {
   _onChannelBufferedAmountLow () {
     if (this.destroyed || !this._cb) return
     this._debug('ending backpressure: bufferedAmount %d', this._channel.bufferedAmount)
-    var cb = this._cb
+    const cb = this._cb
     this._cb = null
     cb(null)
   }
@@ -28487,13 +28501,14 @@ class Peer extends stream.Duplex {
 
       this._remoteStreams.push(eventStream)
       queueMicrotask(() => {
+        this._debug('on stream')
         this.emit('stream', eventStream) // ensure all tracks have been added
       })
     })
   }
 
   _debug () {
-    var args = [].slice.call(arguments)
+    const args = [].slice.call(arguments)
     args[0] = '[' + this._id + '] ' + args[0]
     debug.apply(null, args)
   }
@@ -28522,7 +28537,6 @@ Peer.channelConfig = {}
 
 module.exports = Peer
 
-}).call(this)}).call(this,require("buffer").Buffer)
 },{"buffer":60,"debug":224,"err-code":97,"get-browser-rtc":115,"queue-microtask":193,"randombytes":195,"readable-stream":241}],224:[function(require,module,exports){
 arguments[4][13][0].apply(exports,arguments)
 },{"./common":225,"_process":187,"dup":13}],225:[function(require,module,exports){
@@ -37970,7 +37984,8 @@ function start() {
   getFiles.addEventListener('click', getFilesFromPeers);
 
   tippy('[data-tippy-content]', {"theme": "torrent-parts", "animation": "shift-away-subtle"}); // all element-defined tooltips
-
+  source.disable();
+  
   if (window.location.hash) {
     originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>';
     source.setContent("Currently loaded information sourced from shared torrent.parts link");

index.html

@@ -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>
+    <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-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>
+    <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 for="hash">Unique Hash</label>
-        </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 for="name">Torrent Name</label>
-        </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 for="created">Created</label>
-        </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 for="comment">Comment</label>
-        </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 for="announce">Tracker URLs</label>
-        </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 for="urlList">Webseed URLs</label>
-        </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 for="files">Files</label>
-        </label>
+        </div>
         <a id="getFiles">Fetch Files List from WebTorrent</a>
       </div>
       <table id="files">

parse.js

@@ -108,6 +108,7 @@ function start() {
   getFiles.addEventListener('click', getFilesFromPeers);
 
   tippy('[data-tippy-content]', {"theme": "torrent-parts", "animation": "shift-away-subtle"}); // all element-defined tooltips
+  source.disable();
 
   if (window.location.hash) {
     originalSourceIcon.innerHTML = '<span class="fad fa-link fa-fw"></span>';

style.css

@@ -1,6 +1,17 @@
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
 
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
 :root {
   --gradient: linear-gradient(180deg, #152332, #24384D);
   --dark-blue: #102030;