product-feedback-app

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great but the title on the left side is not visible since the color blends into the background-color, changing the gradient's color would be really great. Site is responsive and mobile state looks great.

  Don't know if I could review full, but here are some:

  • main does not need a role="main" since it is already the main tag.
  • Those clickable items on the sidebar should have use button instead of div. Interactive components needs to use interactive elements, by using div you are excluding lots of user to the functionality. Right now, only mouse can interact with it and not other peripherals.
  • It would be great as well to have an aria-live stating what happened when the user toggles something, this way they will be notified right after toggling it.
  • Also, there are lots of usage of section tags in here which you don't really need, since section needs to be labelled by another text or heading. You can use div for others.
  • On the roadmap, those 3 items below it could have use ul since they are a "list" of items for the user.
  • Svg's like the lightbulb on the left side of the suggestions, the comment bubble, the plus sign when clicking the add-feedback, the arrow-up on the upvotes, those should be hidden so use aria-hidden="true" for those svg's.
  • The sorting should be using an interactive element like a select or a custom-listbox but not certainly a p tag like on this one.
  • The selections inside the sort-dropdown is not accessible as well.
  • Those upvotes should be using a button since when a user clicks on that, the value would be then incremented.
  • You could use ul as well for those different suggestions since it makes sense since they are "list" of suggestions.
  • Also, I wouldn't use a tag to be a parent for those items inside each suggestions and making it a grid. Instead a better markup would be to have the bold text to be a heading tag with a tag inside:

  <h3>
    <a> add tags for solution </a>
  </h3>
  

  The whole li that wraps each of the suggestion would be position: relative and the a tag's pseudo, either before or after should have height: 100% width: 100% to make the whole item clickable. This way, the markup is proper but remember to make the upvote position; relative with z-index.

  ADDING FEEDBACK

  • Go Back should have href so that it will work properly. An a tag that does not have href will not function the way it should.
  • Also when using keyboard to target the add-feedback, after going into the next site, when you use the tab on the keyboard again, the focus is nowhere to be found. it would be great for you have have like a function that .focus() on the body tag so that when transitioning to another page, the user will still be able to navigate properly the site.
  • You should have used form on this one since those are input fields that submits data.
  • Also, since it is another page, remember that h1 should be present at least once in a page.
  • Those feedback title category could have been a label for the input below them.
  • Each input lacks id that could be referenced by a label.
  • Right now, the error is only available visually but it is not being reflected to the input itself. A proper way of doing it would look like this:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy.

  • It would be great as well to have an aria-live that will state if the form submitted is successful or if there are errors on it. This way, users will be informed right away about the status of the form submission.
  • The cancel should be a link since making it a button it should not redirect a user to a page right.
  • The "add feedback" on the other hand should have type="submit". Remember that when a button is placed inside a form element, it defaults to type="submit". So imagine if you have a close-button inside the form without specifying type="button" click the close-button will submit the form. Be aware of this kind of scenarios.

  I won't go into each of the suggestions since it is the same with the add feedback.

  MOBILE

  • Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have a default atribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The button should have either aria-label attribute or sr-only text inside it which defines what the button does.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  David Maillard•375

  @DavidMaillardPosted about 3 years ago

  @pikamart Woaw what a feedback. Thank you very much, I will read this with extreme attention.

  aria-label is not a thing that I am good at, you will increase my skills. Thx !!

  1