Comments (10)
This is fixed in a version 2.0.0.
from starability.
Hi @dandv I know this is an issue. There were trials to change it (both mine and contributors'), but the cost of fixing it was always greater than the gain here: ##12.
If you have a good idea how that could be fixed without breaking the rest of the functionality (tabbing was the issue usually), then I can consider looking into that.
Without a precise solution proposal I am reluctant to pick up yet another fight with this because:
- People with vision impairment, who are using screen readers, hear that they are decreasing the rating (the rates go in descending order in markup) so it is still quite clear what is going on. Might be just a bit confusing at first, but is bearable. They also are unable to see the weird behaviour.
- People who use arrows for conveniance can quickly figure out what is going on and make the changes based on what they see.
- Up/down arrows work as expected.
from starability.
Hi Anna, initially I thought this approach solved the problem, but then I noticed that's because it didn't highlight the previous stars on hover.
from starability.
I think that feedback on hover is a thing that I would rather keep in the library. Maybe there is a better solution that I am not aware of at the moment. I will keep looking, thank you for taking an interest in this repository. :)
from starability.
Overall thought: since accessibility is the main differentiator of this widget (it's in the title after all), it might be worth adding some JavaScript for fixing the left/right issue. From MDN:
JavaScript has traditionally had a reputation for being inaccessible to users of assistive technologies such as screen readers, but there are now ways to create dynamic web user interfaces that are accessible to a wide variety of users.
from starability.
How about this: Unicode characters, no JS, keyboard accessible the "right" way.
Up/down arrows work as expected.
Somehow, it hasn't crossed my mind to try up/down arrows. Only left/right, and Tab/Shift+Tab.
from starability.
@dandv in Firefox it still goes backwards. As of Javascript, I tend to prefer CSS only solutions. It makes it easier to pick them up and use for people who are fairly new to front-end development... But on the other hand, parsing the rating result usually requires JS anyway. I will try to look into that.
I checked this with voice over. The arrows are working better, but there are spans instead of labels, so there is no way to find out what is going on. Any reason why you chose spans over labels?
from starability.
I've just updated the CSS-only star rating to use labels - thoughts?
from starability.
@dandv in Firefox it works exactly as my solution, arrows go the other way around. I wonder why it works in Chrome then... Will check that later when I have a moment. Thanks for testing this.
from starability.
@dandv I think I solved it. I can't believe this can be so simple and no one thought of this before. Please give me a sanity check on this one: https://jsbin.com/yikeyit/edit?html,css,output
I just don't reverse the order of the radio buttons and use additional input:checked + label
selector to choose the last star.
edit: ok, now I see the problem. It doesn't highlight more than one next star. In other case there is a gap. But It is accessible, works perfect and is not hacked. I am thinking about using this in Starability anyway...
from starability.
Related Issues (20)
- Rating starts with yellow stars instead of grey stars HOT 6
- Invisible input creates accessibility issue HOT 2
- Touch gesture support HOT 3
- Support for half stars HOT 6
- Star size HOT 3
- Focus ring is not demonstrated in example HTML HOT 1
- Better support for `disabled` attribute. HOT 3
- Stars invisible in high contrast mode HOT 5
- Regarding stability star 10 rating HOT 2
- On Mac voice over, it announces you are currently on radio button, X of 6. HOT 3
- Node throws SyntaxError: Unexpected token '.' for npm package css HOT 1
- Change size of stars? HOT 2
- ItΒ΄s possible to select half stars? HOT 1
- Problem when decreasing the size HOT 1
- Spacing between the stars
- Dosn't work in 2021? HOT 3
- Can't print the stars in page HOT 1
- fixing required in starability-heartbeat.css
- Multiple ratings on same page HOT 1
- Responsive Star Size HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from starability.