Post

How do you make a button that doesn't change it's width when it's in a loading state? Use CSS Grid to stack items, and visibility: hidden to hide/show spinner! This approach allows the largest item to size the button, and keeps the button text accessible

Kyle Shevlin (he/him)

@kyleshevl.in

11 Dec 2024

I absolutely position my spinner in the center of the button and then set the text to opacity: 0. No layout shift. Been doing that before Grid was even a thing.

Wes Bos

@wesbos.com

It's good, but this is better in some cases, and is accessible. I address both approaches in the video

11/12/24, 5:45 pm0 reposts3 likes

Miguel Peixe Aldeias

@miguel.reeple.studio

11 Dec 2024

You definitely got points from me when you showed the `aria-label` trick, really cool

Wes Bos

@wesbos.com

11 Dec 2024

I think ideally you'd use aria-live to announce that a save is happening - but as always, it depends on what you are doing

Kyle Shevlin (he/him)

@kyleshevl.in

11 Dec 2024

I’ve never used display: none since that will remove it from screen readers. I’ll give the full video a watch.

Kyle Shevlin (he/him)

@kyleshevl.in

11 Dec 2024

I see what you’re getting at. I’ve never really worried about updating the text to “Saving…” but that makes sense. I’m no accessibility expert, happy to learn another nugget.

Josh Collinsworth

@collinsworth.dev

11 Dec 2024

Re: accessibility: while this is ok, it's generally better to use actual text (probably a `.sr-only` span) than `aria-label`. Text is more easily picked up by ATs universally, and can also be translated to other languages more easily than HTML attributes. Plus: don't use ARIA if you don't have to.