fix: various a11y refinements

- minify theme-demo-icon.svg

Fixes #671

Author: Splaktar

src/app/pages/component-viewer/component-overview.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
-  <span class="cdk-visually-hidden" role="heading" aria-level="2" tabindex="-1" #initialFocusTarget>
+  <h2 class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
     Overview for {{docItem?.id}}
-  </span>
+  </h2>
   <doc-viewer
       documentUrl="/docs-content/overviews/{{docItem?.packageName}}/{{docItem?.id}}.html"
       class="docs-component-view-text-content docs-component-overview"

src/app/pages/component-viewer/component-viewer.html

@@ -1,5 +1,6 @@
 <div class="docs-component-viewer">
-  <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content" aria-label="Section">
+  <nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content"
+       aria-label="Documentation Sections">
     <a mat-tab-link class="docs-component-viewer-section-tab"
         *ngFor="let section of sections"
         [routerLink]="section.toLowerCase()"

src/app/shared/stack-blitz/stack-blitz-button.html

@@ -1,5 +1,5 @@
 <button mat-icon-button type="button" (click)="openStackBlitz()" [disabled]="isDisabled"
-        [attr.aria-label]="isDisabled ? 'Building StackBlitz example...' : 'Edit in StackBlitz'"
+        [attr.aria-label]="isDisabled ? 'Building StackBlitz example...' : 'Edit this example in StackBlitz'"
         [matTooltip]="isDisabled ? 'Building ' + exampleData?.description + ' StackBlitz example...' :
         'Edit ' + exampleData.description + ' example in StackBlitz'">
   <mat-icon>open_in_new</mat-icon>

src/app/shared/table-of-contents/table-of-contents.html

@@ -1,6 +1,6 @@
 <div *ngFor="let linkSection of _linkSections" class="docs-toc-container">
   <div class="docs-toc-heading">{{linkSection.name}}</div>
-  <nav aria-label="Section Table of Contents">
+  <nav [attr.aria-label]="linkSection.name + ' Table of Contents'">
     <a [href]="_rootUrl + '#' + link.id"
       *ngFor="let link of linkSection.links; let i = index"
       class="docs-level-{{link.type}} docs-link"

src/app/shared/theme-picker/theme-picker.html

@@ -3,8 +3,8 @@
   <mat-icon>format_color_fill</mat-icon>
 </button>
 
-<mat-menu #themeMenu="matMenu" xPosition="before" class="theme-picker-menu">
-  <button mat-menu-item *ngFor="let theme of themes" (click)="onThemeSelection(theme.name)">
+<mat-menu #themeMenu="matMenu" xPosition="before" class="docs-theme-picker-menu">
+  <button mat-menu-item *ngFor="let theme of themes" (click)="selectTheme(theme.name)">
     <mat-icon [ngClass]="{'docs-theme-selected-icon': currentTheme === theme}"
               [color]="currentTheme === theme ? 'accent' : undefined">
       {{currentTheme === theme ? 'radio_button_checked' : 'radio_button_unchecked'}}

src/app/shared/theme-picker/theme-picker.scss

@@ -1,4 +1,4 @@
-.theme-picker-menu {
+.docs-theme-picker-menu {
   .mat-menu-item {
     .mat-icon.theme-example-icon {
       margin-right: 0;

src/app/shared/theme-picker/theme-picker.spec.ts

@@ -15,7 +15,7 @@ describe('ThemePicker', () => {
     const component = fixture.componentInstance;
     const name = 'pink-bluegrey';
     spyOn(component.styleManager, 'setStyle');
-    component.onThemeSelection(name);
+    component.selectTheme(name);
     expect(component.styleManager.setStyle).toHaveBeenCalled();
     expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${name}.css`);
   });

src/app/shared/theme-picker/theme-picker.ts

@@ -71,7 +71,7 @@ export class ThemePicker implements OnInit, OnDestroy {
                                 'assets/img/theme-demo-icon.svg'));
     const themeName = this._themeStorage.getStoredThemeName();
     if (themeName) {
-      this.onThemeSelection(themeName);
+      this.selectTheme(themeName);
     }
   }
 
@@ -80,7 +80,7 @@ export class ThemePicker implements OnInit, OnDestroy {
       .pipe(map((params: ParamMap) => params.get('theme')))
       .subscribe((themeName: string | null) => {
         if (themeName) {
-          this.onThemeSelection(themeName);
+          this.selectTheme(themeName);
         }
     });
   }
@@ -89,7 +89,7 @@ export class ThemePicker implements OnInit, OnDestroy {
     this._queryParamSubscription.unsubscribe();
   }
 
-  onThemeSelection(themeName: string) {
+  selectTheme(themeName: string) {
     const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
 
     if (!theme) {