Time Tracking Dashboard built in React

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is really great and it is responsive as well. The mobile layout looks really great as well.

  Some suggestions would be:

  • I think it will be better if the left side and right side are in their own parent container and not using 1 whole grid. Since those 6 box/cards are a section of their own as well for the person and the selection.
  • Person's img should be using the person's name as the alt like alt="Jeremy Robson". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • For the selections, since you made use of button it would be great to nest them inside a ul since those are "list" of selections and user will have an extra information on how many selections are there in the list. Also it would be great to nest that component inside a section with a screen-reader only heading tag that describes what is that section is all about. Lastly, an aria-live element that announces the changes or announces the selection has been selected, since button only does not give extra information.
  • Another approach for the selections is to make those selections input type="radio"it then will be inside a fieldset along with a screen-reader only legend element that exactly do the same with the screen-reader heading I mentioned above. This way, users will get extra information on what is selected even without using aria-live element.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • Since you made the 3 dots interactive using button you should add either aria-label attribute or screen-reader element inside. The value will describe what does the button do.
  • img inside the 3 dots button should be hidden as well using the method I mentioned above.

  Aside from those, the site looks really great and this is a great solution to be honest.

  Marked as helpful

  1

  ---

  

  Gediminas Makutenas•765

  @SenatriusPosted about 3 years ago

  @pikamart Wow, that is a lot of useful advice, thank you :) Wasn't even aware of the aria-live element and you do have a point about using radio inputs instead. Would have made things a lot easier for myself if I did. Will keep all of these in mind for the next project.

  1