If you add a DOM node somewhere, it’s first removed from where it was because it can only exist in one place. You need to clone the node if that’s not what you want.
Incidentally, here’s a briefer spelling of that function (skipping the superfluous Array.from(), using a for loop instead of forEach, and using .append() instead of .appendChild(), cumulatively reducing 8 years of browser support to 5½+ years, which is no meaningful difference; and although I’ve declared Array.from() superfluous, note that this is only the case because querySelectorAll returns a non-live NodeList—you couldn’t do this with childNodes since it’d be being mutated during iteration so you’d miss half the items due to how it all works):
function moveSelectedItems(fromList, toList) {
for (const item of fromList.querySelectorAll('input[type="checkbox"]:checked')) {
item.checked = false; // Uncheck the item
toList.append(item.closest('li')); // Move the entire list item
}
}
Yeah, to the extent "I need to lie down," it's actually due to the features I didn't even know existed. In that followup with the accessibility corrections, I had no idea you could even do those things...
I checked in a screen reader. Nothing is announced when pressing the buttons. This is a problem. It should say something like “Checkbox B moved to the left”. Without any sort of announcement, the user has no idea if pressing the button did anything.
Thank you very much for your insightful review and valuable feedback regarding the accessibility of our recent list transfer feature. Your suggestions were instrumental in enhancing the user experience, especially for those relying on screen readers. I have incorporated your recommendations into the updated code [0], ensuring better accessibility and usability. I'm also including a link to our conversation [1] for further context and transparency. Your thoroughness and attention to detail are greatly appreciated, and I look forward to your continued guidance and expertise in future projects.
