Used NextJs React CSS Grid , FlexBox, Mobile-first workflow

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted about 3 years ago

  Hey, really nice work on this one. Overall, the layout for both desktop and mobile state looks really great. The reply also works great as well the upvote and downvote.

  For some suggestions, here are some:

  • If you try to click the first upvote of the first comment, you can't point to it , I think it is because of the h1 being sr-hidden. You can add clip: rect(0 0 0 0); on the h1 to fix it.
  • For each of the upvote and downvote, currently it doesn't have any informative text inside it and + or - alone is not enough. What you can do is that, add an sr-only text inside it to which could be downvote comment and upvote comment, depends on where it is placed.
  • Also, I would suggest changing the html placement for each of the post. The post's body should be placed before the ratings so that when a user navigates on the component, they will traverse the user, the user's post before the rating. Because it would be confusing to first traverse the upvotes/downvotes when the content is not first reviewed by the user.
  • Adding an aria-live attribute on the element wrapping the counts so that assistive tech will announce the update to the user on what happened. You can add extra text if you want, an sr-only text. Also, you could change the span to just p tag.
  • For each of the person's img, since their name is already present, it would great to use their name as the alt value since it makes sense to do so.
  • Actually, if this were a real app, each person would be a hyperlink right. Maybe making them wrapped inside a tag? Each person's img and name. Could be right.
  • Whenever you wrap a text, always use meaningful elements and not div. Changing all those div that wraps a text should be replaced by p tag.
  • For the reply button, the arrow-svg should have an aria-hidden="true" attribute on it since it is only a decorative image.
  • Again for the reply button, adding aria-expanded attribute would make it more accessible. This way, when a user toggles it, assistive tech will inform the user that it shows or expanding something.
  • For the reply form, using the user's name on the user's avatar alt attribute would be nice.
  • Adding label for the textarea would be great. Remember to always add label for each input or textarea element. This way, when a user is using a different language, those label text will be changed as well since attribute's data is static, the placeholder won't be translated. The label will be sr-only on this one.
  • There is a confusing part on the textarea. Initially, it should be empty right because a user is still not typing anything, but since you are already adding the @_name on field, a user can press the reply to send that reply even if they haven't add anything on the textarea and it will be much confusing since it is using required and to be honest, I can't think of an approach on this one, so maybe just letting you know about this? :>>
  • When clicking now either the reply or cancel button it would be nice again to have an aria-live element or maybe you can add a toast-notification on this one. The toast's text-content will vary on the user's choice, it could be like successfully replied to {person's name} or could be like reply cancelled. Just remember to add an aria-live="polite" on the element so that it will be announced.
  • When toggling the delete button, it would be nice to set the focus to the modal. This way, user will immediately be informed on what is the content. Right now, if you use keyboard to toggle the delete, then tab again, the user won't traversed on the modal like what it should do. So when a user toggles the delete, add the aria-expanded attribute then shift the focus in the modal, so that if they tab again, they will tab inside the modal. Another feature to add as well is to have a trap focus inside the modal. Meaning they can only tab on the two options, this way the user won't be confused on where they are at now.
  • To be honest, there are lots of added aria-live on this one or some toast, for the successfully deleting a reply and adding a comment as well.

  Just in general, if there are lots of state in your app that requires to send an update to the user, an aria-live would be nice or sometimes changing the focus on the pop-up element is really nice.

  Aside from those, great job again on this one.

  15

  Marked as helpful