React + sass + flex

Hi, I faced the same problem and found the solution in the following article.

https://dequeuniversity.com/rules/axe/4.0/landmark-no-duplicate-main#:~:text=Rule%20Description%20It%20is%20a%20best%20practice%20to,the%20document%20has%20at%20most%20one%20main%20landmark.

Hope this helps.

Hey, this is a pretty awesome solution. I like it.

1. if you want all page content to be contained within landmarks, you should make sure that all your "divs, image tags, buttons, forms... etc." are contained in landmarks like "Section, article, main, footer... etc." to enable people that are using screen readers to access your site.
2. I think there's some sort of bug when I choose clear completed because it also clears those that I haven't marked as completed.
3. Also make sure that all your "li" elements are contained within "ul" i.e. (<ul><li></li></ul> and on the same note, you can't have a div as a child element of an li.

4.Make sure that you only have one main landmark. I recommend that you replace your second main landmark with a section or article. 5. Remember to add labels to form elements to help people that use screen readers to access your site. Otherwise, I think this is a very good solution! Keep up the good work and keep on coding! Kudos!