lunarlogic / starability Goto Github PK
View Code? Open in Web Editor NEWAccessible rating forms with cute animations on top.
Home Page: https://lunarlogic.github.io/starability/
License: MIT License
Accessible rating forms with cute animations on top.
Home Page: https://lunarlogic.github.io/starability/
License: MIT License
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?
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.
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.
Will half star ratings be supported in the near future?
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!
no animations are fired in the demo. Does anyone have a solution?
Stars are not responsive according to the screen size.
How to make them responsive?
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.
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.
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.
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);
}
}
Another thing - the coursor shouldn't be set to pointer
in such case.
> input:disabled+label {
cursor: not-allowed;
// or default
}
I am not able to have some margin between the stars. Can you please suggest me something ?
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.
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.
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;
On Mac input no rate radio also considered.so instead of 5 it announces as 6 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.
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 :)
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.
Images can be embedded using base64 encoding, replaced with inline SVG, or with simple Unicode star characters.
I don't understand how should I decrease the overall size of the rating stars?
Great work! A pan-gesture support for touchscreens would it make even more awesome ;)
Atm the animations wont work.
Also all major browsers support media queries without vendor prefixes.
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.
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.
It´s possible to select half stars as option?
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!
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.