Support for natural tabbing experience

[mkelandis]

This came up for me while testing ISSUE#1

Currently when you tab into the date picker, the entire picker is selected and you can start left-right-up-down navigating through dates but there is no visual clue that a user could start doing this. Then the tab moves to the year, and then month.

Proposal:
When you tab into the picker:

1. the year becomes active first - they can select the year with keyboard (up/down - spacebar to select)
2. next tab is the month (similar experience to date)
3. next tab is into the calendarDay section - the default day gets highlighted and they can tab/shift-tab forwards and backwards through the days (or use the arrow keys as current). In addition to clicking on the day, the user can use the spacebar to select the day (just like a checkbox or radio button)

I will throw together an experimental PR

[probablykasper]

The reason it's focusing the entire thing is because you can use the arrow keys to choose dates, and shift/alt + arrow keys to switch month/year, so really it's for switching everything. I wouldn't really want three tabs to get to that mode

[mkelandis]

If there is just one tab focus for the entire picker, then we should consider removing the month & year dropdowns from the tabIndex and have a single tab focus that relies on the keyboard controls that you've defined. Do you think users will intuit that they can use the shift key to change the month/year controls while in the day selection zone?

This is the alternative approach I am lobbying for, which gives each of those controls separate focus, with natural arrow key navigation (ditched the tabbing individual day idea in the original description)
https://github.com/probablykasper/date-picker-svelte/pull/11/files

[probablykasper]

I did consider that, and I really like the idea of having just one tabbable element, but no I don't think it's intuitive enough (though I'd love to be wrong)

[mkelandis]

Can you take a look at the draft PR when you have a chance - I added a tabIndexed div for the calendarDay section and left the shift-functionality in place for that area of the widget. here is the the happy path for tabbing:

• tab into the month dropdown - use arrows to select a month, you cannot change the year or day value from this focus
• tab into the year dropdown - use arrows to select the year, you cannot change the month or day value from this focus
• tab into the calendar day grid - use arrows to select the calendar day, power users can use the shift functionality that you built to also change the month and year (up/down for year, left/right for month)

^-- this should provide intuitive keyboard support for users who haven't encountered the widget before.

https://github.com/probablykasper/date-picker-svelte/pull/11/files

[probablykasper]

Still not sure about this, but sure I'll check it out

[probablykasper]

Thoughts on an outline like this?

This could be a potential way to go about it too:

[probablykasper]

I think I'll keep it the way it is. The two ideas above get confusing when you end up tabbing to a previous element

[probablykasper]

I noticed Google Calendar actually doesn't tab into the calendar at all. Maybe that would be a good option?