HowTo कॉम्पोनेंट – कैसे करें-चेकबॉक्स

<howto-checkbox>, फ़ॉर्म में बूलियन विकल्प को दिखाता है. चेकबॉक्स का सबसे आम टाइप, ड्यूअल-टाइप होता है. इससे उपयोगकर्ता, दो विकल्पों -- सही का निशान लगाने और हटाने -- के बीच टॉगल कर सकता है.

एलिमेंट पहली बार बनने पर, role="checkbox" और tabindex="0" एट्रिब्यूट अपने-आप लागू होने की कोशिश करते हैं. role एट्रिब्यूट की मदद से, स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी, उपयोगकर्ता को बताती है कि यह किस तरह का कंट्रोल है. tabindex एट्रिब्यूट, एलिमेंट को टैब ऑर्डर में शामिल करता है. इससे, कीबोर्ड से उस पर फ़ोकस किया जा सकता है और उसे इस्तेमाल किया जा सकता है. इन दोनों विषयों के बारे में ज़्यादा जानने के लिए, एआरआईए क्या कर सकता है? और tabindex का इस्तेमाल करना लेख पढ़ें.

चेकबॉक्स पर सही का निशान लगाने पर, यह checked बूलियन एट्रिब्यूट जोड़ता है. साथ ही, उससे जुड़ी checked प्रॉपर्टी को true पर सेट करता है. इसके अलावा, एलिमेंट अपनी स्थिति के आधार पर, aria-checked एट्रिब्यूट को "true" या "false" पर सेट करता है. माउस या स्पेस बार की मदद से चेकबॉक्स पर क्लिक करने पर, चुने गए इन राज्यों की स्थिति टॉगल हो जाती है.

चेकबॉक्स में disabled स्टेटस भी काम करता है. अगर disabled प्रॉपर्टी को 'सही है' पर सेट किया गया है या 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,
  };

innerHTML का इस्तेमाल करने के मुकाबले, <template> एलिमेंट से कॉन्टेंट को क्लोन करने की परफ़ॉर्मेंस बेहतर होती है. इसकी वजह यह है कि इससे एचटीएमएल को पार्स करने में लगने वाले समय की बचत होती है.

  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'];
    }

नया इंस्टेंस बनने पर, एलिमेंट का कन्स्ट्रक्टर चलता है. इंस्टेंस, एचटीएमएल को पार्स करके, 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(), एलिमेंट को डीओएम से हटाने पर ट्रिगर होता है. यह क्लीन अप करने के लिए एक अच्छी जगह है. जैसे, रेफ़रंस रिलीज़ करना और इवेंट के लिसनर हटाना.

    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');
    }

observedAttributes कलेक्शन में मौजूद किसी भी एट्रिब्यूट में बदलाव होने पर, attributeChangedCallback() को कॉल किया जाता है. 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(), checked setter को कॉल करता है और उसकी स्थिति बदल देता है. _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);
})();