From a072c96305b99c966f87fa826d9f842c67b4cbe1 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sun, 19 Sep 2021 11:46:48 +0300
Subject: [PATCH] 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
---
 .../contributor/contributor-list.component.ts          |  1 +
 .../resource/resource-list.component.html              |  3 ++-
 aio/src/styles/2-modules/buttons/_buttons-theme.scss   | 10 ++++++++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/aio/src/app/custom-elements/contributor/contributor-list.component.ts b/aio/src/app/custom-elements/contributor/contributor-list.component.ts
index 980d3f9186f..0b42f50f596 100644
--- a/aio/src/app/custom-elements/contributor/contributor-list.component.ts
+++ b/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>
diff --git a/aio/src/app/custom-elements/resource/resource-list.component.html b/aio/src/app/custom-elements/resource/resource-list.component.html
index 0ac703950dc..7f934e3eba8 100644
--- a/aio/src/app/custom-elements/resource/resource-list.component.html
+++ b/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>
diff --git a/aio/src/styles/2-modules/buttons/_buttons-theme.scss b/aio/src/styles/2-modules/buttons/_buttons-theme.scss
index d47360964ad..03fbf9ed6fe 100644
--- a/aio/src/styles/2-modules/buttons/_buttons-theme.scss
+++ b/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;
+      }
     }
   }
 }