mirror of https://github.com/FreeTubeApp/FreeTube
small accessibility improvements (#3033)
* small accessibility improvements * switch to routerlink for side-nav-more-options
This commit is contained in:
parent
03f73c5d33
commit
afb9e51cdd
|
@ -13,22 +13,21 @@
|
|||
{
|
||||
"files": ["**/*.css"],
|
||||
"rules": {
|
||||
"a11y/media-prefers-reduced-motion": true,
|
||||
"a11y/no-outline-none": true,
|
||||
"a11y/selector-pseudo-class-focus": true,
|
||||
"a11y/font-size-is-readable": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"selector-class-pattern": null,
|
||||
"selector-id-pattern": null,
|
||||
"plugin/no-low-performance-animation-properties": true,
|
||||
"plugin/no-low-performance-animation-properties": null,
|
||||
"selector-pseudo-class-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignorePseudoClasses": ["deep"]
|
||||
}
|
||||
]
|
||||
],
|
||||
"a11y/no-outline-none": true,
|
||||
"a11y/selector-pseudo-class-focus": true,
|
||||
"a11y/font-size-is-readable": true
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"stylelint.vscode-stylelint",
|
||||
"syler.sass-indented",
|
||||
"redhat.vscode-yaml",
|
||||
"vue.volar",
|
||||
"eamodio.gitlens"
|
||||
]
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"stylelint.packageManager": "yarn",
|
||||
"stylelint.snippet": [
|
||||
"css",
|
||||
"less",
|
||||
"postcss",
|
||||
"sass",
|
||||
"scss"
|
||||
],
|
||||
"stylelint.validate": [
|
||||
"css",
|
||||
"less",
|
||||
"postcss",
|
||||
"scss"
|
||||
]
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"vueCompilerOptions": {
|
||||
"target": 2.7
|
||||
}
|
||||
}
|
|
@ -2,28 +2,26 @@
|
|||
<ft-settings-section
|
||||
:title="$t('Settings.External Player Settings.External Player Settings')"
|
||||
>
|
||||
<div class="switchColumnGrid">
|
||||
<div class="switchColumn">
|
||||
<ft-select
|
||||
:placeholder="$t('Settings.External Player Settings.External Player')"
|
||||
:value="externalPlayer"
|
||||
:select-names="externalPlayerNames"
|
||||
:select-values="externalPlayerValues"
|
||||
:tooltip="$t('Tooltips.External Player Settings.External Player')"
|
||||
@change="updateExternalPlayer"
|
||||
/>
|
||||
</div>
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.External Player Settings.Ignore Unsupported Action Warnings')"
|
||||
:default-value="externalPlayerIgnoreWarnings"
|
||||
:disabled="externalPlayer===''"
|
||||
:compact="true"
|
||||
:tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
|
||||
@change="updateExternalPlayerIgnoreWarnings"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ft-flex-box>
|
||||
<ft-select
|
||||
:placeholder="$t('Settings.External Player Settings.External Player')"
|
||||
:value="externalPlayer"
|
||||
:select-names="externalPlayerNames"
|
||||
:select-values="externalPlayerValues"
|
||||
:tooltip="$t('Tooltips.External Player Settings.External Player')"
|
||||
@change="updateExternalPlayer"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-flex-box>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.External Player Settings.Ignore Unsupported Action Warnings')"
|
||||
:default-value="externalPlayerIgnoreWarnings"
|
||||
:disabled="externalPlayer===''"
|
||||
:compact="true"
|
||||
:tooltip="$t('Tooltips.External Player Settings.Ignore Warnings')"
|
||||
@change="updateExternalPlayerIgnoreWarnings"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<ft-flex-box
|
||||
v-if="externalPlayer !== ''"
|
||||
class="settingsFlexStart460px"
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
<img
|
||||
class="bubble"
|
||||
:src="channelThumbnail"
|
||||
alt=""
|
||||
>
|
||||
<div
|
||||
v-if="selected"
|
||||
|
|
|
@ -21,7 +21,8 @@
|
|||
background-color: var(--card-bg-color);
|
||||
color: var(--primary-text-color);
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
}
|
||||
|
||||
|
@ -31,7 +32,8 @@
|
|||
}
|
||||
|
||||
&.base-no-default {
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
}
|
||||
|
||||
|
@ -44,7 +46,8 @@
|
|||
background-color: var(--primary-color);
|
||||
color: var(--text-with-main-color);
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
|
@ -57,7 +60,8 @@
|
|||
background-color: var(--accent-color);
|
||||
color: var(--text-with-accent-color);
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
|
|
|
@ -31,6 +31,14 @@ export default Vue.extend({
|
|||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sanitizedId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
describeById: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
@ -1,11 +1,12 @@
|
|||
<template>
|
||||
<div class="select">
|
||||
<select
|
||||
:id="sanitizedPlaceholder"
|
||||
:id="sanitizedId ?? sanitizedPlaceholder"
|
||||
:describe-by-id="describeById"
|
||||
class="select-text"
|
||||
:class="{disabled: disabled}"
|
||||
:value="value"
|
||||
:name="sanitizedPlaceholder"
|
||||
:name="sanitizedId ?? sanitizedPlaceholder"
|
||||
:disabled="disabled"
|
||||
@change="$emit('change', $event.target.value)"
|
||||
>
|
||||
|
@ -25,7 +26,7 @@
|
|||
<span class="select-bar" />
|
||||
<label
|
||||
class="select-label"
|
||||
:for="sanitizedPlaceholder"
|
||||
:for="sanitizedId ?? sanitizedPlaceholder"
|
||||
:hidden="disabled"
|
||||
>
|
||||
{{ placeholder }}
|
||||
|
|
|
@ -69,12 +69,12 @@
|
|||
.dracula &,
|
||||
.CatppuccinMocha &,
|
||||
.system[data-system-theme*='dark'] & {
|
||||
background-image: url(../../assets/img/invidious-logo-dark.svg);
|
||||
background-image: url('../../assets/img/invidious-logo-dark.svg');
|
||||
}
|
||||
|
||||
.light &,
|
||||
.system[data-system-theme*='light'] & {
|
||||
background-image: url(../../assets/img/invidious-logo-light.svg);
|
||||
background-image: url('../../assets/img/invidious-logo-light.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||
import { mapActions } from 'vuex'
|
||||
import { colors } from '../../helpers/colors'
|
||||
import FtSelect from '../ft-select/ft-select.vue'
|
||||
|
||||
import { sanitizeForHtmlId } from '../../helpers/accessibility'
|
||||
export default Vue.extend({
|
||||
name: 'FtSponsorBlockCategory',
|
||||
components: {
|
||||
|
@ -70,6 +70,10 @@ export default Vue.extend({
|
|||
return sponsorVal
|
||||
},
|
||||
|
||||
sanitizedId: function() {
|
||||
return sanitizeForHtmlId(this.categoryName)
|
||||
},
|
||||
|
||||
skipNames: function() {
|
||||
return [
|
||||
this.$t('Settings.SponsorBlock Settings.Skip Options.Auto Skip'),
|
||||
|
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div class="sponsorBlockCategory">
|
||||
<div class="sponsorTitle">
|
||||
{{ $t("Video.Sponsor Block category."+categoryName) }}
|
||||
<div
|
||||
:id="sanitizedId"
|
||||
class="sponsorTitle"
|
||||
>
|
||||
{{ $t("Video.Sponsor Block category." + categoryName) }}
|
||||
</div>
|
||||
<ft-select
|
||||
:sanitized-id="sanitizedId + 'categoryColor'"
|
||||
:describe-by-id="sanitizedId"
|
||||
:placeholder="$t('Settings.SponsorBlock Settings.Category Color')"
|
||||
:value="sponsorBlockValues.color"
|
||||
:select-names="colorNames"
|
||||
|
@ -11,6 +16,8 @@
|
|||
@change="updateColor"
|
||||
/>
|
||||
<ft-select
|
||||
:sanitized-id="sanitizedId + 'skipOption'"
|
||||
:describe-by-id="sanitizedId"
|
||||
:placeholder="$t('Settings.SponsorBlock Settings.Skip Options.Skip Option')"
|
||||
:value="sponsorBlockValues.skip"
|
||||
:select-names="skipNames"
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
|
||||
<!-- eslint-disable vuejs-accessibility/media-has-caption -->
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative"
|
||||
|
|
|
@ -28,11 +28,5 @@ export default Vue.extend({
|
|||
navIconExpand: this.hideLabelsSideBar
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigate: function (route) {
|
||||
this.openMoreOptions = false
|
||||
this.$router.push('/' + route)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -2,8 +2,13 @@
|
|||
<div class="sideNavMoreOptions">
|
||||
<div
|
||||
class="navOption moreOptionNav"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-labelledby="moreNavLabel"
|
||||
:title="$t('More')"
|
||||
@click="openMoreOptions = !openMoreOptions"
|
||||
@keydown.space.prevent="openMoreOptions = !openMoreOptions"
|
||||
@keydown.enter.prevent="openMoreOptions = !openMoreOptions"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'ellipsis-h']"
|
||||
|
@ -12,6 +17,7 @@
|
|||
/>
|
||||
<p
|
||||
v-if="!hideLabelsSideBar"
|
||||
id="moreNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("More") }}
|
||||
|
@ -21,12 +27,11 @@
|
|||
v-if="openMoreOptions"
|
||||
class="moreOptionContainer"
|
||||
>
|
||||
<div
|
||||
<router-link
|
||||
class="navOption mobileHidden"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:title="$t('Channels.Channels')"
|
||||
@click="navigate('subscribedchannels')"
|
||||
:aria-label="hideLabelsSideBar ? $t('Channels.Channels') : null"
|
||||
to="/subscribedchannels"
|
||||
>
|
||||
<div
|
||||
class="thumbnailContainer"
|
||||
|
@ -39,17 +44,18 @@
|
|||
/>
|
||||
</div>
|
||||
<p
|
||||
id="channelLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("Channels.Channels") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="!hideTrendingVideos"
|
||||
class="navOption"
|
||||
:title="$t('Trending.Trending')"
|
||||
|
||||
@click="navigate('trending')"
|
||||
:aria-label="hideLabelsSideBar ? $t('Trending.Trending') : null"
|
||||
to="/trending"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'fire']"
|
||||
|
@ -58,16 +64,18 @@
|
|||
/>
|
||||
<p
|
||||
v-if="!hideLabelsSideBar"
|
||||
id="trendingNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("Trending.Trending") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="!hidePopularVideos && (backendFallback || backendPreference === 'invidious')"
|
||||
class="navOption"
|
||||
:title="$t('Most Popular')"
|
||||
@click="navigate('popular')"
|
||||
:aria-label="hideLabelsSideBar ? $t('Most Popular') : null"
|
||||
to="/popular"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'users']"
|
||||
|
@ -76,15 +84,17 @@
|
|||
/>
|
||||
<p
|
||||
v-if="!hideLabelsSideBar"
|
||||
id="mostPopularNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("Most Popular") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
</router-link>
|
||||
<router-link
|
||||
class="navOption"
|
||||
:title="$t('About.About')"
|
||||
@click="navigate('about')"
|
||||
:aria-label="hideLabelsSideBar ? $t('About.About') : null"
|
||||
to="/about"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'info-circle']"
|
||||
|
@ -93,42 +103,55 @@
|
|||
/>
|
||||
<p
|
||||
v-if="!hideLabelsSideBar"
|
||||
id="aboutNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("About.About") }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
<router-link
|
||||
class="navOption mobileShow"
|
||||
@click="navigate('history')"
|
||||
:title="$t('History.History')"
|
||||
:aria-label="hideLabelsSideBar ? $t('History.History'): null"
|
||||
to="/history"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'history']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
<p class="navLabel">
|
||||
<p
|
||||
id="historyNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("History.History") }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<hr>
|
||||
<div
|
||||
<router-link
|
||||
class="navOption mobileShow"
|
||||
@click="navigate('settings')"
|
||||
:title="$t('Settings.Settings')"
|
||||
:aria-label="hideLabelsSideBar ? $t('Settings.Settings') : null"
|
||||
to="/settings"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'sliders-h']"
|
||||
class="navIcon"
|
||||
:class="applyNavIconExpand"
|
||||
/>
|
||||
<p class="navLabel">
|
||||
<p
|
||||
id="settingsNavLabel"
|
||||
class="navLabel"
|
||||
>
|
||||
{{ $t("Settings.Settings") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
</router-link>
|
||||
<router-link
|
||||
class="navOption mobileHidden"
|
||||
@click="navigate('about')"
|
||||
:title="$t('About.About')"
|
||||
to="/about"
|
||||
:aria-label="hideLabelsSideBar ? $t('About.About') : null"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="['fas', 'info-circle']"
|
||||
|
@ -141,7 +164,7 @@
|
|||
>
|
||||
{{ $t("About.About") }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -215,6 +215,7 @@
|
|||
<img
|
||||
class="channelThumbnail"
|
||||
:src="channel.thumbnail"
|
||||
:alt="isOpen ? '' : channel.name"
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
|
|
|
@ -2,39 +2,43 @@
|
|||
<ft-settings-section
|
||||
:title="$t('Settings.Theme Settings.Theme Settings')"
|
||||
>
|
||||
<ft-flex-box>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
|
||||
:compact="true"
|
||||
:default-value="barColor"
|
||||
@change="updateBarColor"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Expand Side Bar by Default')"
|
||||
:compact="true"
|
||||
:default-value="expandSideBar"
|
||||
@change="handleExpandSideBar"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
v-if="usingElectron"
|
||||
:label="$t('Settings.Theme Settings.Disable Smooth Scrolling')"
|
||||
:compact="true"
|
||||
:default-value="disableSmoothScrollingToggleValue"
|
||||
@change="handleRestartPrompt"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Hide Side Bar Labels')"
|
||||
:compact="true"
|
||||
:default-value="hideLabelsSideBar"
|
||||
@change="updateHideLabelsSideBar"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Hide FreeTube Header Logo')"
|
||||
:compact="true"
|
||||
:default-value="hideHeaderLogo"
|
||||
@change="updateHideHeaderLogo"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
<div class="switchColumnGrid">
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Match Top Bar with Main Color')"
|
||||
:compact="true"
|
||||
:default-value="barColor"
|
||||
@change="updateBarColor"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Expand Side Bar by Default')"
|
||||
:compact="true"
|
||||
:default-value="expandSideBar"
|
||||
@change="handleExpandSideBar"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
v-if="usingElectron"
|
||||
:label="$t('Settings.Theme Settings.Disable Smooth Scrolling')"
|
||||
:compact="true"
|
||||
:default-value="disableSmoothScrollingToggleValue"
|
||||
@change="handleRestartPrompt"
|
||||
/>
|
||||
</div>
|
||||
<div class="switchColumn">
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Hide Side Bar Labels')"
|
||||
:compact="true"
|
||||
:default-value="hideLabelsSideBar"
|
||||
@change="updateHideLabelsSideBar"
|
||||
/>
|
||||
<ft-toggle-switch
|
||||
:label="$t('Settings.Theme Settings.Hide FreeTube Header Logo')"
|
||||
:compact="true"
|
||||
:default-value="hideHeaderLogo"
|
||||
@change="updateHideHeaderLogo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ft-flex-box>
|
||||
<ft-slider
|
||||
:label="$t('Settings.Theme Settings.UI Scale')"
|
||||
|
|
|
@ -55,7 +55,8 @@
|
|||
@include top-nav-is-colored {
|
||||
color: var(--text-with-main-color);
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
@ -68,7 +69,8 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
|
|
@ -47,6 +47,7 @@
|
|||
>
|
||||
<img
|
||||
v-if="!compact"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="chapterThumbnail"
|
||||
:src="chapter.thumbnail"
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
<img
|
||||
:src="channelThumbnail"
|
||||
class="channelThumbnail"
|
||||
alt=""
|
||||
>
|
||||
</router-link>
|
||||
</div>
|
||||
|
|
|
@ -210,7 +210,8 @@
|
|||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
||||
.scrollToBottom:hover {
|
||||
.scrollToBottom:hover,
|
||||
.scrollToBottom:focus {
|
||||
background-color: var(--accent-color-light);
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
|
|
@ -64,7 +64,8 @@ $watched-transition-duration: 0.5s;
|
|||
transition-duration: $watched-transition-duration;
|
||||
}
|
||||
|
||||
&:hover .thumbnailImage {
|
||||
&:hover .thumbnailImage,
|
||||
&:focus .thumbnailImage {
|
||||
opacity: 1;
|
||||
transition-duration: $watched-transition-duration;
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<img
|
||||
src="../../../../_icons/logoColor.png"
|
||||
class="logo"
|
||||
alt=""
|
||||
>
|
||||
<div class="version">
|
||||
{{ versionNumber }} {{ $t("About.Beta") }}
|
||||
|
|
|
@ -109,7 +109,8 @@
|
|||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
.tab:hover,
|
||||
.tab:focus {
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid var(--tertiary-text-color);
|
||||
}
|
||||
|
|
|
@ -30,12 +30,14 @@
|
|||
class="channel"
|
||||
>
|
||||
<router-link
|
||||
tabindex="-1"
|
||||
class="thumbnailContainer"
|
||||
:to="`/channel/${channel.id}`"
|
||||
>
|
||||
<img
|
||||
class="channelThumbnail"
|
||||
:src="thumbnailURL(channel.thumbnail)"
|
||||
alt=""
|
||||
@error.once="updateThumbnail(channel)"
|
||||
>
|
||||
</router-link>
|
||||
|
|
Loading…
Reference in New Issue