SDS A11y Announcements

Angular module for accessibility announcements.

Install

npm install @skills-development-scotland/sds-a11y-announce --save

Usage

• APP_BASE_TITLES (required)
  • Type: string[]
  • The base titles for constructing page titkes

Module

import { NgModule } from '@angular/core';
import {
  APP_BASE_TITLES,
  SdsA11yAnnounceModule
} from '@skills-development-scotland/sds-a11y-announce';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    SdsA11yAnnounceModule
  ],
  providers: [
    {
      provide: APP_BASE_TITLES,
      useValue: ['My App Page Title']
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Component

import { Component } from '@angular/core';
import { TitleService, AnnounceService } from '@skills-development-scotland/sds-a11y-announce';

@Component({
  selector: 'app-root',
  template: `
    <sds-lib-a11y-announcements></sds-lib-a11y-announcements>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent implements OnInit {

  constructor(
    private titleService: TitleService,
    private announceService: AnnounceService
  ) { }

  ngOnInit(): void {
    this.titleService.setTitle('Awesome component');
  }

  save(item: any): void {
    const message = `Awesome item ${item.title} saved`;
    this.announceService.announce(message);
  }

  remove(item: any): void {
    const message = `Awesome item ${item.title} deleted`;
    this.announceService.announce(message);
  }

}