mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 02:08:21 +00:00
Add labels to improve accessibility (#416)
* Add labels to improve accessibility * switch to double quotes
This commit is contained in:
ChunkyProgrammer
GitHub
parent
10d2df6d0d
commit
0fd0bb8c83
@ -18,8 +18,8 @@
|
||||
</span>
|
||||
|
||||
<span class="uk-align-right">
|
||||
{{ $t("actions.sort_by") }}
|
||||
<select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
|
||||
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
|
||||
<select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
|
||||
<option value="descending" v-t="'actions.most_recent'" />
|
||||
<option value="ascending" v-t="'actions.least_recent'" />
|
||||
<option value="channel_ascending" v-t="'actions.channel_name_asc'" />
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
|
||||
|
||||
<div style="text-align: right">
|
||||
{{ $t("actions.sort_by") }}:
|
||||
<select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
|
||||
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
|
||||
<select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
|
||||
<option value="descending" v-t="'actions.most_recent'" />
|
||||
<option value="ascending" v-t="'actions.least_recent'" />
|
||||
<option value="channel_ascending" v-t="'actions.channel_name_asc'" />
|
||||
|
||||
@ -9,111 +9,111 @@
|
||||
<hr />
|
||||
<h2>SponsorBlock</h2>
|
||||
<p>{{ $t("actions.uses_api_from") }}<a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
|
||||
<b v-t="'actions.enable_sponsorblock'" />
|
||||
<label for="chkEnableSponsorblock"><b v-t="'actions.enable_sponsorblock'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkEnableSponsorblock" class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_sponsors'" />
|
||||
<label for="chkSkipSponsors"><b v-t="'actions.skip_sponsors'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipSponsors" class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_intro'" />
|
||||
<label for="chkSkipIntro"><b v-t="'actions.skip_intro'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipIntro" class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_outro'" />
|
||||
<label for="chkSkipOutro"><b v-t="'actions.skip_outro'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipOutro" class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_preview'" />
|
||||
<label for="chkSkipPreview"><b v-t="'actions.skip_preview'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipPreview" class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_interaction'" />
|
||||
<label for="chkSkipInteraction"><b v-t="'actions.skip_interaction'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipInteraction" class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_self_promo'" />
|
||||
<label for="chkSkipSelfPromo"><b v-t="'actions.skip_self_promo'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipSelfPromo" class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.skip_non_music'" />
|
||||
<label for="chkSkipNonMusic"><b v-t="'actions.skip_non_music'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkSkipNonMusic" class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.theme'" />
|
||||
<label for="ddlTheme"><b v-t="'actions.theme'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
|
||||
<select id="ddlTheme" class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
|
||||
<option value="auto" v-t="'actions.auto'" />
|
||||
<option value="dark" v-t="'actions.dark'" />
|
||||
<option value="light" v-t="'actions.light'" />
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.autoplay_video'" />
|
||||
<label for="chkAutoPlayVideo"><b v-t="'actions.autoplay_video'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkAutoPlayVideo" class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.audio_only'" />
|
||||
<label for="chkAudioOnly"><b v-t="'actions.audio_only'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkAudioOnly" class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.default_quality'" />
|
||||
<label for="ddlDefaultQuality"><b v-t="'actions.default_quality'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
|
||||
<select id="ddlDefaultQuality" class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
|
||||
<option value="0" v-t="'actions.auto'" />
|
||||
<option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.buffering_goal'" />
|
||||
<label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'" /></label>
|
||||
<br />
|
||||
<input class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
|
||||
<input id="txtBufferingGoal" class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
|
||||
<br />
|
||||
<b v-t="'actions.country_selection'" />
|
||||
<label for="ddlCountrySelection"><b v-t="'actions.country_selection'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
|
||||
<select id="ddlCountrySelection" class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
|
||||
<option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.default_homepage'" />
|
||||
<label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
|
||||
<select id="ddlDefaultHomepage" class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
|
||||
<option value="trending" v-t="'titles.trending'" />
|
||||
<option value="feed" v-t="'titles.feed'" />
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.show_comments'" />
|
||||
<label for="chkShowComments"><b v-t="'actions.show_comments'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkShowComments" class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.minimize_description_default'" />
|
||||
<label for="chkMinimizeDescription"><b v-t="'actions.minimize_description_default'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="minimizeDescription" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkMinimizeDescription" class="uk-checkbox" v-model="minimizeDescription" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.store_watch_history'" />
|
||||
<label for="chkStoreWatchHistory"><b v-t="'actions.store_watch_history'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="watchHistory" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkStoreWatchHistory" class="uk-checkbox" v-model="watchHistory" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.language_selection'" />
|
||||
<label for="ddlLanguageSelection"><b v-t="'actions.language_selection'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="selectedLanguage" @change="onChange($event)">
|
||||
<select id="ddlLanguageSelection" class="uk-select uk-width-auto" v-model="selectedLanguage" @change="onChange($event)">
|
||||
<option :key="language.code" v-for="language in languages" :value="language.code">{{ language.name }}</option>
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.enabled_codecs'" />
|
||||
<label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'" /></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="enabledCodecs" @change="onChange($event)" multiple>
|
||||
<select id="ddlEnabledCodecs" class="uk-select uk-width-auto" v-model="enabledCodecs" @change="onChange($event)" multiple>
|
||||
<option value="av1">AV1</option>
|
||||
<option value="vp9">VP9</option>
|
||||
<option value="avc">AVC (h.264)</option>
|
||||
</select>
|
||||
<br />
|
||||
<b v-t="'actions.disable_lbry'" />
|
||||
<label for="chkDisableLBRY"><b v-t="'actions.disable_lbry'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="disableLBRY" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkDisableLBRY" class="uk-checkbox" v-model="disableLBRY" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b v-t="'actions.enable_lbry_proxy'" />
|
||||
<label for="chkEnableLBRYProxy"><b v-t="'actions.enable_lbry_proxy'" /></label>
|
||||
<br />
|
||||
<input class="uk-checkbox" v-model="proxyLBRY" @change="onChange($event)" type="checkbox" />
|
||||
<input id="chkEnableLBRYProxy" class="uk-checkbox" v-model="proxyLBRY" @change="onChange($event)" type="checkbox" />
|
||||
<h2 v-t="'actions.instances_list'" />
|
||||
<table class="uk-table">
|
||||
<thead>
|
||||
@ -138,9 +138,9 @@
|
||||
|
||||
<hr />
|
||||
|
||||
<b>{{ $t("actions.instance_selection") }}:</b>
|
||||
<label for="ddlInstanceSelection"><b>{{ $t("actions.instance_selection") }}:</b></label>
|
||||
<br />
|
||||
<select class="uk-select uk-width-auto" v-model="selectedInstance" @change="onChange($event)">
|
||||
<select id="ddlInstanceSelection" class="uk-select uk-width-auto" v-model="selectedInstance" @change="onChange($event)">
|
||||
<option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
|
||||
{{ instance.name }}
|
||||
</option>
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
{{ $route.query.search_query }}
|
||||
</h1>
|
||||
|
||||
<b>Filter: </b>
|
||||
<label for="ddlSearchFilters"><b>Filter: </b></label>
|
||||
<select
|
||||
id="ddlSearchFilters"
|
||||
default="all"
|
||||
class="uk-select uk-width-auto"
|
||||
style="height: 100%"
|
||||
|
||||
@ -85,11 +85,11 @@
|
||||
|
||||
<hr />
|
||||
|
||||
<b>{{ $t("actions.loop_this_video") }}:</b>
|
||||
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
|
||||
<label for="chkAutoLoop"><b>{{ $t("actions.loop_this_video") }}:</b></label>
|
||||
<input id="chkAutoLoop" class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
|
||||
<br />
|
||||
<b>{{ $t("actions.auto_play_next_video") }}:</b>
|
||||
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
|
||||
<label for="chkAutoPlay"><b>{{ $t("actions.auto_play_next_video") }}:</b></label>
|
||||
<input id="chkAutoPlay" class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
|
||||
|
||||
<hr />
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user