WebUI: provide semantic information of table body

From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#usage_notes :
>Specifying such table content groups also provides valuable contextual
>information for assistive technologies
This commit is contained in:
Chocobo1
2024-07-15 16:39:53 +08:00
parent 9feefc8144
commit 7119de9b8d
9 changed files with 1624 additions and 1537 deletions

View File

@@ -19,129 +19,131 @@
</div>
<fieldset class="settings" style="border: 0; text-align: left; margin-top: 12px;">
<table style="margin: auto;">
<tr>
<td>
<label for="autoTMM">QBT_TR(Torrent Management Mode:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="autoTMM" name="autoTMM" onchange="qBittorrent.Download.changeTMM(this)">
<option selected value="false">QBT_TR(Manual)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="true">QBT_TR(Automatic)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="savepath" name="savepath" class="pathDirectory" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="rename" name="rename" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="category">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<div class="select-watched-folder-editable">
<select id="categorySelect" onchange="qBittorrent.Download.changeCategorySelect(this)">
<option selected value="\other"></option>
<tbody>
<tr>
<td>
<label for="autoTMM">QBT_TR(Torrent Management Mode:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="autoTMM" name="autoTMM" onchange="qBittorrent.Download.changeTMM(this)">
<option selected value="false">QBT_TR(Manual)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="true">QBT_TR(Automatic)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
<input name="category" type="text" />
</div>
</td>
</tr>
<tr>
<td>
<label for="startTorrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="hidden" id="startTorrentHidden" name="stopped" />
<input type="checkbox" id="startTorrent" />
</td>
</tr>
<tr>
<td>
<label for="addToTopOfQueue">QBT_TR(Add to top of queue)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="addToTopOfQueue" name="addToTopOfQueue" value="true" />
</td>
</tr>
<tr>
<td>
<label for="stopCondition">QBT_TR(Stop condition:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="stopCondition" name="stopCondition">
<option selected value="None">QBT_TR(None)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="MetadataReceived">QBT_TR(Metadata received)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="FilesChecked">QBT_TR(Files checked)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="skip_checking">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
</td>
</tr>
<tr>
<td>
<label for="contentLayout">QBT_TR(Content layout:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="contentLayout" name="contentLayout">
<option selected value="Original">QBT_TR(Original)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="Subfolder">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="NoSubfolder">QBT_TR(Don't create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="sequentialDownload">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
</td>
</tr>
<tr>
<td>
<label for="firstLastPiecePrio">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
</td>
</tr>
<tr>
<td>
<label for="dlLimitText">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="hidden" id="dlLimitHidden" name="dlLimit" />
<input type="text" id="dlLimitText" style="width: 16em;" placeholder="KiB/s" />
</td>
</tr>
<tr>
<td>
<label for="upLimitText">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="hidden" id="upLimitHidden" name="upLimit" />
<input type="text" id="upLimitText" style="width: 16em;" placeholder="KiB/s" />
</td>
</tr>
</td>
</tr>
<tr>
<td>
<label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="savepath" name="savepath" class="pathDirectory" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="text" id="rename" name="rename" style="width: 16em;" />
</td>
</tr>
<tr>
<td>
<label for="category">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<div class="select-watched-folder-editable">
<select id="categorySelect" onchange="qBittorrent.Download.changeCategorySelect(this)">
<option selected value="\other"></option>
</select>
<input name="category" type="text" />
</div>
</td>
</tr>
<tr>
<td>
<label for="startTorrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="hidden" id="startTorrentHidden" name="stopped" />
<input type="checkbox" id="startTorrent" />
</td>
</tr>
<tr>
<td>
<label for="addToTopOfQueue">QBT_TR(Add to top of queue)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="addToTopOfQueue" name="addToTopOfQueue" value="true" />
</td>
</tr>
<tr>
<td>
<label for="stopCondition">QBT_TR(Stop condition:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="stopCondition" name="stopCondition">
<option selected value="None">QBT_TR(None)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="MetadataReceived">QBT_TR(Metadata received)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="FilesChecked">QBT_TR(Files checked)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="skip_checking">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
</td>
</tr>
<tr>
<td>
<label for="contentLayout">QBT_TR(Content layout:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
</td>
<td>
<select id="contentLayout" name="contentLayout">
<option selected value="Original">QBT_TR(Original)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="Subfolder">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
<option value="NoSubfolder">QBT_TR(Don't create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="sequentialDownload">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
</td>
</tr>
<tr>
<td>
<label for="firstLastPiecePrio">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
</td>
<td>
<input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
</td>
</tr>
<tr>
<td>
<label for="dlLimitText">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="hidden" id="dlLimitHidden" name="dlLimit" />
<input type="text" id="dlLimitText" style="width: 16em;" placeholder="KiB/s" />
</td>
</tr>
<tr>
<td>
<label for="upLimitText">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
</td>
<td>
<input type="hidden" id="upLimitHidden" name="upLimit" />
<input type="text" id="upLimitText" style="width: 16em;" placeholder="KiB/s" />
</td>
</tr>
</tbody>
</table>
<div id="submitbutton" style="margin-top: 30px; text-align: center;">
<button type="submit" style="font-size: 1em;">QBT_TR(Upload Torrents)QBT_TR[CONTEXT=HttpServer]</button>