link2twenty / l2t-paper-rating

Polymer element to display "star" ratings in a paper style

<l2t-paper-rating>

A polymer element to display "star" ratings in a paper style

Install with bower

First you need bower, see their site for details

bower install --save l2t-paper-rating

Examples

  <l2t-paper-rating></l2t-paper-rating> <br/>
  <l2t-paper-rating rating="2" readonly></l2t-paper-rating> <br/>
  <l2t-paper-rating rating="3" total="4"></l2t-paper-rating>

A11y/ARIA

For screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the aria-label or aria-labelledby properties directly.

There are examples of both methods on the demo page.

Styling

The following custom properties are available for styling:

Custom property	Description	Default
--rating-icon-color	The color of the icons	--primary-text-color
--rating-icon-size	The size of the icon (square)	28px
--rating-icon-padding	The size of the padding between icons	2px
--rating-ink-color	The color of the ripple on icon tap	--primary-text-color
--rating-unselected-opacity	The opacity of stars 'non-active'	0.4

Properties

Public

Attribute Name	Functionality	Type	Default
icon	the icon to use (iron-icons)	String	star
rating	numbers of star selected (reflectToAttribute)	Number	1
readonly	can the rate be modified	Boolean	false
total	maximum number of stars selectable	Number	5

l2t-paper-rating's Issues

Aria compliance

I think this element should probably have the role of slider

The whole .stars div should be in the tab index and be controllable with the keyboard.

<div class="star" 
  role="slider"
  tabindex="0"
  aria-label="rating"
  aria-valuemin="1"
  aria-valuemax="[[total]]"
  aria-valuenow="[[rating]]">
</div>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role

Unable to set no rating (rating eq 0)

I have a list of things and those things has a rating.
Items may not have rating at all. I would expect it to render 5 stars but without highlighting any star.
This visually confirms that the item do not have rating.\

Duplicate variable declaration

In l2t-paper-rating.html on line 275. e gets defined twice

_tapHandler(e) {
  if (this.readonly)
    return
  if (!e.path) {
    this.rating = e.currentTarget.getAttribute("value");
  } else {
    this.rating = e.path.find(function (e) {
      if (e.classList) {
        return e.classList.contains("icon-container")
      } else {
        return false
      }
    }).getAttribute("value");
  }
}

Polymer 3 support

Great component! possible there will be a polymer 3 version?

Half star

Need a way to indicate a non-integer ratings,
Half the star still transparent?
Only in readonly mode? (users should not be able to set non-integer ratings themselves)