การเข้าถึง

ส่วนประกอบของ Picker ทั้งหมดมาพร้อมกับการสนับสนุนการเข้าถึงในตัว การนำทางด้วยคีย์บอร์ด, แอตทริบิวต์ ARIA และการจัดการโฟกัสทำงานได้ทันทีในทุกรูปแบบ — Styled, Tailwind v3/v4 และ Headless

ไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติมสำหรับการใช้งานมาตรฐาน หน้านี้จะบันทึกสิ่งที่รวมอยู่เพื่อให้คุณสามารถตรวจสอบ, ขยาย หรือทำซ้ำรูปแบบใน UI ที่กำหนดเองได้

การนำทางด้วยคีย์บอร์ด

ตัวเลือกปฏิทิน

คีย์การกระทำ
ArrowLeftเลื่อนโฟกัสไปยังวันก่อนหน้า
ArrowRightเลื่อนโฟกัสไปยังวันถัดไป
ArrowUpเลื่อนโฟกัสไปยังสัปดาห์ก่อนหน้า (วันเดียวกันของสัปดาห์)
ArrowDownเลื่อนโฟกัสไปยังสัปดาห์ถัดไป (วันเดียวกันของสัปดาห์)
Enter / Spaceเลือกวันที่โฟกัสอยู่
Escapeยกเลิกการเปลี่ยนแปลงและปิดป๊อปอัป
Tabย้ายไปยังองค์ประกอบที่สามารถโฟกัสได้ถัดไป (ค่าเริ่มต้นของเบราว์เซอร์)

การข้ามวันที่ถูกปิดใช้งาน: เมื่อนำทางด้วยปุ่มลูกศร วันที่ถูกปิดใช้งานจะถูกข้ามโดยอัตโนมัติ ตัวเลือกจะค้นหาวันที่เปิดใช้งานถัดไปในทิศทางการเคลื่อนไหวได้ถึง 365 วัน

การเลื่อนเดือนอัตโนมัติ: เมื่อโฟกัสของคีย์บอร์ดย้ายไปยังวันในเดือนอื่น มุมมองปฏิทินจะอัปเดตเพื่อแสดงเดือนนั้น

ตัวเลือกเวลา

คีย์การกระทำ
Escapeยกเลิกการเปลี่ยนแปลงและปิดป๊อปอัป

การเลือกเวลาใช้อินเทอร์เฟซแบบล้อเลื่อนพร้อมการโต้ตอบด้วยการคลิก/สัมผัส คอลัมน์เลื่อนใช้ scroll-snap เพื่อการเลือกค่าที่แม่นยำ

แอตทริบิวต์ ARIA

องค์ประกอบที่โต้ตอบได้ทุกอย่างมีบทบาทและแอตทริบิวต์ ARIA ที่เหมาะสม:

ป๊อปอัปและคอนเทนเนอร์

องค์ประกอบแอตทริบิวต์ค่า
คอนเทนเนอร์ป๊อปอัปrole"dialog"
คอนเทนเนอร์อินไลน์role"group"
คอนเทนเนอร์aria-labelข้อความตัวยึดจาก locale
คอนเทนเนอร์aria-activedescendantID ของเซลล์วันที่กำลังโฟกัสอยู่

ปุ่มทริกเกอร์

แอตทริบิวต์ค่า
aria-expandedtrue เมื่อป๊อปอัปเปิด
aria-haspopup"dialog"

ตารางปฏิทิน

องค์ประกอบแอตทริบิวต์ค่า
ตัวห่อตารางrole"grid"
แถวสัปดาห์role"row"
เซลล์หัวข้อวันในสัปดาห์role"columnheader"
เซลล์วันrole"gridcell"
เซลล์วันaria-selectedtrue เมื่อถูกเลือก
เซลล์วันaria-current"date" เมื่อเซลล์เป็นวันนี้
เซลล์วันaria-labelสตริงวันที่จัดรูปแบบ (เช่น "2026-03-04")
เซลล์วันdisabledตั้งค่าในวันที่ปิดใช้งาน (แอตทริบิวต์ HTML ดั้งเดิม)

การนำทางและดรอปดาวน์

องค์ประกอบแอตทริบิวต์ค่า
ปุ่มเดือนก่อนหน้าaria-label"Previous month" (จาก locale.prevMonthLabel)
ปุ่มเดือนถัดไปaria-label"Next month" (จาก locale.nextMonthLabel)
ดรอปดาวน์เดือนaria-label"Select month" (จาก locale.selectMonthLabel)
ดรอปดาวน์ปีaria-label"Select year" (จาก locale.selectYearLabel)

คอลัมน์เวลา

องค์ประกอบแอตทริบิวต์ค่า
คอลัมน์ชั่วโมงrole"listbox"
คอลัมน์ชั่วโมงaria-orientation"vertical"
คอลัมน์ชั่วโมงaria-label"Hours" (จาก locale.hourLabel)
คอลัมน์นาทีrole"listbox"
คอลัมน์นาทีaria-orientation"vertical"
คอลัมน์นาทีaria-label"Minutes" (จาก locale.minuteLabel)
คอลัมน์วินาทีrole"listbox"
คอลัมน์วินาทีaria-orientation"vertical"
คอลัมน์วินาทีaria-label"Seconds" (จาก locale.secondLabel)
รายการเวลาrole"option" (รายการเสริม: "presentation")
รายการเวลาaria-selectedtrue เมื่อรายการเป็นค่าปัจจุบัน
ตัวสลับช่วงเวลาaria-labelช่วงเวลาปัจจุบัน + ”, toggle AM/PM”
ปุ่มล้างaria-label"Clear" (จาก locale.clear)

สตริงป้ายกำกับทั้งหมดสามารถปรับแต่งได้ผ่าน ระบบ locale

การจัดการโฟกัส

Roving Tabindex

ตารางปฏิทินใช้รูปแบบ roving tabindex:

  • เฉพาะเซลล์วันที่กำลังโฟกัสอยู่เท่านั้นที่มี tabIndex={0} (สามารถแท็บได้)
  • เซลล์วันอื่นๆ ทั้งหมดมี tabIndex={-1} (ไม่สามารถแท็บได้ แต่สามารถโฟกัสได้ผ่านปุ่มลูกศร)
  • ซึ่งหมายความว่า Tab จะย้ายโฟกัสออกจากตารางปฏิทิน (ไปยังส่วนควบคุมถัดไป) และปุ่มลูกศรจะย้ายโฟกัสภายในตาราง

การดักจับโฟกัสของป๊อปอัป

โหมดป๊อปอัปใช้ FloatingFocusManager จาก @floating-ui/react เพื่อ:

  • ดักจับโฟกัสภายในป๊อปอัปขณะเปิดอยู่
  • คืนโฟกัสไปยังปุ่มทริกเกอร์เมื่อป๊อปอัปปิด
  • ป้องกันการแท็บออกจากป๊อปอัปไปยังเนื้อหาพื้นหลัง

องค์ประกอบดั้งเดิม

การเลือกเดือนและปีใช้องค์ประกอบ <select> ดั้งเดิม ซึ่งสามารถเข้าถึงได้ด้วยคีย์บอร์ดโดยธรรมชาติ เซลล์วันใช้องค์ประกอบ <button> ดั้งเดิมพร้อมสถานะปิดใช้งานที่เหมาะสม

การ