accessible-spinner-datepicker

accessible-spinner-calendar

An accessible spinner calendar component

Table of Contents:

• Read me first: When would I use this
• Assumptions
• User tests
• Getting Started
• API Reference
• Contributing
• Thanks, Credits, Inspiration

Read me first: When would I use this

Many datepickers on the web are inaccessible. The APIs can be awkward (does accessibility: true make sense as a prop?), and the claims either go untested or left to wither as the person responsible for PRs moves to other projects.

Moreover, we believe that datepickers are not "one size fits all". A datepicker that works well for, say, Flight bookings, might not be the same as a flight search, which might not be the same as a date-of-birth input. This datepicker is no different!

Quite often, a simple text input is the more resilient approach to solving these prolems. If someone breaks accessibility guarantees, or a mode of input does not work with the component, at the very least people should be able to carry out their task. Thus, we want to enforce the text input, and then offer an enhanced interface on top.

We made it with the following goals

• Be resilient, by always offering a text input;
• Use a single interface across devices, instead of trying to split arbitrary mobile/tablet/desktop UIs;
• Make an API that enforces Accessibility, and minimises caller error;
• Expose our design, assumptions and user testing;
• Encourage people to not use it if it does not fit their use case!

Design

Our initial design is based on the Spinner Datepicker by the ARIA Authoring Practices. We found it exposes the relevant states well. Note that the ARIA Authoring Practices is not the end-goal of this. We have an obligation to test the accessibility as well, and so does the caller of this library!

In addition to that, we want to enable multimodal operation for pointer touch operations. In other words, we want it possible for people to change the dates by touch, like in some native UI spinners. This might be a bad assumption, and we have to user test.

The Datepicker should make as few assumptions about the language, datetime format, and script, as it can.

Assumptions

These are things we assume, and should test.

1. Multi-modal operation of spinners is desired, and not confusing
2. Touch operation of spinners does not conflict with other modes of interaction. This is especially true when a piece of Assistive Technology is running.
3. This Datepicker is more discoverable and operable than a Grid Calendar Datepicker (expandable by button or always present).

User tests

TBD after the prototype is done.

Getting started

You will need node and npm

npm install accessible-spinner-calendar

Then, in your relevant source file:

API Reference

Contributing

All contributors are required to abide by our Code of Conduct.

You will need [git], node and npm.

Then, in a terminal:

git clone https://github.com/fpapad/accessible-calendar-datepicker
npm ci
npm run dev

Code of Conduct

Thanks, Credits, Inspiration