Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 419de93

Browse files
SplaktarSplaktar
committed
fix: various a11y refinements
- minify theme-demo-icon.svg - use & instead of / as it reads better on a screen reader - prefix classes with `docs-` - tell screen reader users when a theme has been selected Fixes #671
1 parent d5e6897 commit 419de93

File tree

9 files changed

+35
-57
lines changed

9 files changed

+35
-57
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
2-
<span class="cdk-visually-hidden" role="heading" aria-level="2" tabindex="-1" #initialFocusTarget>
2+
<h2 class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
33
Overview for {{docItem?.id}}
4-
</span>
4+
</h2>
55
<doc-viewer
66
documentUrl="/docs-content/overviews/{{docItem?.packageName}}/{{docItem?.id}}.html"
77
class="docs-component-view-text-content docs-component-overview"

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div class="docs-component-viewer">
2-
<nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content" aria-label="Section">
2+
<nav mat-tab-nav-bar class="docs-component-viewer-tabbed-content"
3+
aria-label="Documentation Sections">
34
<a mat-tab-link class="docs-component-viewer-section-tab"
45
*ngFor="let section of sections"
56
[routerLink]="section.toLowerCase()"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<button mat-icon-button type="button" (click)="openStackBlitz()" [disabled]="isDisabled"
2-
[attr.aria-label]="isDisabled ? 'Building StackBlitz example...' : 'Edit in StackBlitz'"
2+
[attr.aria-label]="isDisabled ? 'Building StackBlitz example...' : 'Edit this example in StackBlitz'"
33
[matTooltip]="isDisabled ? 'Building ' + exampleData?.description + ' StackBlitz example...' :
44
'Edit ' + exampleData.description + ' example in StackBlitz'">
55
<mat-icon>open_in_new</mat-icon>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div *ngFor="let linkSection of _linkSections" class="docs-toc-container">
22
<div class="docs-toc-heading">{{linkSection.name}}</div>
3-
<nav aria-label="Section Table of Contents">
3+
<nav [attr.aria-label]="linkSection.name + ' Table of Contents'">
44
<a [href]="_rootUrl + '#' + link.id"
55
*ngFor="let link of linkSection.links; let i = index"
66
class="docs-level-{{link.type}} docs-link"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<mat-icon>format_color_fill</mat-icon>
44
</button>
55

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

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.theme-picker-menu {
1+
.docs-theme-picker-menu {
22
.mat-menu-item {
33
.mat-icon.theme-example-icon {
44
margin-right: 0;
@@ -11,49 +11,49 @@
1111

1212
// The below colors need to align with the themes defined in ThemePicker
1313
&.deeppurple-amber svg {
14-
.theme-icon-background {
14+
.docs-theme-icon-background {
1515
fill: #fafafa;
1616
}
17-
.theme-icon-button {
17+
.docs-theme-icon-button {
1818
fill: #FFC107;
1919
}
20-
.theme-icon-toolbar {
20+
.docs-theme-icon-toolbar {
2121
fill: #673AB7;
2222
}
2323
}
2424

2525
&.indigo-pink svg {
26-
.theme-icon-background {
26+
.docs-theme-icon-background {
2727
fill: #fafafa;
2828
}
29-
.theme-icon-button {
29+
.docs-theme-icon-button {
3030
fill: #E91E63;
3131
}
32-
.theme-icon-toolbar {
32+
.docs-theme-icon-toolbar {
3333
fill: #3F51B5;
3434
}
3535
}
3636

3737
&.pink-bluegrey svg {
38-
.theme-icon-background {
38+
.docs-theme-icon-background {
3939
fill: #303030;
4040
}
41-
.theme-icon-button {
41+
.docs-theme-icon-button {
4242
fill: #607D8B;
4343
}
44-
.theme-icon-toolbar {
44+
.docs-theme-icon-toolbar {
4545
fill: #E91E63;
4646
}
4747
}
4848

4949
&.purple-green svg {
50-
.theme-icon-background {
50+
.docs-theme-icon-background {
5151
fill: #303030;
5252
}
53-
.theme-icon-button {
53+
.docs-theme-icon-button {
5454
fill: #4CAF50;
5555
}
56-
.theme-icon-toolbar {
56+
.docs-theme-icon-toolbar {
5757
fill: #9C27B0;
5858
}
5959
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe('ThemePicker', () => {
1515
const component = fixture.componentInstance;
1616
const name = 'pink-bluegrey';
1717
spyOn(component.styleManager, 'setStyle');
18-
component.onThemeSelection(name);
18+
component.selectTheme(name);
1919
expect(component.styleManager.setStyle).toHaveBeenCalled();
2020
expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${name}.css`);
2121
});

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {ActivatedRoute, ParamMap} from '@angular/router';
1717
import {Subscription} from 'rxjs';
1818
import {map} from 'rxjs/operators';
1919
import {DomSanitizer} from '@angular/platform-browser';
20+
import {LiveAnnouncer} from '@angular/cdk/a11y';
2021

2122
@Component({
2223
selector: 'theme-picker',
@@ -34,29 +35,29 @@ export class ThemePicker implements OnInit, OnDestroy {
3435
{
3536
primary: '#673AB7',
3637
accent: '#FFC107',
37-
displayName: 'Deep Purple / Amber',
38+
displayName: 'Deep Purple & Amber',
3839
name: 'deeppurple-amber',
3940
isDark: false,
4041
},
4142
{
4243
primary: '#3F51B5',
4344
accent: '#E91E63',
44-
displayName: 'Indigo / Pink',
45+
displayName: 'Indigo & Pink',
4546
name: 'indigo-pink',
4647
isDark: false,
4748
isDefault: true,
4849
},
4950
{
5051
primary: '#E91E63',
5152
accent: '#607D8B',
52-
displayName: 'Pink / Blue-grey',
53+
displayName: 'Pink & Blue-grey',
5354
name: 'pink-bluegrey',
5455
isDark: true,
5556
},
5657
{
5758
primary: '#9C27B0',
5859
accent: '#4CAF50',
59-
displayName: 'Purple / Green',
60+
displayName: 'Purple & Green',
6061
name: 'purple-green',
6162
isDark: true,
6263
},
@@ -65,13 +66,15 @@ export class ThemePicker implements OnInit, OnDestroy {
6566
constructor(public styleManager: StyleManager,
6667
private _themeStorage: ThemeStorage,
6768
private _activatedRoute: ActivatedRoute,
68-
iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
69+
private liveAnnouncer: LiveAnnouncer,
70+
iconRegistry: MatIconRegistry,
71+
sanitizer: DomSanitizer) {
6972
iconRegistry.addSvgIcon('theme-example',
7073
sanitizer.bypassSecurityTrustResourceUrl(
7174
'assets/img/theme-demo-icon.svg'));
7275
const themeName = this._themeStorage.getStoredThemeName();
7376
if (themeName) {
74-
this.onThemeSelection(themeName);
77+
this.selectTheme(themeName);
7578
}
7679
}
7780

@@ -80,7 +83,7 @@ export class ThemePicker implements OnInit, OnDestroy {
8083
.pipe(map((params: ParamMap) => params.get('theme')))
8184
.subscribe((themeName: string | null) => {
8285
if (themeName) {
83-
this.onThemeSelection(themeName);
86+
this.selectTheme(themeName);
8487
}
8588
});
8689
}
@@ -89,7 +92,7 @@ export class ThemePicker implements OnInit, OnDestroy {
8992
this._queryParamSubscription.unsubscribe();
9093
}
9194

92-
onThemeSelection(themeName: string) {
95+
selectTheme(themeName: string) {
9396
const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
9497

9598
if (!theme) {
@@ -105,6 +108,7 @@ export class ThemePicker implements OnInit, OnDestroy {
105108
}
106109

107110
if (this.currentTheme) {
111+
this.liveAnnouncer.announce(`${theme.displayName} theme selected.`, 'polite', 3000);
108112
this._themeStorage.storeTheme(this.currentTheme);
109113
}
110114
}

‎src/assets/img/theme-demo-icon.svg

Lines changed: 1 addition & 28 deletions
Loading

0 commit comments

Comments
 (0)