lunarlogic / starability Goto Github PK

Please add this project to npm. It's awesome!

Hello. Over at DSC, we use our own setup for star ratings.

I applaud you for devising an accessible solution to this issue. Is sub-star rating a possiblity? i.e. 4.7/5? We've come up with some crafty solutions but I fear they are not as accessible as this.

Atm the animations wont work.

Also all major browsers support media queries without vendor prefixes.

Images can be embedded using base64 encoding, replaced with inline SVG, or with simple Unicode star characters.

Is it possible to display multiple ratings on the same page.

I have the need for four individual items to be rated per review but when attempting to use more than one the ratings for others only interact with and manipulate the original. Even when I change the input name to a unique name for each rating.

What's the best way to change the star size? I've changed the $star-size in _variables.scss but i get an unexpected output, I'm guessing that it's because the star base64 image has set dimensions and to display the star it's actually using the image as a background image?

How should I go about resizing the stars? Thanks!

Will half star ratings be supported in the near future?

    background-image: url('../starability-images/#{$bg-image-path}.png');

Could add a variable for root path ../starability-images?

line! -> 173-174
display: inline-block;
float: left;

problem?--inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'

->so this should fix the issue...

display: inline-block;
float: left;

I've installed starability and required it in my app.js file, and when I try to run the app, it breaks with this syntax error:

node_modules\starability\starability-css\starability-all.css:1
.starability-result {
^

SyntaxError: Unexpected token '.'

Dunno if this is specific to this package, or if Node itself is reading it wrong. I've looked at the file and it looks fine to me.

When I remove the require statement for starability, the app starts just fine.

In trying to solve issues 21 and 22, an "invisible" input was added to allow for a no-rating option. However, for sighted keyboard users, this creates an issue as there is no indicator that this element has been selected.

For example:
Load up a demo with the markup currently outlined in the readme.

Attempt to tab through the interface with keyboard alone and you will find that there is no focus indicator to give guidance to sighted keyboard users.

I do not have a firm idea of a proper solution that might fit exactly with the design aesthetic you'd like to maintain for this project, but here is one thought I might entertain if I had the time to spend on it myself:

Reveal a text label indicating that there is no current rating when a user has focused on the no-rating input. This text label could be revealed above the stars, like one of those floating label patterns. Regardless, it should be noticeable so that a user can easily see a visible change when focus is on that element, or not.

I hope this provides you with at least an idea of how to fix this accessibility issue with the rating component.

Please let me know if there is anything I could further clarify.

Hey there,

Noticed in _starability-base.scss that the import for the variables is:
@import '../variables';

but that throws an error when trying to compile, because variables and starability-base are actually in the same folder as each other.

figured it'd be kinda lame to make a PR simply to change the above to:
@import 'variables';

:) thanks!

I don't understand how should I decrease the overall size of the rating stars?

Screen reader does not read the label title which is highly informative. Consider adding aria-label="[title text] + [label text]". For example aria-label="Average 3 stars". FYI, aria-label overrides the label text itself so screen reader will only hear this once.

I noticed that after clicking on a star, there's no way for the user to undo a selection. I was wondering how one could achieve this goal to allow users to regret rating at all.

I am not able to have some margin between the stars. Can you please suggest me something ?

On Mac input no rate radio also considered.so instead of 5 it announces as 6 stars

The README states “It is not advised though to remove the outline.” However, the .starability-focus-ring element isn't shown in the example HTML for the rating widget.

Furthermore, the focus ring CSS depends on an element with ID #no-rate. If there are multiple rating widgets on the page, they would all need to share the same element ID for this to work. This might not be a huge problem, but it might trigger duplicate ID detection mechanisms in some apps. Consider switching to a class name instead.

Is there a way to change the size of the stars? I would like to make them bigger and changing height and width properties in the HTML has no effect.

A typical use-case (or at least my use-case) is not only to collect these ratings but also render them back to the user. I currently do this with font-awesome icons because they look like your stars, they're scalable, I am lazy, and you've used a sprite for the images – an (accessible) example/support for this would be handy for others I am sure.

The stars showed in a page cannot be printed with the page. They are not visible.
Is there a way to solve it?

To reproduce it, just open this page e print: http://lunarlogic.github.io/starability/

Thanks!

Value of disabled input cannot be changed, that is good. Yet the stars on hover have the same color as when it's active. Hovering disabled input shouldn't change color to yellow. This can be easily achieved:

  @if ($hover-enabled) {
    > input:hover:not(:disabled) ~ label {
      background-position: 0 (-$star-size);
    }
  }

edit

Another thing - the coursor shouldn't be set to pointer in such case.

  > input:disabled+label {
    cursor: not-allowed;
    // or default
  }

Stars are not responsive according to the screen size.
How to make them responsive?

Chrome:

Firefox:

When I use the newest version of starability, the stars appear yellow (as if a 5-star rating already had been given), although NONE of the radio buttons has is "checked".

This is misleading the user. The rating should be shown in grey initially.

The solution in #21 does not do the trick entirely as it breaks the proper coloring of the stars after an initial rating has been set, for example: Check 5 stars, then check one star. While hovering over the first star, the other stars stay yellow.

Hi,

Really not sure if this is a 'code' issue (well actually more a usability issue), but I wanted to see how you would set that star rating from a variable?

So, if I have a variable 'newRating' with the value of 4 how would I set your Starability to reflect this, instead of clicking on the 4th star?

Hi again.

I was checking starability, since it's been awhile, and noticed that if a user has high contrast mode enabled, that all of the stars vanish, due to them being background images.

Thinking of solutions for this, I've gotten around this issue by using SVGs in place of background images, though I realize that'd be quite a bit of work, and could make some of the animations difficult.

That said, being in high contrast mode, design isn't nearly as critical, as much as it's about having a usable interface. With that in mind, an alternative could be to have a high contrast mode media query where the UI changed from ☆ ☆ vs ★ ★ to indicated a selected vs non-selected rating.

While typically I wouldn't want to use those sorts of characters in CSS content, to mitigate the possibility of screen readers reading out "black star" and such, I'd consider it a minor annoyance for the individuals who are using both a screen reader & high contrast mode. And it would far outweigh the annoyance of having invisible UI.

Let me know if you have any questions about this that I didn't cover.

Thanks :)

Great work! A pan-gesture support for touchscreens would it make even more awesome ;)

no animations are fired in the demo. Does anyone have a solution?

It´s possible to select half stars as option?

As I mentioned on Lea's blog, when pressing the left/right arrows with the star rating control focused, the focus moves in the opposite direction: pressing the right arrow moves the focus to the left, and the other way around.