Setup a11y rules with Eslint for local development

leaderboardsgg · Oct 21, 2021 · bd5b6a3 · bd5b6a3
1 parent c265491
commit bd5b6a3
Show file tree

Hide file tree

Showing 5 changed files with 321 additions and 27,659 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,10 +13,10 @@ module.exports = {
     'plugin:vue/essential',
     'plugin:vue/strongly-recommended',
     'plugin:vue/recommended',
-    'plugin:vuejs-accessibility/recommended',
     'prettier',
+    'plugin:vue-a11y/base',
   ],
-  plugins: ['jest', 'prettier', 'vue', 'vuejs-accessibility'],
+  plugins: ['jest', 'prettier', 'vue', 'vue-a11y'],
   root: true,
   // add your custom rules here
   rules: {

diff --git a/components/SiteNavbar/SiteNavbar.vue b/components/SiteNavbar/SiteNavbar.vue
@@ -79,7 +79,8 @@
         <CoreSignUpButton />
         <button
           class="items-center rounded text-black lg:hidden"
-          @click="mobileNavIsActive = !mobileNavIsActive"
+          @click="toggleMobileNav"
+          @keydown.space="toggleMobileNav"
         >
           <svg
             class="fill-current h-5 w-5 mx-2"
@@ -112,5 +113,10 @@ export default defineComponent({
       mobileNavIsActive,
     };
   },
+  methods: {
+    toggleMobileNav() {
+      this.mobileNavIsActive = !this.mobileNavIsActive;
+    },
+  },
 });
 </script>
diff --git a/components/core/SearchBar/SearchBar.vue b/components/core/SearchBar/SearchBar.vue
@@ -6,7 +6,12 @@
       placeholder="search..."
       @keyup.enter="onEnter"
     />
-    <button data-testid="search-button" type="submit" @click="onClick">
+    <button
+      data-testid="search-button"
+      type="submit"
+      aria-hidden="true"
+      @click="onClick"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"