Form Block 1.4.0 release and opinions on date pickers
Published: – Leave a comment
Even though the development around version 1.4.0 of Form Block didn’t go as planned, I’m happy to announce its public availability. It was a little frustrating and potentially means an even longer to-do list, but one after the other …
What it should have been
The main plan for Form Block 1.4.0 was to add a custom date picker for date and time fields, since the default ones of the browsers are not the best and not customizable whatsoever. That’s why I looked and found the Air Datepicker, which was feature-rich, mature, small and performant, and – most importantly – still maintained. So I started implementing it and all worked fine. As I was about to finish an initial version, I discovered a major flaw. Unfortunately not earlier, but that was my mistake.
In its current state, Air Datepicker is not usable via keyboard navigation and thus not accessible. As I place particular value on accessibility, it was a no-brainer not to include it.
Research
Searching for an accessible date picker doesn’t seem to be an easy task. Some of them rely on jQuery, a huge and nowadays outdated JavaScript library, others are no more maintained, so there are basically just 3 remaining: one by the W3C WAI as an example of an accessible date picker, that is not meant to be used in production environments (and definitely has its downsides), another from the U.S. Web Design System, which seems to be the best so far, but is a bit too verbose (e.g. it announces the week day, the full date and year for every focussed element for screen readers) and translatability is another major problem here.
That being said, I discovered a presentation from Russ Weakley at Inclusive Design 24 on what an accessible date picker even looks like. And so I postponed this feature for now, since there is no ready version yet, which fulfills my wishes here.
The new approach
Russ also mentioned an alternative way by splitting the date into multiple fields for day, month and year. That way you still have no date picker, but it’s easier for users to input the correct format since they just have to enter numbers and don’t have to check for the proper format whatsoever.
And that’s why in Form Block 1.4.0, you can now select custom input types for date, datetime-local, time and week, that are automatically split into multiple input fields. This way the format is more self-explaining and with optional placeholders as descriptive as possible. If that is not enough, you can also show the labels for every single of these fields, which are visually hidden by default.
As an example, the following image shows two versions of these separate date fields, the second one with enabled labels and placeholders.
And the date picker?
I’m still a fan of providing a separate date picker. And I still want to do it. Unfortunately, since there is no one yet that met my requirements, the only one that would work would be to create it by myself. However, that would be a very time-consuming task and I’m currently not sure if it’s worth the effort. And I’m not sure if I have enough time. Maybe I can find a sponsor for it.
More features to come
Additionally, my original plan was to provide a way to list form submissions in the backend. Unfortunately, adding the date fields above was more effort than planned, since the feature as a whole was not even planned in the first place. So this is definitely something that is planned for the next version. You can checkout all open feature requests on GitHub. Usually, as soon as I start developing on a new version, there will be milestone for the upcoming version so that you can see what’s coming next.
Some (minor) improvements
Part of Form Block 1.4.0 is also default styling for form elements in the Twenty Twenty-Four theme and the input type selection is now more descriptive so that you don’t need to know the actual HTML attribute names for input types. And you can now use any input type that has been available only in the pro version in the past. However, the pro version is still worth a try if you have higher requirements to your form plugin.