Responsive TODO App with React and dnd-kit

What are you most proud of, and what would you do differently next time?

Built with:

• Semantic HTML5 markup
• Native CSS
• Vanilla JavaScript ES6
• Mobile-first workflow
• React - JS library
• react-toggle - toggle button
• react-responsive - lets get the result of a CSS media query and have the value automatically update whenever the query result changes.
• dnd-kit - drag & drop toolkit for React

What specific areas of your project would you like help with?

The dnd-kit sensors (which make the elements draggable) seem to prevent onClick/onChange functionality of the child elements (like delete button and checkbox) that are inside a draggable list element.

I managed to solve this problem for "mouse users" but not for keyboard users. Meaning, when trying to check or delete a list item, it works with mouse click, but not with keyboard (space/enter keys).

This is a problem, as I tempt to make accessible applications... Any Ideas how to make it work properly?

Thanks in advance!