Accessibility of checkboxes (e.g. keyboard accessibility)

[MagdalenaHenke]

Hey! I came across your tutorial since it's linked from the Typescript Cheat Sheet. Thanks so much for it!

I have one suggestion: right now, the checkboxes in the todo app aren't keyboard accessible. You can only interact with them by clicking, while checkboxes "should" be interactive as well if one hits the spacebar. Having things be keyboard accessible is important for all sorts of users, especially the ones who can't use mice for whatever reason, and people with visual impairments relying on screen readers.

For keyboard accessibility, it'd be enough to also add a keyboard event handler for "space" to the checkbox to also toggle the checkbox (since you already added tabIndex=0 to it which allows tabbing to it), here:

TypeScript-for-Beginner-Programmers/src/components/TodoItem.tsx

Line 49 in eb51011

onClick={() => dispatch({ type: 'toggle', index })}

For full screenreader accessibility, there's a couple of other things, e.g. setting the "role" to checkbox. More details about that in the ARIA authoring practices: https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-5
(Or, even easier, use an out of the box controlled HTML <input type="checkbox"> element, but I assume you wanted to get around custom styling?)

I know accessibility is not the focus of your tutorial, but since it's for beginners, I think it'd be nice to include accessibility concerns so they get it right from the start!

Sorry to just throw that at you, I'm happy to help with implementation!