概要
<howto-checkbox>
は、フォームのブール値のオプションを表します。最も一般的な種類は
チェックボックスはデュアルタイプで、ユーザーは 2 つの
チェックボックスがオンになっています
要素は、属性 role="checkbox"
と属性の自己適用を試みます。
最初に作成された時点では tabindex="0"
です。role
属性は、
スクリーン リーダーなどの技術により、ユーザーがこの機能でどのような操作を行えるかが伝わります。
tabindex
属性で要素をタブオーダーにオプトインし、キーボードにする
焦点を絞って操作できるようにしますこの 2 つのトピックについて詳しくは、
ARIA でできることと tabindex を使用するをご覧ください。
チェックボックスをオンにすると、checked
ブール値属性が追加され、
対応する checked
プロパティを true
に設定します。さらに、この要素では
aria-checked
属性は、"true"
または "false"
のいずれかに設定されます。
あります。マウスまたはスペースバーでチェックボックスをクリックすると、
チェックされた状態を表します。
このチェックボックスは disabled
状態もサポートしています。disabled
プロパティまたは
true に設定されているか、disabled
属性が適用されている場合、チェックボックスがオンになります
aria-disabled="true"
。tabindex
属性を削除し、フォーカスを返します。
チェックボックスが現在の activeElement
の場合は、ドキュメントに追加します。
このチェックボックスは、howto-label
要素と組み合わせて、
アクセス可能な名前。
リファレンス
デモ
使用例
<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>
要素からのコンテンツのクローンを作成すると、追加の HTML 解析コストが回避されるため、innerHTML を使用するよりもパフォーマンスが向上します。
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(); を呼び出します。コンストラクタは Shadow DOM を作成するのに適していますが、属性や Light 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);
}
プロパティとそれに対応する属性は、互いにミラーリングする必要があります。Checks のプロパティ セッターは、truthy と falsy の値を処理し、それらを属性の状態に反映させます。詳しくは、再入荷の回避セクションをご覧ください。
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()
は、observAttributes 配列内の属性のいずれかが変更されると呼び出されます。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);
})();