TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add labels to improve accessibility (#416)

Browse source 
* Add labels to improve accessibility

* switch to double quotes
This commit is contained in:
ChunkyProgrammer 2021-09-05 17:31:46 -04:00 • committed by GitHub
parent 10d2df6d0d
commit 0fd0bb8c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 56 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/FeedPage.vue
View file

@ -18,8 +18,8 @@
</span> </span>
<span class="uk-align-right"> <span class="uk-align-right">
{{ $t("actions.sort_by") }} <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
<select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()"> <select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
<option value="descending" v-t="'actions.most_recent'" /> <option value="descending" v-t="'actions.most_recent'" />
<option value="ascending" v-t="'actions.least_recent'" /> <option value="ascending" v-t="'actions.least_recent'" />
<option value="channel_ascending" v-t="'actions.channel_name_asc'" /> <option value="channel_ascending" v-t="'actions.channel_name_asc'" />

4
src/components/HistoryPage.vue
View file

@ -3,8 +3,8 @@
<div style="text-align: right"> <div style="text-align: right">
{{ $t("actions.sort_by") }}: <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
<select class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()"> <select id="ddlSortBy" class="uk-select uk-width-auto" v-model="selectedSort" @change="onChange()">
<option value="descending" v-t="'actions.most_recent'" /> <option value="descending" v-t="'actions.most_recent'" />
<option value="ascending" v-t="'actions.least_recent'" /> <option value="ascending" v-t="'actions.least_recent'" />
<option value="channel_ascending" v-t="'actions.channel_name_asc'" /> <option value="channel_ascending" v-t="'actions.channel_name_asc'" />

92
src/components/Preferences.vue
View file

@ -9,111 +9,111 @@
<hr /> <hr />
<h2>SponsorBlock</h2> <h2>SponsorBlock</h2>
<p>{{ $t("actions.uses_api_from") }}<a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p> <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 /> <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 /> <br />
<b v-t="'actions.skip_sponsors'" /> <label for="chkSkipSponsors"><b v-t="'actions.skip_sponsors'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_intro'" /> <label for="chkSkipIntro"><b v-t="'actions.skip_intro'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_outro'" /> <label for="chkSkipOutro"><b v-t="'actions.skip_outro'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_preview'" /> <label for="chkSkipPreview"><b v-t="'actions.skip_preview'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_interaction'" /> <label for="chkSkipInteraction"><b v-t="'actions.skip_interaction'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_self_promo'" /> <label for="chkSkipSelfPromo"><b v-t="'actions.skip_self_promo'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.skip_non_music'" /> <label for="chkSkipNonMusic"><b v-t="'actions.skip_non_music'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.theme'" /> <label for="ddlTheme"><b v-t="'actions.theme'" /></label>
<br /> <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="auto" v-t="'actions.auto'" />
<option value="dark" v-t="'actions.dark'" /> <option value="dark" v-t="'actions.dark'" />
<option value="light" v-t="'actions.light'" /> <option value="light" v-t="'actions.light'" />
</select> </select>
<br /> <br />
<b v-t="'actions.autoplay_video'" /> <label for="chkAutoPlayVideo"><b v-t="'actions.autoplay_video'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.audio_only'" /> <label for="chkAudioOnly"><b v-t="'actions.audio_only'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.default_quality'" /> <label for="ddlDefaultQuality"><b v-t="'actions.default_quality'" /></label>
<br /> <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 value="0" v-t="'actions.auto'" />
<option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option> <option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
</select> </select>
<br /> <br />
<b v-t="'actions.buffering_goal'" /> <label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.country_selection'" /> <label for="ddlCountrySelection"><b v-t="'actions.country_selection'" /></label>
<br /> <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> <option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
</select> </select>
<br /> <br />
<b v-t="'actions.default_homepage'" /> <label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'" /></label>
<br /> <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="trending" v-t="'titles.trending'" />
<option value="feed" v-t="'titles.feed'" /> <option value="feed" v-t="'titles.feed'" />
</select> </select>
<br /> <br />
<b v-t="'actions.show_comments'" /> <label for="chkShowComments"><b v-t="'actions.show_comments'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.minimize_description_default'" /> <label for="chkMinimizeDescription"><b v-t="'actions.minimize_description_default'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.store_watch_history'" /> <label for="chkStoreWatchHistory"><b v-t="'actions.store_watch_history'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.language_selection'" /> <label for="ddlLanguageSelection"><b v-t="'actions.language_selection'" /></label>
<br /> <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> <option :key="language.code" v-for="language in languages" :value="language.code">{{ language.name }}</option>
</select> </select>
<br /> <br />
<b v-t="'actions.enabled_codecs'" /> <label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'" /></label>
<br /> <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="av1">AV1</option>
<option value="vp9">VP9</option> <option value="vp9">VP9</option>
<option value="avc">AVC (h.264)</option> <option value="avc">AVC (h.264)</option>
</select> </select>
<br /> <br />
<b v-t="'actions.disable_lbry'" /> <label for="chkDisableLBRY"><b v-t="'actions.disable_lbry'" /></label>
<br /> <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 /> <br />
<b v-t="'actions.enable_lbry_proxy'" /> <label for="chkEnableLBRYProxy"><b v-t="'actions.enable_lbry_proxy'" /></label>
<br /> <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'" /> <h2 v-t="'actions.instances_list'" />
<table class="uk-table"> <table class="uk-table">
<thead> <thead>
@ -138,9 +138,9 @@
<hr /> <hr />
<b>{{ $t("actions.instance_selection") }}:</b> <label for="ddlInstanceSelection"><b>{{ $t("actions.instance_selection") }}:</b></label>
<br /> <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"> <option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
{{ instance.name }} {{ instance.name }}
</option> </option>

3
src/components/SearchResults.vue
View file

@ -3,8 +3,9 @@
{{ $route.query.search_query }} {{ $route.query.search_query }}
</h1> </h1>
<b>Filter: </b> <label for="ddlSearchFilters"><b>Filter: </b></label>
<select <select
id="ddlSearchFilters"
default="all" default="all"
class="uk-select uk-width-auto" class="uk-select uk-width-auto"
style="height: 100%" style="height: 100%"

8
src/components/WatchVideo.vue
View file

@ -85,11 +85,11 @@
<hr /> <hr />
<b>{{ $t("actions.loop_this_video") }}:</b>&nbsp; <label for="chkAutoLoop"><b>{{ $t("actions.loop_this_video") }}:</b></label>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" /> <input id="chkAutoLoop" class="uk-checkbox" v-model="selectedAutoLoop" @change="onChange($event)" type="checkbox" />
<br /> <br />
<b>{{ $t("actions.auto_play_next_video") }}:</b>&nbsp; <label for="chkAutoPlay"><b>{{ $t("actions.auto_play_next_video") }}:</b></label>&nbsp;
<input class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" /> <input id="chkAutoPlay" class="uk-checkbox" v-model="selectedAutoPlay" @change="onChange($event)" type="checkbox" />
<hr /> <hr />