fix(docs-infra): improve accessibility of button groups (#43460)

Improve the accessibility of button groups (such as those seen in
`/about` and `/resources` to choose between the different categories)
by making them easier to navigate via keyboard:

- Make the individual buttons focusable via keyboard.
  (Previously, they were not focusable - despite being anchor elements,
  because they were lacking an `href` attribute.)

- Give focused buttons a different style.

PR Close #43460

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

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

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

@@ -1,8 +1,9 @@
 <div class="center-layout">
   <div class="flex-center group-buttons">
     <a *ngFor="let category of categories"
-      [class.selected]="category.id == selectedCategory.id"
       class="button mat-button filter-button"
+      [class.selected]="category.id == selectedCategory.id"
+      tabindex="0"
       (click)="selectCategory(category.id)"
       (keyup.enter)="selectCategory(category.id)">{{category.title}}</a>
   </div>

aio/src/styles/2-modules/buttons/_buttons-theme.scss

@@ -55,11 +55,17 @@
     // (hence we include `.mat-button` in the selector).
     a.button.mat-button.filter-button {
       background-color: rgba(constants.$blue, 0.2);
-      &.selected,
-      &:hover {
+
+      &.selected {
         background-color: constants.$blue;
         color: constants.$white;
       }
+
+      &:focus,
+      &:hover {
+        background-color: rgba(constants.$blue, 0.7);
+        color: constants.$white;
+      }
     }
   }
 }