Responsive todo app using pure JS and the HTML5 Drag and Drop API

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Both desktop and mobile layout looks really great. I tried the todo app and it works great as well.

  Some suggestions would be:

  • Well I tried as well the d&d api for this and it works I think for other browsers? I haven't tested that one though:>
  • Using button for a theme-selection works but it could use a more appropriate markup. For this one or in general when you have a theme-selection, you need to use radio buttons since it is a selection and radio buttons are used for those. On this, 2 radio buttons with 2 labels that are inside a fieldset along with a screen-reader only legend that will describe the purpose of those radio buttons. Have a look at my solution for this one, inspect the markup for the theme-selection. If you have queries about, just let me know okay^^.
  • Add a type for an input tag.
  • It would be great to have an aria-live element that will announce when a todo-item has been added or when a todo-item has been removed by the user. This way, toggling those buttons will inform the users right away on what happenned.
  • Inside the .tasks selector, a single heading with "list of task items" is enough and not multiple sr-only heading tags.
  • Also, it shouldn't be a button on the todo-item check, it should be input type="checkbox" and the todo-container or todo-name should be the label for the input.
  • The delete button should have an extra text inside it, on what todo-item will it remove. For example:

  button = remove eat ice cream todo item
  button = remove watch walking dead todo item
  

  This way, users won't get the same text of delete task. They will be confused on what todo-item will it remove since that is the only text that it will state.

  • No need to use p tag to wrap the clear completed button, just simply use button for it.
  • For this one, you could use a single aria-live element or two, to announce those different event that happens since there will be a lot on this app. Todo item creation, todo-item completing, removing, selecting tab, removing all completed.

  Again, really great job for this one and great that you are focusing on accessibility.

  Marked as helpful

  0

  ---

  

  willykleitinho•350

  @willykleitinhoPosted about 3 years ago

  @pikamart Thanks for the feedback, Ray! I really appreciate you taking the time to review my code. I'll make these changes you suggested as soon as I can!

  1