Star rating: Refactoring + rebranding.

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Closes #2005
Closes #1764
Closes #2183

Description

Use mask-image instead of background-image to make the dark mode easier.
Might be merged before #2035.

Motivation & Context

The explanation in #2183. With all that changes, the bundlewatch for the star rating increase of 10kb (the size of the svg) and is up to .4KB.

Types of change

• Refactoring (non-breaking change)

Live previews

• https://deploy-preview-2184--boosted.netlify.app/docs/forms/checks-radios#star-rating

Checklist

Contribution

• I have read the contributing guidelines

Accessibility

• My change follows accessibility good practices; I have at least run axe

Design

• My change respects the design guidelines defined in Orange Design System
• My change is compatible with a responsive display

Development

• My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• My new component is well displayed in Storybook
• My new component is compatible with RTL
• Manually run BrowserStack tests
• Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• Code review
• Design review
• A11y review

After the merge

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	8d770db
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64f81342a67dab0007bbab02
😎 Deploy Preview	https://deploy-preview-2184--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[louismaximepiton]

If merged for v5.3.2, looks fine to me 🚀 Well done!

[julien-deramond]

There's no visible focus when using the component with the keyboard in https://deploy-preview-2184--boosted.netlify.app/docs/5.3/forms/checks-radios/#star-rating for example

[Franco-Riccitelli]

Looks ok to me.

[julien-deramond]

In #1764, there was the following question:

There's also in this spirit something to check with the readonly state because inputs in Bootstrap/Boosted are focusable in readonly state contrary to disabled state.

Has it been tackled? What's the justification for not having a focused state?

[julien-deramond]

LGTM

[julien-deramond]

Before merging, please provide an answer to #2184 (comment). Our readonly star rating version is not really a form control, but just wanted to be sure we haven't missed anything.

[MewenLeHo]

First thing to know is that checkboxes and radios don't have a readonly state because readonly prevents user from editing a field's value, but wen you click on a checkbox/radio you are actually editing the field's state (on || off).
From faqs.org

That's why we had to mimic a readonly state by using span instead of input type="radio".
Because of that our readonly version is no more a form element but just basic plain text.

Plain text is not focusable using Tab but reachable thanks to arrow keys.

One possible solution will be to add a tabindex="0" on the p but no one will understand why a simple p is focusable.

Another solution will be to keep the same logic as Bootstrap (https://getbootstrap.com/docs/5.3/forms/checks-radios/#radios) and don't provide a readonly state for radios.

Anything to add @julien-deramond and/or @Aniort?

[julien-deramond]

Sounds OK for me as-is. Preferred to ask because of things like https://getbootstrap.com/docs/5.3/forms/form-control/#readonly-plain-text where a readonly input can be focusable.