React Markdown Previewer Feedback

[Babi]

Hello

I just completed my second front-end libraries project. A react markdown previewer. All the tests pass

Codepen link: markdown editor/previewer
I would greatly appreciate your feedback. Thank you

[bbsmooth]

Great job here. Looks nice. It’s responsive. I’ll point out a few potential accessibility issues since that’s my specialty.

• I like that you customized the focus indicator on the textarea by giving it a different background color. Most people just rely on the blinking cursor to be the indicator and if you ask me it is hard to see and not the best way to do it. But I don’t think the change in background is enough to be as helpful as it could be. I can barely see it with my eyes and I have pretty good vision for someone my age. You could make it even darker, but I would suggest you try a different approach. Perhaps add an outline around the textarea instead.
• Speaking of the textarea, it needs a label. I think the easiest way to do this would be to turn the “Editor” p element into a label and give it a for attribute that points to the textarea. But I think the best way would be to make the “Editor” text an h2 and assign it an id, and then give the textarea an accessible name using the aria-labelledby attribute which would point to the h2. I don’t expect this second approach to make sense, just giving you some insight into how to solve this accessibility issue.
• If you turned “Editor” into an h2 then you would also want to turn “Preview” into an h2.
• I don’t think you should have “Editor” and “Preview” in a nav element. The nav element is what is referred to as a “landmark” element, which is important for screen reader users, and you should only use it if you actually have a navigation menu of some sort inside of it.
• Those social media links at the bottom need to have actual text associated with them. You can do that by adding text inside the a tags and then visually hiding it so that it doesn’t show up on the page but screen reader users can still hear it.

[Babi]

Thank you so much @bbsmooth! I have done the corrections. I didn’t know most of these