Time Tracking Vue App

Community feedback

• 

  Krista Calleja•300

  @KristaCalleja

  Posted over 3 years ago

  Hi @fraserwat, I have been going through your projects and I love your work. I'm taking note of your approaches to learn more. I am very newbie in comparison to you and of course, I feel very "little" to advise you, however the profile-card img is also showing stretched on my Firefox browser. I tried adding height: auto to it and it seemed to address it (though it affects the other cards too). Looking forward to seeing more of your work.

  11

  Marked as helpful
• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

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

  Yeah, I tried to zoom out as well and can't reproduce on the screenshot, does taking another screenshot cannot take the bug away?

  Some suggestions would be:

  • Person's img should be using the person's name as the alt like alt="Jeremy Robson". The person's image is meaningful since the component is highlighting the person's profile.
  • You don't really need to use nav in here since there are no navigational links that are currently present. Instead, since you are using a set of radio buttons, use fieldset instead of nav, add as well a screen-reader only legend element, this legend's text-content will describe what is the set of radio buttons are for.
  • Your set of radio buttons have no visual indicator right now, so tabbing on it doesn't show where the users is currently at. On this, personally I would use a fieldset:focus-within and add an outline to the fieldset but I might trim down the fieldset's width so that it won't be large, I might first wrapped the fieldset in a div so that I could control its size properly.
  • Each input should have the same size as their label and they should placed right underneath the label, just make sure the label is above each input. Because by using width: 1px this makes the input have like no appearance when using screen-reader. Typically when using screen-reader there is another outline that covers a control element, this is an indicator for other users as well since not only not-sighted users uses screen-readers and providing indicator is always necessary. So each input is placed where their label is placed.

  Aside from those, site looks great and awesome again on this one.

  12