Stepper fixes: font, margins, and visible outline

[OskiTheCoder]

📝 Changes

• use subtitle1 as font-style instead of two different fonts predicated on state
• clean up margin styles
• confirmed that each Step should have a visible focus ring / outline

[stephenjwatkins]

nice! this is a lot better.

i think the only thing that would be an improvement is having the focus indicator only show up for focus-visible states. right now it shows up, at least for me, when simply clicking a stepper button with the mouse, which can be a little jarring.

i have used React Aria's useFocusRing hook to normalize this process, as sometimes it gets a little finicky using the native :focus-visible pseudo class. i've done something like this in the past and it's worked well:

[OskiTheCoder]

nice! this is a lot better.

i think the only thing that would be an improvement is having the focus indicator only show up for focus-visible states. right now it shows up, at least for me, when simply clicking a stepper button with the mouse, which can be a little jarring.

i have used React Aria's useFocusRing hook to normalize this process, as sometimes it gets a little finicky using the native :focus-visible pseudo class. i've done something like this in the past and it's worked well:

ah good call!

i went ahead and added it, but i noticed sometimes im still getting the visible outline on click, but not everytime, not sure if my browser is just being weird or if theres a safe way to guard against that with something like,

&:focus:not(.focusVisible) { outline: none; }

although im not sure if thats harming accessibility in a different way

[stephenjwatkins]

i went ahead and added it, but i noticed sometimes im still getting the visible outline on click, but not everytime, not sure if my browser is just being weird

makes sense. with this code in place, you'll want to actually set the outline: none; on the .StepButton, turning off the normal outlining feature since we're providing our own.

then you'll want to bring the .focusVisible class out to the top level of the CSS module instead of being nested under .StepButton (or use &.focusVisible). right now, it's not being picked up since the class is being applied on the button itself, and not as a descendent of the button.

i think with those changes it should work as intended—only on keyboard navigation.

[stephenjwatkins]

nice!