HowTo Components – практический флажок

Ewa Gasperowicz
X
Роб Додсон
Сурма

Краткое содержание

<howto-checkbox> представляет собой булеву опцию в форме. Наиболее распространенный тип флажка — это двойной тип, который позволяет пользователю переключаться между двумя вариантами — отмеченным и неотмеченным.

Элемент пытается самостоятельно применить атрибуты role="checkbox" и tabindex="0" при первом создании. Атрибут role помогает вспомогательным технологиям, таким как программа чтения с экрана, сообщать пользователю, какой это тип элемента управления. Атрибут tabindex выбирает элемент в порядке табуляции, делая его фокусируемым с клавиатуры и управляемым. Чтобы узнать больше об этих двух темах, ознакомьтесь с разделами Что может делать ARIA? и Использование tabindex .

Когда флажок отмечен, он добавляет атрибут checked boolean и устанавливает соответствующее свойство checked в true . Кроме того, элемент устанавливает атрибут aria-checked в значение "true" или "false" в зависимости от его состояния. Щелчок по флажку мышью или пробелом переключает эти отмеченные состояния.

Флажок также поддерживает disabled состояние. Если свойство disabled установлено в true или применен атрибут disabled , флажок устанавливает aria-disabled="true" , ​​удаляет атрибут tabindex и возвращает фокус документу, если флажок является текущим activeElement .

Флажок связан с элементом howto-label чтобы обеспечить ему доступное имя .

Ссылка

Демо

Посмотреть живую демонстрацию на GitHub

Пример использования 

<style>
  howto-checkbox {
    vertical-align: middle;
  }
  howto-label {
    vertical-align: middle;
    display: inline-block;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 20px;
    margin-left: 8px;
  }
</style>

<howto-checkbox id="join-checkbox"></howto-checkbox>
<howto-label for="join-checkbox">Join Newsletter</howto-label>

Код 

(function() {

Определите коды клавиш, которые помогут обрабатывать события клавиатуры.

  const KEYCODE = {
    SPACE: 32,
  };

Клонирование содержимого из элемента <template> более производительно, чем использование innerHTML, поскольку позволяет избежать дополнительных затрат на анализ HTML.

  const template = document.createElement('template');

  template.innerHTML = `
    <style>
      :host {
        display: inline-block;
        background: url('../images/unchecked-checkbox.svg') no-repeat;
        background-size: contain;
        width: 24px;
        height: 24px;
      }
      :host([hidden]) {
        display: none;
      }
      :host([checked]) {
        background: url('../images/checked-checkbox.svg') no-repeat;
        background-size: contain;
      }
      :host([disabled]) {
        background:
          url('../images/unchecked-checkbox-disabled.svg') no-repeat;
        background-size: contain;
      }
      :host([checked][disabled]) {
        background:
          url('../images/checked-checkbox-disabled.svg') no-repeat;
        background-size: contain;
      }
    </style>
  `;


  class HowToCheckbox extends HTMLElement {
    static get observedAttributes() {
      return ['checked', 'disabled'];
    }

Конструктор элемента запускается каждый раз при создании нового экземпляра. Экземпляры создаются либо путем разбора HTML, вызова document.createElement('howto-checkbox'), либо вызова new HowToCheckbox(); Конструктор — хорошее место для создания теневого DOM, хотя следует избегать касания любых атрибутов или дочерних элементов светлого DOM, поскольку они могут быть еще недоступны.

    constructor() {
      super();
      this.attachShadow({mode: 'open'});
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }

connectedCallback() срабатывает, когда элемент вставляется в DOM. Это хорошее место для установки начальной role , tabindex , внутреннего состояния и установки прослушивателей событий.

    connectedCallback() {
      if (!this.hasAttribute('role'))
        this.setAttribute('role', 'checkbox');
      if (!this.hasAttribute('tabindex'))
        this.setAttribute('tabindex', 0);

Пользователь может задать свойство экземпляра элемента до того, как его прототип будет подключен к этому классу. Метод _upgradeProperty() проверит наличие любых свойств экземпляра и пропустит их через соответствующие сеттеры класса. Подробнее см. в разделе ленивые свойства .

      this._upgradeProperty('checked');
      this._upgradeProperty('disabled');

      this.addEventListener('keyup', this._onKeyUp);
      this.addEventListener('click', this._onClick);
    }

    _upgradeProperty(prop) {
      if (this.hasOwnProperty(prop)) {
        let value = this[prop];
        delete this[prop];
        this[prop] = value;
      }
    }

disconnectedCallback() срабатывает, когда элемент удаляется из DOM. Это хорошее место для выполнения работы по очистке, например, освобождения ссылок и удаления слушателей событий.

    disconnectedCallback() {
      this.removeEventListener('keyup', this._onKeyUp);
      this.removeEventListener('click', this._onClick);
    }

Свойства и соответствующие им атрибуты должны отражать друг друга. Сеттер свойств для проверенных обрабатывает значения истинности/ложи и отражает их в состоянии атрибута. Подробнее см. в разделе « Избегать повторного входа» .

    set checked(value) {
      const isChecked = Boolean(value);
      if (isChecked)
        this.setAttribute('checked', '');
      else
        this.removeAttribute('checked');
    }

    get checked() {
      return this.hasAttribute('checked');
    }

    set disabled(value) {
      const isDisabled = Boolean(value);
      if (isDisabled)
        this.setAttribute('disabled', '');
      else
        this.removeAttribute('disabled');
    }

    get disabled() {
      return this.hasAttribute('disabled');
    }

attributeChangedCallback() вызывается, когда любой из атрибутов в массиве observedAttributes изменяется. Это хорошее место для обработки побочных эффектов, таких как установка атрибутов ARIA. 

    attributeChangedCallback(name, oldValue, newValue) {
      const hasValue = newValue !== null;
      switch (name) {
        case 'checked':
          this.setAttribute('aria-checked', hasValue);
          break;
        case 'disabled':
          this.setAttribute('aria-disabled', hasValue);

Атрибут tabindex не предоставляет способ полностью убрать фокусируемость с элемента. Элементы с tabindex=-1 по-прежнему могут быть сфокусированы с помощью мыши или вызова focus() . Чтобы убедиться, что элемент отключен и не может быть сфокусирован, удалите атрибут tabindex . 

          if (hasValue) {
            this.removeAttribute('tabindex');

Если в данный момент фокус находится на этом элементе, снимите с него фокус, вызвав метод HTMLElement.blur() 

            this.blur();
          } else {
            this.setAttribute('tabindex', '0');
          }
          break;
      }
    }

    _onKeyUp(event) {

Не обрабатывайте сочетания клавиш-модификаторов, обычно используемые вспомогательными технологиями. 

      if (event.altKey)
        return;

      switch (event.keyCode) {
        case KEYCODE.SPACE:
          event.preventDefault();
          this._toggleChecked();
          break;

Любое другое нажатие клавиши игнорируется и передается обратно в браузер. 

        default:
          return;
      }
    }

    _onClick(event) {
      this._toggleChecked();
    }

_toggleChecked() вызывает отмеченный сеттер и меняет его состояние. Поскольку _toggleChecked() вызывается только действием пользователя, он также отправит событие изменения. Это событие всплывает, чтобы имитировать собственное поведение <input type=checkbox> . 

    _toggleChecked() {
      if (this.disabled)
        return;
      this.checked = !this.checked;
      this.dispatchEvent(new CustomEvent('change', {
        detail: {
          checked: this.checked,
        },
        bubbles: true,
      }));
    }
  }

  customElements.define('howto-checkbox', HowToCheckbox);
})();