Interactive pricing component with Svelte and TailwindCSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great.

  Some suggestions would be:

  • When wrapping a text-content do not just use div to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • The range-input currently lacks visual indicator when tabbing on it, it would be great to add some visual on the :focus-visible state of the input, like giving outline on the slider-thumb.
  • On the billing-section, you should have not used checkbox on it, rather use radio buttons since it is a selection. Those 2 text besides the toggle are the label for each radio button. You will need to nest the 2 radio buttons inside a fieldset along with an screen-reader only legend that will described what is the purpose of those radio buttons, it could use a text-content like "billing section". Take a look at this old solution of mine on this challenge though this is a old solution and still haven't refactored yet so that is why fieldset and legend are not used in here but the functionality of the 2 radio buttons are used in here.
  • start my trial button should have better :focus-visible state, right now it is hard to tell whether it has focus or not.
  • Lastly, maybe wrapping the whole component inside a form since this will be a form in real site and that button should have type="submit".

  Aside from those, great job again on this one.

  1