Junior - Interactive pricing component

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi,

  This looks great but is not accessible at the moment. See if you can fix that by making sure labels and titles aren't empty. Do some research, try navigating by keyboard and run a screenreader over it if you can (NVDA is free on Windows, voiceover on mac, or all modern phones have screenreaders in accessibility settings). Trying this out with components like these (inputs, toggles) is absolutely the best way to learn. You'll realise the importance of good labelling and focus states really quickly

  Theres a few ways to code a toggle component, but my preference for this would definitely be to use two radio inputs in a fieldset - there are two labels and one is always selected so it is a radio ui really even if it looks like a toggle.

  Hope this helps!

  1

  ---

  

  P

  Nicholas•235

  @fytrwPosted over 3 years ago

  Thanks so much!

  I will try learn this and fix.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on this one, the slider functions well and the layout both in desktop and mobile is good. No issue when resizing.

  I suggest adding a padding-bottom to your body tag so that your component will not touched the flooring of the viewport which is doing right now. So adding that will be awesome.

  Also adding that background in the input slider will be awesome. You can check out mine to see how I did that color thing.

  But still, you did a good job in here^^

  1

  ---

  

  P

  Nicholas•235

  @fytrwPosted over 3 years ago

  Thank you very much for your comments. I added padding-bottom to body(before padding-bottom was only in orientation portrait). I forgot to add background-image to slider in mozilla pseudo-element, now should works in all browsers.

  0