Interactive Rating Component

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 4 months ago

  Hi, your solution looks really good and here is my feedback to it

  Other

  1. It isn't reccomend to put all of your projects / file in one github repository as it will make your code less maintanable and less organized. Instead, make a new repository for each project you have. In doing so, your code is much

  • more maintanable
  • more organized
  • easier to browse

  HTML & Accesibility

  1. Remove tab-index="-1 on lines 28 to 51. Doing so will make your website more accesible to keyboard users. Also, setting tabindex rarely occurs and we often rely on natural focusable elements such as <button>, <a> and `<input>

  2. Replace line 27 with a <form> tag. This will make your website more accesible and semantic. A <div> does not give any meaning on its own while a <form> gives meaning on its own to blind people using screen readers therefore making it accesible. <div class="ratings" role="radiogroup" tabindex="0" aria-label="select a rating">

  3. You can add a <fieldset> tag inside the form. A fieldset is often used to signify to screen readers that those are elements grouped together & relative to each other inside a form. This will make your HTML more semantic.

  CSS

  1. Use a CSS reset. It will make your life much more easier and your site visitors will appreciate it. What it does is that it makes your CSS look the same in all browsers. Most browsers usually add their own style to an element causing your website to look differently. Most people use either the first or second CSS reset, but it doesn't really matter. First CSS reset, i use this one or Second CSS Reset. You should use the CSS reset in all of your projects.

  0