Time Tracking Vue App

Community feedback

• 

  Krista Calleja•300

  @KristaCallejaPosted about 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.

  Marked as helpful

  1

  ---

  

  Fraser Watt•1,790

  @fraserwatPosted about 3 years ago

  @KristaCalleja thanks Krista!! That's really nice to hear! I'm sure you'll get there - it's been slow and steady progress on my part!

  That's a good spot, I should really test out projects on multiple browsers to check for these kind of errors - thanks!

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 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.

  1

  ---

  

  Fraser Watt•1,790

  @fraserwatPosted about 3 years ago

  thanks @pikamart - really really helpful stuff!

  Have set up input elements directly below labels, but with zero opacity - am I right in thinking you're saying this is alright as it would still be picked up by the screen reader?

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @fraserwat Yep, right now they are being seen in the screen-reader visually as well. Though I would recommend like what I said for the input to be place, oh okay hahaha my wording is wrong, it should be "behind" not "underneath" the input should be behind the label it self with a same size as the label. This way when in screen-reader, it's outline shape matches the label and it is place behind it, making like the label has the full outline.

  0