zwgnr / baselayer Goto Github PK

First off great job with this library, it looks super awesome. Love the idea of using a VSCode extension to bootstrap components! 🤩

I noticed a few of the components are missing keyboard focus styles. That's an important accessibility feature for folks navigating with the keyboard to see where they are. Most of the React Aria Components include a data-focus-visible attribute that you could use with the tailwind ring classes to implement a focus ring.

Another related case is with the menu/dropdown/combobox/etc. components I saw you're currently using tailwind's hover: modifier. You might want to consider using the data-focused attribute for that instead, which gets set for both hover and focus. And for combobox it also works even though actual DOM focus stays in the input field. Right now when you navigate via the arrow keys you can't see which item is focused.

In general our data attributes are designed to be more consistent cross browser and device than the css counterparts like hover: and active:, so you might want to consider using them everywhere as well. You can read our blog post series on this if you wanna learn more about why, and find all the available states in the docs.

Again, awesome work on this! Really excited to see where it goes.