small accessibility improvements

.stylelintrc.json

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

.vscode/extensions.json

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

.vscode/settings.json

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

jsconfig.json

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

src/renderer/components/external-player-settings/external-player-settings.vue

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

src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue

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

src/renderer/components/ft-icon-button/ft-icon-button.scss

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

src/renderer/components/ft-select/ft-select.js

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

src/renderer/components/ft-select/ft-select.vue

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

src/renderer/components/ft-share-button/ft-share-button.scss

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

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.js

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

src/renderer/components/ft-sponsor-block-category/ft-sponsor-block-category.vue

@@ -1,16 +1,23 @@
 <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"
       :select-values="colorValues"
       @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"

src/renderer/components/ft-video-player/ft-video-player.vue

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

src/renderer/components/side-nav-more-options/side-nav-more-options.js

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