Focusable Is Not Selectable: A Keyboard Focus Model for Date Grids
Open almost any date picker, press Tab until you reach the grid, and focus lands on a day. Which day it can land on, and which days the arrow keys can reach, comes down to one small decision that most implementations make without noticing: can an unavailable date receive focus?
The intuitive answer is no. A disabled date is disabled, so you render it as
<button disabled>, the browser skips it, and you move on. It looks right in
a demo. It stops being right as soon as a real product starts disabling
dates: weekends, public holidays, fully booked days, a minimum notice period,
a cut-off time.
This post describes the model we use in the CoreUI v6 Calendar, and why: a cell’s focusability depends only on the calendar’s limits. Everything else decides only whether the cell can be selected.