Updgrade dependencies & fix linting issues

.eslintrc.js

@@ -4,12 +4,12 @@ module.exports = {
     node: true,
   },
   plugins: [
-    'vue-a11y',
+    'vuejs-accessibility',
   ],
   extends: [
     'plugin:vue/essential',
     '@vue/airbnb',
-    'plugin:vue-a11y/base',
+    'plugin:vuejs-accessibility/recommended',
   ],
   parserOptions: {
     parser: 'babel-eslint',
@@ -26,9 +26,11 @@ module.exports = {
     'dot-location': 'off',
     'comma-dangle': 'off',
     'keyword-spacing': 'off',
-    'vue-a11y/media-has-caption': 'off',
-    'vue-a11y/no-autofocus': 'off',
-    'vue-a11y/click-events-have-key-events': 'off',
+    'vuejs-accessibility/anchor-has-content': 'off',
+    'vuejs-accessibility/heading-has-content': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vuejs-accessibility/no-autofocus': 'off',
+    'vuejs-accessibility/media-has-caption': 'off',
   },
   overrides: [
     {

package.json

@@ -19,7 +19,6 @@
   "dependencies": {
     "@vue/compat": "^3.2.24",
     "core-js": "^3.6.5",
-    "eslint-plugin-vue-a11y": "^0.0.31",
     "palava-client": "^2.2.1",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.24",
@@ -30,24 +29,26 @@
     "yyid": "2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.3.0",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.3.0",
-    "@vue/cli-plugin-eslint": "~4.3.0",
-    "@vue/cli-plugin-router": "~4.3.0",
-    "@vue/cli-plugin-unit-mocha": "~4.3.0",
-    "@vue/cli-plugin-vuex": "~4.3.0",
-    "@vue/cli-service": "~4.5.3",
+    "@babel/eslint-parser": "^7.16.3",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-unit-mocha": "~4.5.15",
+    "@vue/cli-plugin-vuex": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
     "@vue/compiler-sfc": "^3.2.24",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "chai": "^4.1.2",
     "chromedriver": "88",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "geckodriver": "^1.19.1",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2"
+    "eslint": "^7.0.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
+    "geckodriver": "^2.0.4",
+    "sass": "^1.44.0",
+    "sass-loader": "^10.0.0"
   }
 }

src/components/Navigation.vue

@@ -3,7 +3,10 @@
     <ul>
       <li v-for="infoPage in infoPages" :key="infoPage.id">
         <router-link :to="`/info/${infoPage.id}`">
-          <span @click="checkScreen(infoPage.id, $event)">{{ infoPage.title }}</span>
+          <span
+            @click="checkScreen(infoPage.id, $event)"
+            @keypress.enter="checkScreen(infoPage.id, $event)"
+          >{{ infoPage.title }}</span>
         </router-link>
       </li>
     </ul>

src/components/Party.vue

@@ -354,17 +354,17 @@ export default {
 .top-control {
   position: absolute;
   z-index: 1000;
-  top: $small-control-size / 3;
+  top: calc($small-control-size / 3);
   @media (min-width: $mobile) {
-    top: $large-control-size / 3;
+    top: calc($large-control-size / 3);
   }
   display: flex;
   align-items: center;
 
   .logo-control, .control {
-    margin-left: $small-control-size / 3;
+    margin-left: calc($small-control-size / 3);
     @media (min-width: $mobile) {
-      margin-left: $large-control-size / 3;
+      margin-left: calc($large-control-size / 3);
     }
   }
 
@@ -413,9 +413,9 @@ export default {
     }
 
     &--switch-language > * {
-      font-size: $small-control-size / 2.2;
+      font-size: calc($small-control-size / 2.2);
       @media (min-width: $mobile) {
-        font-size: $large-control-size / 2.2;
+        font-size: calc($large-control-size / 2.2);
       }
       transform: translate(-1px, 0px);
       text-transform: uppercase;

src/components/PeerStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="peer-status" @click="$emit('click')">
+  <div class="peer-status" @click="$emit('click')" @keypress.enter="$emit('click')">
     <div v-if="status === 'audio'">
       <inline-svg
         class="symbol"

src/components/Placeholder.vue

@@ -8,6 +8,7 @@
       'background': background,
     }"
     @click="$emit('click')"
+    @keypress.enter="$emit('click')"
   />
 </template>
 

src/components/Stream.vue

@@ -10,6 +10,7 @@
       'media--orientation-unknown': this.status === 'video' && this.orientation === 'unknown',
     }"
     @click="$emit('click')"
+    @keypress.enter="$emit('click')"
   />
 </template>
 

src/css/styles.scss

@@ -192,9 +192,9 @@ $lobby-border-radius: 0px;
   position: absolute;
   height: $size;
   width: $size;
-  font-size: $size / 1.7;
-  top: $size / 4;
-  right: $size / 4;
+  font-size: calc($size / 1.7);
+  top: calc($size / 4);
+  right: calc($size / 4);
   fill: $action-1;
 }
 

vue.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     config.resolve.symlinks(false) // see https://github.com/vuejs/vue-cli/issues/2948
     config.optimization.minimize(!process.env.BUILD_NOT_MINIFIED)
 
@@ -8,15 +8,13 @@ module.exports = {
     config.module
       .rule('vue')
       .use('vue-loader')
-      .tap(options => {
-        return {
-          ...options,
-          compilerOptions: {
-            compatConfig: {
-              MODE: 2
-            }
+      .tap((options) => ({
+        ...options,
+        compilerOptions: {
+          compatConfig: {
+            MODE: 2
           }
         }
-      })
-    }
+      }))
+  }
 }