[lamplightdev]

I needed a progressively enhanced, lightweight date and time picker that functioned and looked consistent across all browsers, and that worked with or without a framework. The difference in support (no native picker on desktop Safari) style and behaviour of native pickers rule them out, so web components seemed an obvious choice. The existing web component solutions tended to be too heavyweight, so Aeon was born:

- No dependencies - a standalone vanilla JS web component

- Lightweight - 5kb gzipped

- Use anywhere - use standalone or directly in your framework of choice with no wrappers

- Progressive enhancement - if the code fails to load, fallbacks to a native picker or a simple text box

- Accessible - works with mouse/touch/keyboard/screen readers and behaves as a native form element

- Locale aware - uses the browser locale language and date format by default

- Themeable - pass in custom colour schemes

- Browser support - works in all modern browsers on all devices (and IE11 - with polyfills)

[zichy]

Good job so far, it feels very lightweight and simple. It works well with different input devices, but the accessibility for screen readers could be improved:

* The first day immediately gets focused when opening the datepicker. It might be a bit confusing to just hear a number.

* There's enough space to spell the months in full.

* Use semantic abbrevations for weekdays, e.g. `<abbr title="Monday">Mo</abbr>`.

* Use `label`s which refer to the corresponding `select`.

* Use `table` instead of `div`s for the calendar view.

* Use (hidden) text instead of the `title` attribute in buttons.

Furthermore:

* Try using more unique classes for your elements, e.g. '.aeon-datepicker__select' instead of '.select'.

* `cursor: pointer` for buttons would be helpful to see how large the click area is.

[lamplightdev]

Thanks for these pointers, very useful indeed - I'll look to address them in the next update.