:focus-visible แทน :focus สำหรับ keyboard accessibility

ปัญหาเดิม: ลบ :focus outline ออกเพราะดูไม่สวยเวลา click แต่ทำให้ keyboard user มองไม่เห็นว่า focus อยู่ที่ไหน

:focus-visible แก้ปัญหานี้ได้:

/* ❌ แบบเก่า — ทำลาย keyboard navigation */
button:focus { outline: none; }

/* ✅ แบบใหม่ — แสดงเฉพาะเมื่อ keyboard */
button:focus-visible {
  outline: 3px solid #00d4ff;
  outline-offset: 2px;
}

browser แสดง :focus-visible เมื่อ:

• ผู้ใช้ navigate ด้วย Tab หรือ arrow keys
• focus จาก keyboard shortcut

ไม่ แสดงเมื่อ click ด้วย mouse — ทำให้ไม่รกตา แต่ยังรองรับ keyboard user ครบถ้วน

browser support ครอบคลุมทุก browser หลักแล้ว ใช้ได้เลยโดยไม่ต้อง polyfill