Skip to content

docs(multiple): adds live announcer to improve layout button toggles #31757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

docs(multiple): adds live announcer to improve layout button toggles #31757

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions src/dev-app/dev-app/dev-app-layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import {Direction, Directionality} from '@angular/cdk/bidi';
import {LiveAnnouncer} from '@angular/cdk/a11y';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -56,6 +57,7 @@ export class DevAppLayout {
private _document = inject(DOCUMENT);
private _iconRegistry = inject(MatIconRegistry);
private _route = inject(ActivatedRoute);
private _liveAnnouncer = inject(LiveAnnouncer);

state = getAppState();
testMode: Observable<boolean>;
Expand Down Expand Up @@ -161,33 +163,43 @@ export class DevAppLayout {
this.state.darkTheme = value;
this._document.body.classList.toggle('demo-unicorn-dark-theme', value);
setAppState(this.state);
this._liveAnnouncer.announce(value ? 'Dark theme enabled.' : 'Light theme enabled.');
}

toggleSystemTheme(value = !this.state.systemTheme) {
this.state.systemTheme = value;
this._document.body.classList.toggle('demo-experimental-theme', value);
setAppState(this.state);
this._liveAnnouncer.announce(value ? 'System theme enabled.' : 'Standard theme enabled.');
}

toggleFullscreen() {
this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
this._liveAnnouncer.announce('Fullscreen toggled.');
}

toggleStrongFocus(value = !this.state.strongFocusEnabled) {
this.state.strongFocusEnabled = value;
this._document.body.classList.toggle('demo-strong-focus', value);
setAppState(this.state);
this._liveAnnouncer.announce(value ? 'Strong focus enabled.' : 'Strong focus disabled.');
}

toggleZoneless(value = !this.isZoneless) {
async toggleZoneless(value = !this.isZoneless) {
this.state.zoneless = value;
setAppState(this.state);
const message = value ? 'Zoneless enabled, reloading.' : 'Zoned enabled, reloading.';
await this._liveAnnouncer.announce(message);
location.reload();
}

toggleAnimations() {
async toggleAnimations() {
this.state.animations = !this.state.animations;
setAppState(this.state);
const message = this.state.animations
? 'Animations enabled, reloading.'
: 'Animations disabled, reloading.';
await this._liveAnnouncer.announce(message);
location.reload();
}

Expand All @@ -198,6 +210,7 @@ export class DevAppLayout {

this.state.density = this._densityScales[index];
setAppState(this.state);
this._liveAnnouncer.announce(`Density set to ${this.state.density}`);

// Keep the tooltip open so we can see what the density was changed to. Ideally we'd
// always show the density in a badge, but the M2 badge is too large for the toolbar.
Expand All @@ -209,13 +222,17 @@ export class DevAppLayout {
toggleRippleDisabled(value = !this.state.rippleDisabled) {
this._rippleOptions.disabled = this.state.rippleDisabled = value;
setAppState(this.state);
this._liveAnnouncer.announce(value ? 'Ripples disabled.' : 'Ripples enabled.');
}

toggleDirection(value: Direction = this.state.direction === 'ltr' ? 'rtl' : 'ltr') {
if (value !== this._dir.value) {
this._dir.value = this.state.direction = value;
this._changeDetectorRef.markForCheck();
setAppState(this.state);
this._liveAnnouncer.announce(
value === 'ltr' ? 'Direction set to LTR.' : 'Direction set to RTL.',
);
}
}

Expand All @@ -232,12 +249,16 @@ export class DevAppLayout {
);
this.state.m3Enabled = value;
setAppState(this.state);
this._liveAnnouncer.announce(value ? 'Using M3 theme.' : 'Using M2 theme.');
}

toggleColorApiBackCompat(value = !this.state.colorApiBackCompat) {
this.state.colorApiBackCompat = value;
this._document.body.classList.toggle('demo-color-api-back-compat', value);
setAppState(this.state);
this._liveAnnouncer.announce(
value ? 'Color API back-compatibility enabled.' : 'Color API back-compatibility disabled.',
);
}

getDensityClass() {
Expand Down
Loading