docs: fix accessibility lint rules (#32661)

Add and fix accessibility rules, bump codelyzer to support pseudo events
for template-click-events-have-key-events rule.

PR Close #32661

aio/package.json

@@ -116,7 +116,7 @@
     "chalk": "^2.1.0",
     "chrome-launcher": "^0.10.7",
     "cjson": "^0.5.0",
-    "codelyzer": "^5.0.0",
+    "codelyzer": "^5.1.1",
     "cross-spawn": "^5.1.0",
     "css-selector-parser": "^1.3.0",
     "dgeni": "^0.4.11",

aio/src/app/custom-elements/contributor/contributor-list.component.ts

@@ -10,7 +10,8 @@ import { LocationService } from 'app/shared/location.service';
 <a *ngFor="let name of groupNames"
     [class.selected]="name == selectedGroup.name"
     class="button mat-button filter-button"
-       (click)="selectGroup(name)">{{name}}</a>
+    (click)="selectGroup(name)"
+    (keyup.enter)="selectGroup(name)">{{name}}</a>
   </div>
   <section *ngIf="selectedGroup" class="grid-fluid">
     <div class="contributor-group">

aio/src/app/custom-elements/contributor/contributor.component.ts

@@ -8,7 +8,7 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
   template: `
     <div [ngClass]="{ 'flipped': person.isFlipped }" class="contributor-card">
 
-        <div class="card-front" (click)="flipCard(person)">
+        <div class="card-front" (click)="flipCard(person)" (keyup.enter)="flipCard(person)">
             <h3>{{person.name}}</h3>
 
             <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
@@ -28,7 +28,7 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
             </div>
         </div>
 
-        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)">
+        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)" (keyup.enter)="flipCard(person)">
             <h3>{{person.name}}</h3>
             <p class="contributor-bio">{{person.bio}}</p>
         </div>

aio/src/app/custom-elements/resource/resource-list.component.ts

@@ -4,6 +4,7 @@ import { PlatformLocation } from '@angular/common';
 import { Category } from './resource.model';
 import { ResourceService } from './resource.service';
 
+/* tslint:disable:template-accessibility-elements-content */
 @Component({
   selector: 'aio-resource-list',
   templateUrl: 'resource-list.component.html'

aio/src/app/layout/notification/notification.component.html

@@ -1,4 +1,4 @@
-<span class="content" (click)="contentClick()">
+<span class="content" (click)="contentClick()" (keyup.enter)="contentClick()">
   <ng-content></ng-content>
 </span>
 

aio/tslint.json

@@ -96,6 +96,16 @@
       "ban-keywords",
       "check-format",
       "require-const-for-all-caps"
-    ]
+    ],
+    "template-accessibility-alt-text": true,
+    "template-accessibility-elements-content": true,
+    "template-accessibility-label-for": true,
+    "template-accessibility-tabindex-no-positive": true,
+    "template-accessibility-table-scope": true,
+    "template-accessibility-valid-aria": true,
+    "template-click-events-have-key-events": true,
+    "template-mouse-events-have-key-events": true,
+    "template-no-autofocus": true,
+    "template-no-distracting-elements": true
   }
 }

aio/yarn.lock

@@ -1594,10 +1594,10 @@ anymatch@^3.0.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-app-root-path@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.1.0.tgz#98bf6599327ecea199309866e8140368fd2e646a"
-  integrity sha1-mL9lmTJ+zqGZMJhm6BQDaP0uZGo=
+app-root-path@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-2.2.1.tgz#d0df4a682ee408273583d43f6f79e9892624bc9a"
+  integrity sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==
 
 append-transform@^1.0.0:
   version "1.0.0"
@@ -2850,12 +2850,12 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
-codelyzer@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-5.0.0.tgz#e4032efb23a7c5d4bcfe7321fc1789490c679837"
-  integrity sha512-Bif70XYt8NFf/Q9GPTxmC86OsBRfQZq1dBjdruJ5kZhJ8/jKhJL6MvCLKnYtSOG6Rhiv/44DU0cHk6GYthjy8Q==
+codelyzer@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-5.1.1.tgz#a599fa8c2a5847f553a792b934e493d1506a4a62"
+  integrity sha512-t8ZLSZBUjVFOJVk4jASLgmTdKWK/0ZsQCnPXy6PXw1LWOOormQOVnyy4OYoiZ6rAWTrz60Obx+zA2t8xY53QzQ==
   dependencies:
-    app-root-path "^2.1.0"
+    app-root-path "^2.2.1"
     aria-query "^3.0.0"
     axobject-query "^2.0.2"
     css-selector-tokenizer "^0.7.1"