fix(docs-infra): improve accessibility of contributor cards (#43460)

Improve the accessibility of contributor cards (in `/about`) by making
them easier to navigate via keyboard:

- Show the (otherwise hidden) contributor info links on focus.
- Make the "View bio" link focusable via keyboard (to give a clearer
  indication that users can click to view the bio - although technically
  the click is handled by an ancestor).
- Make the flipped cards focusable via keyboard (so it is possible to
  click them to unflip).

PR Close #43460

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

@@ -14,7 +14,7 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
             <div class="contributor-image"
                  [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
                  <div class="contributor-info">
-                     <a *ngIf="person.bio" mat-button class="info-item">
+                     <a *ngIf="person.bio" mat-button class="info-item" tabindex="0">
                          View Bio
                      </a>
                      <a *ngIf="person.twitter" mat-icon-button class="info-item icon"
@@ -30,7 +30,8 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
             </div>
         </div>
 
-        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)" (keyup.enter)="flipCard(person)">
+        <div class="card-back" *ngIf="person.isFlipped" (click)="flipCard(person)" (keyup.enter)="flipCard(person)"
+             tabindex="0">
             <h3>{{person.name}}</h3>
             <p class="contributor-bio">{{person.bio}}</p>
         </div>

aio/src/styles/2-modules/contributor/_contributor.scss

@@ -26,6 +26,7 @@ aio-contributor {
   transition: all .3s;
 
   @media (hover) {
+    &:focus-within,
     &:hover {
       transform: translate3d(0,-3px,0);
       box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);