สรุป
<howto-checkbox>
แสดงตัวเลือกบูลีนในแบบฟอร์ม ประเภทของช่องทำเครื่องหมายที่พบบ่อยที่สุดคือแบบ 2 ประเภท ซึ่งผู้ใช้สามารถสลับระหว่าง 2 ตัวเลือก คือเลือกและยกเลิกการเลือก
องค์ประกอบพยายามใช้แอตทริบิวต์ role="checkbox"
และ tabindex="0"
ด้วยตนเองเมื่อสร้างขึ้นครั้งแรก แอตทริบิวต์ role
ช่วยให้เทคโนโลยีความช่วยเหลือพิเศษ
เช่น โปรแกรมอ่านหน้าจอ บอกผู้ใช้ว่าการควบคุมนี้เป็นการควบคุมประเภทใด
แอตทริบิวต์ tabindex
จะเลือกองค์ประกอบตามลำดับแท็บ ซึ่งทำให้แป้นพิมพ์โฟกัสได้และทำงานได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับทั้ง 2 หัวข้อได้ที่ ARIA ทำอะไรได้บ้างและการใช้ Tabindex
เมื่อเลือกช่องทำเครื่องหมายแล้ว ระบบจะเพิ่มแอตทริบิวต์บูลีน checked
และตั้งค่าพร็อพเพอร์ตี้ checked
ที่สอดคล้องกันเป็น true
นอกจากนี้ องค์ประกอบยังตั้งค่าแอตทริบิวต์ aria-checked
เป็น "true"
หรือ "false"
ขึ้นอยู่กับสถานะ การคลิกช่องทำเครื่องหมายด้วยเมาส์หรือแป้นเว้นวรรคจะเป็นการสลับสถานะที่เลือกไว้เหล่านี้
ช่องทำเครื่องหมายนี้ยังรองรับสถานะ disabled
ด้วย หากตั้งค่าพร็อพเพอร์ตี้ disabled
เป็น "จริง" หรือใช้แอตทริบิวต์ disabled
ช่องทำเครื่องหมายจะตั้งค่า aria-disabled="true"
นำแอตทริบิวต์ tabindex
ออก และส่งคืนโฟกัสไปยังเอกสารหากช่องทำเครื่องหมายเป็น activeElement
ปัจจุบัน
ช่องทําเครื่องหมายจะจับคู่กับองค์ประกอบ howto-label
เพื่อให้มีชื่อที่เข้าถึงได้
ข้อมูลอ้างอิง
- วิธีการ: คอมโพเนนต์ใน GitHub
- รูปแบบช่องทำเครื่องหมายในแนวทางปฏิบัติในการเขียน ARIA 1.1
- ARIA ทำอะไรได้บ้าง
- การใช้ Tabindex
การสาธิต
ตัวอย่างการใช้
<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>
มีประสิทธิภาพมากกว่าการใช้ inlineHTML เนื่องจากช่วยลดค่าใช้จ่ายในการแยกวิเคราะห์ 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 ใหม่) ตัวสร้างเป็นตำแหน่งที่ดีในการสร้าง Shadow DOM แต่คุณควรหลีกเลี่ยงการสัมผัสแอตทริบิวต์หรือย่อย Light DOM เนื่องจากอาจยังไม่พร้อมใช้งาน
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
connectedCallback()
เริ่มทำงานเมื่อมีการแทรกองค์ประกอบใน DOM ซึ่งเป็นที่ที่ควรตั้งค่า role
, tabindex
, สถานะภายใน และติดตั้ง Listener เหตุการณ์
connectedCallback() {
if (!this.hasAttribute('role'))
this.setAttribute('role', 'checkbox');
if (!this.hasAttribute('tabindex'))
this.setAttribute('tabindex', 0);
ผู้ใช้อาจตั้งค่าพร็อพเพอร์ตี้ในอินสแตนซ์ขององค์ประกอบก่อนที่จะมีการเชื่อมต่อต้นแบบกับคลาสนี้ได้ เมธอด _upgradeProperty()
จะตรวจสอบพร็อพเพอร์ตี้อินสแตนซ์ทั้งหมดและเรียกใช้ผ่านตัวตั้งค่าคลาสที่เหมาะสม ดูรายละเอียดเพิ่มเติมได้ที่ส่วนพร็อพเพอร์ตี้แบบ Lazy Loading
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 ซึ่งเป็นที่ที่ดีในการทำงาน เช่น การเผยแพร่การอ้างอิงและนำ Listener เหตุการณ์ออก
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()
เมื่อแอตทริบิวต์ใดๆ ในอาร์เรย์ visibleAttributes มีการเปลี่ยนแปลง เหมาะกับการจัดการผลข้างเคียง เช่น การตั้งค่าแอตทริบิวต์ 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);
})();