Merge pull request #21 from dobtco/2.0.0

use an <a> tag for keyboard nav

dist/starrr.css

@@ -1,7 +1,8 @@
 .starrr {
   display: inline-block; }
-  .starrr i {
+  .starrr a {
     font-size: 16px;
     padding: 0 1px;
     cursor: pointer;
-    color: #FFD119; }
+    color: #FFD119;
+    text-decoration: none; }

dist/starrr.js

@@ -20,7 +20,7 @@ var slice = [].slice;
       if (this.options.readOnly) {
         return;
       }
-      this.$el.on('mouseover.starrr', 'i', (function(_this) {
+      this.$el.on('mouseover.starrr', 'a', (function(_this) {
         return function(e) {
           return _this.syncRating(_this.getStars().index(e.currentTarget) + 1);
         };
@@ -30,7 +30,7 @@ var slice = [].slice;
           return _this.syncRating();
         };
       })(this));
-      this.$el.on('click.starrr', 'i', (function(_this) {
+      this.$el.on('click.starrr', 'a', (function(_this) {
         return function(e) {
           return _this.setRating(_this.getStars().index(e.currentTarget) + 1);
         };
@@ -39,14 +39,14 @@ var slice = [].slice;
     }
 
     Starrr.prototype.getStars = function() {
-      return this.$el.find('i');
+      return this.$el.find('a');
     };
 
     Starrr.prototype.createStars = function() {
       var j, ref, results;
       results = [];
       for (j = 1, ref = this.options.max; 1 <= ref ? j <= ref : j >= ref; 1 <= ref ? j++ : j--) {
-        results.push(this.$el.append('<i />'));
+        results.push(this.$el.append("<a href='#' />"));
       }
       return results;
     };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starrr",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "main": "Gruntfile.coffee",
   "author": "ajb <adam@dobt.co>",
   "license": "MIT",

src/starrr.coffee

@@ -17,22 +17,22 @@
 
       return if @options.readOnly
 
-      @$el.on 'mouseover.starrr', 'i', (e) =>
+      @$el.on 'mouseover.starrr', 'a', (e) =>
         @syncRating(@getStars().index(e.currentTarget) + 1)
 
       @$el.on 'mouseout.starrr', =>
         @syncRating()
 
-      @$el.on 'click.starrr', 'i', (e) =>
+      @$el.on 'click.starrr', 'a', (e) =>
         @setRating(@getStars().index(e.currentTarget) + 1)
 
       @$el.on 'starrr:change', @options.change
 
     getStars: ->
-      @$el.find('i')
+      @$el.find('a')
 
     createStars: ->
-      @$el.append('<i />') for [1..@options.max]
+      @$el.append("<a href='#' />") for [1..@options.max]
 
     setRating: (rating) ->
       rating = undefined if @options.rating == rating

src/starrr.scss

@@ -3,10 +3,11 @@ $starrrColor: #FFD119 !default;
 .starrr {
   display: inline-block;
 
-  i {
+  a {
     font-size: 16px;
     padding: 0 1px;
     cursor: pointer;
     color: $starrrColor;
+    text-decoration: none;
   }
 }