small accessibility improvements (#3033)

* small accessibility improvements

* switch to routerlink for side-nav-more-options
This commit is contained in:
ChunkyProgrammer 2023-01-12 01:55:47 -05:00 committed by GitHub
parent 03f73c5d33
commit afb9e51cdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 199 additions and 110 deletions

View File

@ -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
}
}

11
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,11 @@
{
"recommendations": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"stylelint.vscode-stylelint",
"syler.sass-indented",
"redhat.vscode-yaml",
"vue.volar",
"eamodio.gitlens"
]
}

16
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,16 @@
{
"stylelint.packageManager": "yarn",
"stylelint.snippet": [
"css",
"less",
"postcss",
"sass",
"scss"
],
"stylelint.validate": [
"css",
"less",
"postcss",
"scss"
]
}

5
jsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"vueCompilerOptions": {
"target": 2.7
}
}

View File

@ -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"

View File

@ -9,6 +9,7 @@
<img
class="bubble"
:src="channelThumbnail"
alt=""
>
<div
v-if="selected"

View File

@ -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);
}

View File

@ -31,6 +31,14 @@ export default Vue.extend({
disabled: {
type: Boolean,
default: false
},
sanitizedId: {
type: String,
default: null
},
describeById: {
type: String,
default: null
}
},
computed: {

View File

@ -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 }}

View File

@ -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');
}
}
}

View File

@ -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'),

View File

@ -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"

View File

@ -1,3 +1,6 @@
<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
<!-- eslint-disable vuejs-accessibility/media-has-caption -->
<template>
<div
class="relative"

View File

@ -28,11 +28,5 @@ export default Vue.extend({
navIconExpand: this.hideLabelsSideBar
}
}
},
methods: {
navigate: function (route) {
this.openMoreOptions = false
this.$router.push('/' + route)
}
}
})

View File

@ -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>

View File

@ -215,6 +215,7 @@
<img
class="channelThumbnail"
:src="channel.thumbnail"
:alt="isOpen ? '' : channel.name"
>
</div>
<p

View File

@ -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')"

View File

@ -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;
}

View File

@ -47,6 +47,7 @@
>
<img
v-if="!compact"
alt=""
aria-hidden="true"
class="chapterThumbnail"
:src="chapter.thumbnail"

View File

@ -19,6 +19,7 @@
<img
:src="channelThumbnail"
class="channelThumbnail"
alt=""
>
</router-link>
</div>

View File

@ -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;
}

View File

@ -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;
}

View File

@ -8,6 +8,7 @@
<img
src="../../../../_icons/logoColor.png"
class="logo"
alt=""
>
<div class="version">
{{ versionNumber }} {{ $t("About.Beta") }}

View File

@ -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);
}

View File

@ -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>