3 ms·

I gave it a mockup from a FB interview question (two lists of checkboxes with two buttons to swap checked items between them) and it nailed it: https://gist.git

I gave it a mockup from a FB interview question (two lists of checkboxes with two buttons to swap checked items between them) and it nailed it: https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc0c55126facd1 https://gist.github.com/milesrichardson/2a2f77d4bfb19c3b28dc...

deleted 3y ago
[deleted]
zagrebian 3y ago
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. Test page: https://output.jsbin.com/jixoqur/quiet https://output.jsbin.com/jixoqur/quiet
- rewtraw 3y ago
  > This is a toy project
- chatmasta 3y ago
  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. [0] https://output.jsbin.com/hawelubaxo/quiet https://output.jsbin.com/hawelubaxo/quiet [1] https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74eafe9885 https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74ea...
jypepin 3y ago
insane, I never thought that `toList.appendChild(item.closest('li'));` would MOVE the item. You learn something every day
- chatmasta 3y ago
  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...
- deleted 3y ago
  [deleted]
- chrismorgan 3y ago
  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 } }

deleted 3y ago

[deleted]

zagrebian 3y ago

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. Test page: https://output.jsbin.com/jixoqur/quiet https://output.jsbin.com/jixoqur/quiet

rewtraw 3y ago
> This is a toy project
chatmasta 3y ago
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. [0] https://output.jsbin.com/hawelubaxo/quiet https://output.jsbin.com/hawelubaxo/quiet [1] https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74eafe9885 https://chat.openai.com/share/faa9e2b7-8e4c-4ee3-9386-1f74ea...

jypepin 3y ago

insane, I never thought that `toList.appendChild(item.closest('li'));` would MOVE the item. You learn something every day

chatmasta 3y ago
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...
deleted 3y ago
[deleted]
chrismorgan 3y ago
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 } }