Focus styles about baselayer HOT 6 CLOSED

okay I got it sorted. The issue was an over site on my part as a result of missing an Astro client directive . I was doing the initial data-focus tests with a button component which as it turns out, in the location I was testing, was missing the proper client directive. 😅 This resulted in the data-focus-visible attributes actually not being set in the DOM.

Everything is working smoothly now. I am in the process of refactoring and migrating from the tailwind modifiers to the provided Aria data states!

from baselayer.

btw if you want to apply styles to the children based on the data attributes, you can do it with group class from tailwind.
The way I currently do in my components is that I add a group class to the root of the component where the data-attributes are going to be set, and then on the children elements I use group-data-[state=open]:<your-class> to apply styles based on data attribute.

P.S. btw I love your vscode extension approach. It's pretty neat.

from baselayer.

Thanks for the kind words and all the thoughtful feedback!

The focus/hover styling is something that has been on my to do list to improve. While building I was running into some issues with the data-focus-visible/data-hover and Tailwind.

Take the Button component for example. I could not get [&[data-focus-visible]]:ring-2 to work. It’s odd because other data attributes work fine this way such as things like [&[data-outside-month]]:hidden in the Calendar.

I suppose I could pass isFocusVisible as a variant prop, then make a “focused” variant. However I was trying to avoid that for brevity, if possible.

Any reason why the css selector version is not working for things like data-focus-visible or data-hovered, but is working for things like data-outside-month?

from baselayer.

hmm not sure. I usually use the data-[focus-visible]: syntax, but I would have thought the one you showed here would work too? I do see the data-focus-visible attribute getting applied in the DOM so not sure why tailwind wouldn't pick it up. I definitely have a bunch of examples where it works. Maybe try the data attribute syntax instead of fully custom arbitrary selectors and see if that helps?

from baselayer.

going to close this. Just merged a ton of upgrades. I changed all the focus states to data-focus-visible or data-focused, as well as upgraded all the tailwind modifiers (hover, active) to the relative Aria data-states.

@devongovett Thanks again for your attention on this, everything should be much improved now!

from baselayer.

Nice looks like it is working well!

from baselayer.