chore: add accessibility linting

lgpage · Dec 23, 2024 · b0052e1 · b0052e1
1 parent 9b9fb8c
commit b0052e1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -176,7 +176,8 @@
         "*.html"
       ],
       "extends": [
-        "plugin:@angular-eslint/template/recommended"
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:@angular-eslint/template/accessibility"
       ],
       "rules": {}
     }

diff --git a/src/app/components/side-nav/side-nav.component.html b/src/app/components/side-nav/side-nav.component.html
@@ -1,4 +1,13 @@
-<h2 class="p-2 text-center hover" (click)="goToHome()">RxJS Tutor</h2>
+<h2
+  role="button"
+  tabindex="0"
+  aria-label="Go to home page"
+  class="p-2 text-center hover"
+  (click)="goToHome()"
+  (keyup)="goToHome()"
+>
+  RxJS Tutor
+</h2>
 
 <mat-accordion>
   <mat-expansion-panel *ngFor="let group of groupedExamples">
@@ -9,8 +18,10 @@ <h2 class="p-2 text-center hover" (click)="goToHome()">RxJS Tutor</h2>
     <mat-nav-list class="p-0 ms-2">
       <div
         mat-list-item
-        class="hover py-1 ml-2"
+        role="button"
+        tabindex="0"
         (click)="goToExample(example)"
+        (keyup)="goToExample(example)"
         *ngFor="let example of group.examples"
       >
         {{ example.name }}