Dependency updates and accessibility fixes

Author: kabbagepatch

.eslintrc.js

@@ -10,9 +10,10 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'max-len': ['error', { 'code': 128, 'ignoreComments': true }],
+    'max-len': ['error', { code: 128, ignoreComments: true }],
+    'vue/multi-word-component-names': 'off',
   },
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
   },
 };

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app',
+    '@vue/cli-plugin-babel/preset',
   ],
 };

package.json

@@ -4,22 +4,29 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "start": "vue-cli-service serve"
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "raw-loader": "^1.0.0",
+    "core-js": "^3.8.3",
+    "raw-loader": "^4.0.2",
     "vue": "^2.5.17",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.3",
-    "@vue/cli-plugin-eslint": "^3.0.3",
-    "@vue/cli-service": "^3.0.3",
-    "@vue/eslint-config-airbnb": "^3.0.3",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.1",
+    "@vue/cli-plugin-eslint": "~5.0.1",
+    "@vue/cli-service": "~5.0.1",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vuejs-accessibility": "^1.1.0",
     "vue-template-compiler": "^2.5.17"
   }
 }

src/components/Books/BookSection.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="book-section">
     <div class="book-section-header"
-      v-on:click="showBooks = !showBooks"
+      @click="showBooks = !showBooks"
+      @keyup.enter="showBooks = !showBooks"
+      role="button"
+      tabindex="0"
+      :aria-label="showBooks ? 'Hide Books' : 'Show Books'"
     >
       <div>{{year}}</div>
       <div>{{bookCount}}</div>

src/components/HomeCanvas/HomeCanvas.vue

@@ -6,8 +6,10 @@
       width="500"
       height="500"
       @click="handleMouseClick"
+      @keyup.enter="handleMouseClick"
       @mousemove="handleMouseMove"
       @mouseleave="handleMouseLeave"
+      @blur="handleMouseLeave"
     >
       <Grid />
     </canvas>

src/main.js

@@ -6,7 +6,7 @@ import router from './router';
 Vue.config.productionTip = false;
 
 new Vue({
-  render: h => h(App),
+  render: (h) => h(App),
   store,
   router,
 }).$mount('#app');

src/pages/Work.vue

@@ -89,9 +89,8 @@ export default {
     axios
       .get('https://api.github.com/users/kavisherlock/repos?sort=pushed')
       .then((response) => {
-        this.myRepos =
-          response.data
-            .filter(repo => !repo.fork && !repo.archived);
+        this.myRepos = response.data
+          .filter((repo) => !repo.fork && !repo.archived);
         console.log(this.myRepos);
       });
   },

src/store.js

@@ -65,7 +65,7 @@ export default new Vuex.Store({
     },
   },
   getters: {
-    grid: state => state.grid,
-    bookMap: state => state.bookMap,
+    grid: (state) => state.grid,
+    bookMap: (state) => state.bookMap,
   },
 });

vue.config.js

@@ -8,4 +8,3 @@ module.exports = {
       .end();
   },
 };
-