ccozens
commented
1 year ago 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
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 Allbutton state when all the todos are checked, otherwiseCheck Allbutton.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 Allto change toUncheck Allsince 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: https://github.com/mdn/content/commit/11857b7d4b212319b2c9c998a85a71ca4e71f8ec * Document last modified: 2021-04-09T13:58:05.000Z