pricing component with HTML CSS & JS with smooth animation transitions

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted almost 3 years ago

  Hey this looks great.

  The semantics are pretty much perfect. The only thing I'd maybe change is to make the features in each card into a list, rather than just a set of spans.

  On the issue of your layout changing when you click on a button, that's because you have a focus style of border: 2px dashed black. Changing a border size will change the size of an element, so everything else will redraw. This will be slow when animating, and you'll get jumps. You have two options to avoid this. Either you always have a border, and you just change border-color from transparent to some other value. That way the size won't change, only whether you can see the border Or, use outline instead. Outline is not calculated in the element size so won't cause any layout shift.

  The other thing to change there would be to use :focus-visible rather than :focus so it only appears on keyboard interaction, not on mouse click.

  One other minor point. Your pricing toggle is great, well done for using a fieldset/radio. But, I would expect to be able to click anywhere on the switch to toggle it. At the moment you have to carefully click on one side or the other. To improve the UX of that you could make both inputs span the whole width of the toggle control. And then make the z-index of the unchecked one higher than the checked one. That way, whenever you click anywhere on the toggle it will switch the value of it. Something like:

  input[type='radio']:not(:checked) {
    z-index: 2;
  }
  

  Finally if you wrap your prices in an <output> tag with a label (aria-label or visually hidden label) then when they change because you've toggled, those changes will get read out by a screen reader.

  Marked as helpful

  1

  ---

  

  Mohsin Miyaji•440

  @mohsin316Posted almost 3 years ago

  @AlexKMarshall Hey Alex. Thank you so much for the insightful input and advice on this solution. ill reply to each of your point below.

  • replacing the span tags with li makes a lot more sense. I just didnt know which semantic tag to use for such a small sentence/description. I was leaning towards p tag but it didnt make much sense so I went with the span tag. Changed the span tags to the li tags just now.
  • Just replaced the border with outline like you mentioned and it worked like a charm. Now im happy with the animation and the wait it comes into focus.
  • I didnt know that this was what focus-visible was used for! thanks for this suggestion. Ive added this and it looks much better.
  • Honestly this idea of expanding the radio buttons to 100% width and then changing the z-index of the one that isnt checked was amazing. Honestly this solved that issue of when the user clicks on the toggle itself (The circle thing ) nothing really changes. Really great stuff and now the toggle has no issues that i can think of. And also learnt what the :not pseudo class does which is nice.
  • looked up the use of output tag and it suits this place alot. Added the aria-live and role to the tag now.

  Thanks Alex. This insight was much needed.

  0
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Mohsin, Bro I checked your work and you did it really nice.

  My personal suggestion

  Please event listener on toggle button container. As I checked that if I click on the left space properly only then toggle works properly and same for right blank space to reverse back. It should be working smooth. So I think it need to be fix.

  Your question's answer

  button:focus {
      border: 2px dashed black;
      opacity: .75;
  }
  

  from above rule Line No 204 replace border with outline like below:

  button:focus {
      outline: 2px dashed black;
      opacity: .75;
  }
  

  Then it will work perfectly.

  I think my suggestion, solution will help you (I am sure it will solve, I have tested)

  Good Luck

  0

  ---

  

  Mohsin Miyaji•440

  @mohsin316Posted almost 3 years ago

  @skyv26 Hey Aakash. Ive changed the toggle slightly. I hope the issue you mentioned is now resolved. I also changed the border to outline as you mentioned. Thanks for the insight.

  1