HowTo Components – howto-চেকবক্স

Ewa Gasperowicz
X
রব ডডসন
সুরমা

সারসংক্ষেপ

একটি <howto-checkbox> একটি ফর্মের একটি বুলিয়ান বিকল্প উপস্থাপন করে। চেকবক্সের সবচেয়ে সাধারণ ধরনের হল একটি ডুয়াল-টাইপ যা ব্যবহারকারীকে দুটি পছন্দের মধ্যে টগল করতে দেয় -- চেক করা এবং আনচেক করা।

উপাদানটি প্রথম তৈরি করার সময় role="checkbox" এবং tabindex="0" বৈশিষ্ট্যগুলি নিজে প্রয়োগ করার চেষ্টা করে৷ role বৈশিষ্ট্য একটি স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি ব্যবহারকারীকে বলতে সাহায্য করে যে এটি কি ধরনের নিয়ন্ত্রণ। tabindex অ্যাট্রিবিউট উপাদানটিকে ট্যাব অর্ডারে বেছে নেয়, এটিকে কীবোর্ড ফোকাসযোগ্য এবং অপারেবল করে তোলে। এই দুটি বিষয় সম্পর্কে আরও জানতে, ARIA কী করতে পারে তা দেখুন? এবং ট্যাবিনডেক্স ব্যবহার করে ।

যখন চেকবক্সটি চেক করা হয়, এটি একটি checked বুলিয়ান অ্যাট্রিবিউট যোগ করে এবং একটি সংশ্লিষ্ট checked সম্পত্তি true এ সেট করে। উপরন্তু, উপাদানটি তার অবস্থার উপর নির্ভর করে "true" বা "false" তে একটি aria-checked বৈশিষ্ট্য সেট করে। একটি মাউস, বা স্পেস বার দিয়ে চেকবক্সে ক্লিক করলে, এই চেক করা অবস্থাগুলি টগল করে।

চেকবক্সটি একটি 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,
  };

একটি <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') কল করে, অথবা নতুন HowToCheckbox(); কনস্ট্রাক্টর হল ছায়া DOM তৈরি করার জন্য একটি ভাল জায়গা, যদিও আপনার কোনো বৈশিষ্ট্য বা হালকা DOM শিশুদের স্পর্শ করা এড়ানো উচিত কারণ তারা এখনও উপলব্ধ নাও হতে পারে।

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

যখন এলিমেন্টটি DOM-এ ঢোকানো হয় তখন connectedCallback() ফায়ার হয়। এটি প্রাথমিক 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');
    }

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() চেক করা সেটারকে কল করে এবং এর অবস্থা উল্টে দেয়। কারণ _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);
})();