chromium/chrome/browser/resources/webui_gallery/demos/cr_a11y_announcer/cr_a11y_announcer_demo.ts

// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '//resources/cr_elements/cr_button/cr_button.js';
import '//resources/cr_elements/cr_checkbox/cr_checkbox.js';

import {getInstance as getAnnouncerInstance} from '//resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.js';
import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';

import {getCss} from './cr_a11y_announcer_demo.css.js';
import {getHtml} from './cr_a11y_announcer_demo.html.js';

export interface CrA11yAnnouncerDemoElement {
  $: {
    announcerContainer: HTMLElement,
  };
}

export class CrA11yAnnouncerDemoElement extends CrLitElement {
  static get is() {
    return 'cr-a11y-announcer-demo';
  }

  static override get styles() {
    return getCss();
  }

  override render() {
    return getHtml.bind(this)();
  }

  static override get properties() {
    return {
      forceShowAnnouncer_: {
        type: Boolean,
        reflect: true,
      },
    };
  }

  private announcementTextCount_: number = 0;
  protected forceShowAnnouncer_: boolean = false;

  protected onAnnounceTextClick_() {
    const announcer = this.forceShowAnnouncer_ ?
        getAnnouncerInstance(this.$.announcerContainer) :
        getAnnouncerInstance();
    announcer.announce(`Announcement number ${++this.announcementTextCount_}`);
  }

  protected onAnnounceMultipleTextsClick_() {
    const announcer = this.forceShowAnnouncer_ ?
        getAnnouncerInstance(this.$.announcerContainer) :
        getAnnouncerInstance();
    announcer.announce('Page is loading...');
    announcer.announce('Page has loaded.');
  }

  protected onForceShowAnnouncerChanged_(e: CustomEvent<{value: boolean}>) {
    this.forceShowAnnouncer_ = e.detail.value;
  }
}

export const tagName = CrA11yAnnouncerDemoElement.is;

customElements.define(
    CrA11yAnnouncerDemoElement.is, CrA11yAnnouncerDemoElement);