search

datenanfragen / website

The Datenanfragen.de website including the request PDF generator and company information database
https://www.datenanfragen.de
MIT License
88 stars 126 forks source link

Improve the StarWidget #533

Open mal-tee opened 3 years ago

mal-tee commented 3 years ago

Reset not possible

After the StarWidget was used it can not be reversed to its initial state.

davenewham commented 3 years ago

I had a look at this issue tonight. The star widget is unfortunately not screen reader friendly, there is no way select them as there is no span and the rest is hidden with a display:none attribute, and even if there was, they are ordered back to front in the resulting html for some reason...

I have worked up a quick draft of what this could look like, however, due to the use of a unicode diamond, it is aligned downwards, which means it is misaligned with any other icons. I have tried remedying this using a ytranslation, however, this feels very bodged and maybe SVG graphics would be a better fit.

Examples: rating2 rating1

JohannesFischer commented 2 years ago

Just my two cents here. I like the mockups but I would suggest to add the reset button on the right end of the star widget, so it won't shift after a star rating has been selected. This is under the assumption that the button is not visible until a rating has been selected. My suggestion would be doing something like this (sorry for the quick and dirty mockup): ⭐⭐⭐⭐⭐❌ Also +1 for using SVG icons that will be much easier to handle compared to unicode characters.

davenewham commented 2 years ago

Hi @JohannesFischer, these designs were inspired by the w3 examples on star ratings https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating, where the reset button is actually just a "0" rating. Other than that, I do agree - for me personally, it is more visually pleasing to have the reset on the right.

I even forgot I worked on this issue, and other than the initial mock-up this issue still requires work :)