Buttons with dynamic icons break when adding labels

[paulGeoghegan]

In a rush so can provide more info if needed.
When using wa-icon inside a button I am changing the icon when a user clicks it as it's a play/pause button. This works great but as soon as I add a label to the wa-icon then it breaks and clicking the button does nothing

			<wa-button
				id="speed-toggle-pause"
				onclick={() => game.scheduler.toggle()}
			>
				<wa-icon
					name={game.scheduler.isRunning ? 'circle-pause' : 'circle-play'}
					style="color: var(--icon-color);"
					label={game.scheduler.isRunning ? 'Pause' : 'Resume'}
				></wa-icon>
			</wa-button>

I'm running this in a Tauri app but I think the same thing would happen in a regular Sveltekit app. Tauri uses Chrom I believe and I'm using NVDA on Windows.

[claviska]

I'm trying to replicate this, as I think it might be a framework issue. Does this cover what you're trying to do?

https://codepen.io/team/webawesome/pen/gbMZbve

[paulGeoghegan]

Yes, that's pretty much it but just in Svelte.

[paulGeoghegan]

Interesting update. I have been playing around with this. It seems like the onclick is the issue as if I use another method such as adding a keyboard shortcut to change the state indirectly then the buttons icon and label work just fine.

[claviska]

Thanks for the new info. I'm wondering if this is a timing issue in Svelte + event handler attributes. 🤔

[paulGeoghegan]

It's possible I just have never encountered this before. It's very odd that I can change it via another method other than onclick. I'm not getting any errors or anything it just seems like nothing happens.

[paulGeoghegan]

Okay update, after more testing this applies to other icon buttons where the onclick just doesn't fire. It only seems to happen when there is a wa-icon that turns the wa-button in to an icon button. It's not consistant though but has nothing to do with the labels.

[paulGeoghegan]

This even happens on a close button for a wa-dialog as well.

[paulGeoghegan]

Another update, turns out if I enter focus mode on NVDA by pressing capslock+space I can then use enter/space in order to activate the buttons. Maybe there is something strange going on with focus for icon buttons?

[claviska]

Is this a virtual cursor thing? Do we need to apply the label to the button and not the icon? I wonder if it's getting focused on the icon because it has a label 🤔

[paulGeoghegan]

That was my thought as well, especially since it doesn't happen with non icon buttons. I also don't think it happens with buttons that have a start or end icon either since they are still regular buttons.

…

On Thu 19 Feb 2026, 21:02 Cory LaViska, ***@***.***> wrote: Is this a virtual cursor thing? Do we need to apply the label to the button and not the icon? I wonder if it's getting focused on the icon *because* it has a label 🤔 — Reply to this email directly, view it on GitHub <#2052 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANRVYRM42SLASSULM4MGP434MYQG3AVCNFSM6AAAAACUV4WQNKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTKOBWGQ2DMMY> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[paulGeoghegan]

Okay, seems like if I remove the label you can click the button so I think that is definitely at least part of the issue. I can't use the label attribute on the button and there doesn't seem to be support for using aria-label either.

[paulGeoghegan]

@claviska sorry for all the updates. After further testing it seems like this is a regression in 3.2.1 as I can't seem to reproduce in 3.2.0 or 3.1.0.