Vuetensils 0.7: Dates, Tooltips, Skip links, and more.

I’m very happy to announce the latest minor version to Vuetensils. And without going any further, I should point out that I think this is going to be the last stop before a stable version 1 🎉🎉🎉

This release includes some nice new UI components, some components for better accessibility, some features for better development, and some new community updates. Let’s take a look.

VDate

Probably the feature I am most proud of is the VDate component. It provides an accessible date picker with tons of features for keyboard navigation:

• Manages ARIA roles, labels, and attributes.
• Manages focus ring and traps focus within the calendar.
• Provides keyboard navigation support.
• Supports passing in min and max date props.

This component was long overdue, as it was one of the first ones I wanted to build. But there is so much to consider when building a component like this, and a lot of complexity in it. Quite satisfied with having finished it.

Although I am quite happy with how it turned out, I actually advise using HTML’s built in date input. It would mean less code in your bundle, and provides a consistent experience across the internet. That said, there are plenty of cases where you need your own date picker, and I hope you choose this one.

VTooltip

Another long-overdue component is VTooltip. Most complete component libraries include some sort of tooltip or popover, so Vuetensils felt a bit incomplete without it. Sure, there are some good options out there, but we really needed one here.

I’m quite satisfied with the overall results, and as with all our other components, accessibility was at the forefront in design:

• Supports keyboard navigation for the target DOM node.
• Toggles the tooltip on hover and/or focus.
• Includes role="tooltip" attribute for tooltip content.
• Manages aria-hidden and aria-describedby attributes.

I still want to continue working on it to provide an automatic positioning engine similar to Popper.js, but I’m set on keeping Vuetensils dependency-free, so for the time being, I’ll have to keep it more naive.

VSkip

The VSkip component is a bit of an unusual one if you are not familiar with accessibility best practices. What it is, is an anchor tag on the page that should be the very first link in the HTML. It is not visible, but you can reach it via keyboard navigation.

This is important because in many cases, websites and application have several links or interactive elements on a page before the actual content. By placing a non-visible link as the very first element, it will be the first item that a keyboard user will focus on.

This link should go to an anchor link that wraps the main content, thus allowing users to skip any of the previous focusable elements. This is not the sort of thing that you can test for with an accessibility audit, but it does make many people’s lives better.

It took me a while to get around to creating this component because I wasn’t sure what I wanted the developer experience to look like, and I couldn’t really control the whole thing (there is no way for me to know what the main content is). However, I decided that this is a good tool to make available because it may teach people the importance of this sort of thing, and the work required on the developer’s end is quite small. It’s really just a matter of my providing good documentation.

VBtn

VBtn is, admittedly, a strange component. It renders a <button> by default, a <router-link> if you set the to prop, and a <a> tag if you set the href attribute. This may not seem super helpful, but I found myself regularly having a list of navigation elements, and in some cases I need to use a router link, in others I need to link off site, and in others still I dont link anywhere, I just need a click handler.

All those cases require a different element/component, and rather than having complicated template logic, I decided that the VBtn component was better. Another benefit is that it’s a functional component, so it’s made to be as fast as possible.

VTry

Another interesting component more for easing development challenges, VTry is intended to work sort of like try...catch. It hooks into Vue’s errorCaptured lifecycle method to listen for any exceptions or rejected promises that occur on any of it’s children.

There are many other projects that provide a similar solution to this, called an “error boundary”. So nothing particularly special, but as this project is intended to make developer lives easier and keep dependencies to a minimum, I figured it doesn’t hurt to add it. After all, everything is opt-in so your bundle will not grow if you decide not to use it.

JSDoc + TypeScript =

No, I did not rewrite the entire project to work with TypeScript. However, there are some really excellent developer experience improvements that come from projects that provide TypeScript support. So, I’ve added TypeScript to the project’s build tools, and I’m using JSDoc blocks to provide the type definitions.

What this means for you is as a consumer of the project, you will now get much better IntelliSense if you use a code editor like VS Code. You will also get better type safety when you use features of this project.

If you are thinking about contributing to the project, you will benefit from the type safety as well, but you won’t be burdened to need to learn TypeScript if you don’t already know it. You may need to learn JSDoc, but it’s pretty easy.

JSDoc + TypeScript is really my ideal balance of having very good type safety, documentation, and intellisense, while also still just being able to write plain JavaScript. I love it!

Community Improvements

Last but not least, this release will hopefully help any developers that want to get involved, and set things off on the right foot. I’ve created a Code of Conduct and a Contributor guide. They are not completely finished, but this is a better start than nothing at all.

I also have to give a huge shout out to The Jared Wilcurt for being an amazing contributor to the project. He added better linting rules, example tests, and some a11y linting. With his additions, I think the project will not only be better, but will help other potential contributors come on board.

If you use Vuetensils and you have 1 minute, I would encourage you to send him a little “thank you”. You can also check out all his cool stuff on his website.

Stay Up To Date

That’s it for now, but please sign up for my newsletter or follow me on Twitter if you want to keep yourself updated on the latest Vuetensils releases, or any of my other content.