fix a11y: don't destroy/rebuild form elements

[tomByrer]

Describe the bug

AFAIK, it is bad for a11y & performance if you destroy then attach a new form element if you just want to change the text label of said element. If you keep the same form element around, the tab focus doesn't get lost.

Even the on:click function stays the same in the example.

Reproduction

https://svelte.dev/tutorial/else-blocks

{#if user.loggedIn}
	<button on:click={toggle}>
		Log out
	</button>
{:else}
	<button on:click={toggle}>
		Log in
	</button>
{/if}

vs my proposed

<button on:click={toggle}>
	{#if user.loggedIn}
		Log out
	{:else}
		Log in
	{/if}
</button>

Severity

annoyance

[brunnerh]

Or maybe a non-interactive element should be used because this could be simplified to:

<button on:click={toggle}>
  {user.loggedIn ? 'Log out' : 'Log in'}
</button>

Which has no #if at all.

[tomByrer]

non-interactive element

Which for Real World code, a blog post, or whatever, that would be ideal.

But for THIS suggestion, no. I'm changing a code example for #if :else, not ternary
You might have missed the URL I listed ;)

[brunnerh]

I have not, my point was that the example should use code that makes sense, and using #if :else to switch out text is overkill as a ternary could be used. As the tutorial is about :else there should be a good reason to use it.

Hence my suggestion to use other elements and leave the #if :else around the elements.

[dummdidumm]

The tutorial no longer uses that pattern, therefore closing