[Svelte] "Check All / Uncheck All" UX problems.

[luc4leone]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility

What information was incorrect, unhelpful, or incomplete?

I think the "Check all / Uncheck all" functionality implementation might have a problem from a UX perspective.

Specific section or headline?

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility#working_on_the_moreactions_component

What did you expect to see?

I would expect this kind of behavior https://todomvc.com/examples/jquery/#/all.
Expected: Uncheck All button state when all the todos are checked, otherwise Check All button.

There are a few use cases now where the user might be confused by the UI behavior. For example, if you go the repl for this article https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 and check the third todo, you would expect the Check All to change to Uncheck All since all the todos are now checked.

Did you test this? If so, how?

You can test the implementation in the svelte repl, there's a link at the bottom of the article: https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2

MDN Content page report details

• Folder: en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.html
• Last commit: 11857b7
• Document last modified: 2021-04-09T13:58:05.000Z

[ccozens]

I've just worked through this tutorial and switching between "Check all / Uncheck all" is the functionality in the current version of the tutorial:
<button type="button" class="btn btn__primary" on:click={checkAll}>{completed ? 'Check' : 'Uncheck'} all</button>
from point 2 of Working on the MoreActions component