HowTo Bileşenleri – nasıl yapılır onay kutusu

Özet #

A &LThowto-checkbox> bir formda bir boole seçeneğini temsil eder. En yaygın onay kutusu türü, kullanıcının işaretli ve işaretsiz olmak üzere iki seçenek arasında geçiş yapmasına izin veren ikili tiptir.

Öğe, nitelikleri kendi kendine uygulamaya çalışır role="checkbox" Ve tabindex="0" ilk oluşturulduğunda. bu role öznitelik, ekran okuyucu gibi yardımcı teknolojinin kullanıcıya bunun ne tür bir denetim olduğunu söylemesine yardımcı olur. bu tabindex özniteliği, öğeyi sekme sırasına göre seçerek klavyede odaklanabilir ve çalıştırılabilir hale getirir. Bu iki konu hakkında daha fazla bilgi edinmek için ARIA neler yapabilir? ve tabindex’i kullanma.

Onay kutusu işaretlendiğinde, checked boolean özniteliği ve karşılık gelen bir değer ayarlar. checked mülkiyet true. Ek olarak, öğe bir aria-checked herhangi birine öznitelik "true" veya "false", durumuna bağlı olarak. Fare veya boşluk çubuğu ile onay kutusuna tıklamak, bu kontrol edilen durumlar arasında geçiş yapar.

Onay kutusu ayrıca bir disabled durum. eğer ya disabled özellik true olarak ayarlandı veya disabled öznitelik uygulanır, onay kutusu ayarlanır aria-disabled="true"kaldırır tabindex özniteliktir ve onay kutusu geçerliyse odağı belgeye döndürür. activeElement.

Onay kutusu bir howto-label sahip olmasını sağlamak için eleman erişilebilir ad.

Referans #

Demo #

GitHub’da canlı demoyu görüntüleyin

Örnek kullanım #

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;
}
&LT/style>
howto-checkbox id="join-checkbox">&LT/howto-checkbox>
howto-label for="join-checkbox">Join Newsletter&LT/howto-label>

kod #

(function() {

Klavye olaylarının işlenmesine yardımcı olacak tuş kodlarını tanımlayın.

  const KEYCODE = {
SPACE: 32,
};

İçeriği klonlama &LTtemplate> öğesi, ek HTML ayrıştırma maliyetlerinden kaçındığı için innerHTML kullanmaktan daha performanslıdır.

  const template = document.createElement('template');
template.innerHTML = `
&LTstyle>
: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;
}
&LT/style>
`;
class HowToCheckbox extends HTMLElement {
static get observedAttributes() {
return ['checked', 'disabled'];
}

Öğenin yapıcısı, yeni bir örnek oluşturulduğunda çalıştırılır. Örnekler, HTML ayrıştırılarak, Document.createElement(‘howto-checkbox’) çağrılarak veya new HowToCheckbox(); çağrılarak oluşturulur. Yapıcı, gölge DOM oluşturmak için iyi bir yerdir, ancak henüz mevcut olmayabilecekleri için herhangi bir özniteliğe veya hafif DOM alt öğelerine dokunmaktan kaçınmalısınız.

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

connectedCallback() öğe DOM’a eklendiğinde tetiklenir. Başlangıcı ayarlamak için iyi bir yer role, tabindexdahili durum ve yükleme olay dinleyicileri.

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

Bir kullanıcı, prototipi bu sınıfa bağlanmadan önce bir öğe örneğine bir özellik ayarlayabilir. bu _upgradeProperty() yöntemi, herhangi bir örnek özelliğini kontrol edecek ve bunları uygun sınıf ayarlayıcıları aracılığıyla çalıştıracaktır. Daha fazla ayrıntı için tembel özellikler bölümüne bakın.

      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() öğe DOM’dan kaldırıldığında tetiklenir. Referansları serbest bırakmak ve olay dinleyicilerini kaldırmak gibi temizlik işleri yapmak için iyi bir yerdir.

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

Özellikler ve bunlara karşılık gelen nitelikler birbirini yansıtmalıdır. Check için özellik ayarlayıcı, doğru/yanlış değerleri işler ve bunları özniteliğin durumuna yansıtır. Daha fazla ayrıntı için yeniden girişten kaçınma bölümüne bakın.

    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() gözlenenAttributes dizisindeki özniteliklerden herhangi biri değiştirildiğinde çağrılır. ARIA niteliklerini ayarlamak gibi yan etkileri işlemek için iyi bir yerdir.

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

bu tabindex niteliği, bir öğeden odaklanabilirliği tamamen kaldırmanın bir yolunu sağlamaz. Elemanlar ile tabindex=-1 hala bir fare ile veya arayarak odaklanabilir focus(). Bir öğenin devre dışı bırakıldığından ve odaklanılamadığından emin olmak için, öğeyi kaldırın. tabindex bağlanmak.

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

Odak şu anda bu öğedeyse, öğesini çağırarak odağı bozun. HTMLElement.blur() yöntem

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

Genellikle yardımcı teknoloji tarafından kullanılan değiştirici kısayolları kullanmayın.

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

Basılan diğer tuşlar yoksayılır ve tarayıcıya geri iletilir.

        default:
return;
}
}
_onClick(event) {
this._toggleChecked();
}

_toggleChecked() kontrol edilen ayarlayıcıyı çağırır ve durumunu çevirir. Çünkü _toggleChecked() yalnızca bir kullanıcı eyleminden kaynaklanır, ayrıca bir change olayı da gönderir. Bu olay, yerel davranışı taklit etmek için kabarcıklar oluşturur. &LTinput 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);
})();