chromium/chrome/browser/resources/ash/settings/multidevice_page/multidevice_wifi_sync_disabled_link.ts

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

/**
 * @fileoverview 'settings-multidevice-wifi-sync-disabled-link' creates a
 * localized string with accessibility labels for the Wifi Sync feature when
 * the prerequisite Chrome Sync setting is not enabled.
 *
 * The localized string is treated as a special case for accessibility
 * labelling since it contains two links, one to the Chrome Sync dependency
 * and the other to a Learn More page for Wifi Sync.
 */

import '../settings_shared.css.js';

import {sanitizeInnerHtml} from 'chrome://resources/js/parse_html_subset.js';
import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {castExists} from '../assert_extras.js';
import {Router, routes} from '../router.js';

import {MultiDeviceFeatureMixin} from './multidevice_feature_mixin.js';
import {getTemplate} from './multidevice_wifi_sync_disabled_link.html.js';

const SettingsMultideviceWifiSyncDisabledLinkElementBase =
    MultiDeviceFeatureMixin(PolymerElement);

export class SettingsMultideviceWifiSyncDisabledLinkElement extends
    SettingsMultideviceWifiSyncDisabledLinkElementBase {
  static get is() {
    return 'settings-multidevice-wifi-sync-disabled-link' as const;
  }

  static get template() {
    return getTemplate();
  }

  private getAriaLabelledContent_(): TrustedHTML {
    const tempEl = document.createElement('div');
    tempEl.innerHTML = this.i18nAdvanced(
        'multideviceEnableWifiSyncV1ItemSummary', {attrs: ['id']});

    tempEl.childNodes.forEach((node, index) => {
      // Text nodes should be aria-hidden
      if (node.nodeType === Node.TEXT_NODE) {
        const spanNode = document.createElement('span');
        spanNode.textContent = node.textContent;
        spanNode.id = `id${index}`;
        spanNode.setAttribute('aria-hidden', 'true');
        node.replaceWith(spanNode);
      }
    });

    const chromeSyncLink =
        castExists(tempEl.querySelector<HTMLAnchorElement>('#chromeSyncLink'));
    const learnMoreLink =
        castExists(tempEl.querySelector<HTMLAnchorElement>('#learnMoreLink'));

    chromeSyncLink.setAttribute(
        'aria-label', this.i18n('multideviceWifiSyncChromeSyncLabel'));
    learnMoreLink.setAttribute(
        'aria-label', this.i18n('multideviceWifiSyncLearnMoreLabel'));
    chromeSyncLink.href = '#';

    return sanitizeInnerHtml(tempEl.innerHTML, {
      tags: ['span', 'a'],
      attrs: ['id', 'aria-label', 'aria-hidden', 'target', 'href'],
    });
  }

  override connectedCallback(): void {
    super.connectedCallback();

    const chromeSyncLink = this.shadowRoot!.querySelector('#chromeSyncLink');
    if (chromeSyncLink) {
      chromeSyncLink.addEventListener(
          'click', this.onChromeSyncLinkClick_.bind(this));
    }
  }

  private onChromeSyncLinkClick_(event: Event): void {
    event.preventDefault();
    Router.getInstance().navigateTo(routes.OS_SYNC);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [SettingsMultideviceWifiSyncDisabledLinkElement.is]:
        SettingsMultideviceWifiSyncDisabledLinkElement;
  }
}

customElements.define(
    SettingsMultideviceWifiSyncDisabledLinkElement.is,
    SettingsMultideviceWifiSyncDisabledLinkElement);