Add disabled and readonly states to star ratings

[MewenLeHo]

Related issues

Closes #1764

Description

Add disabled and readonly state to star ratings.

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

https://deploy-preview-1861--boosted.netlify.app/docs/5.3/forms/checks-radios/#readonly

https://deploy-preview-1861--boosted.netlify.app/docs/5.3/forms/checks-radios/#disabled

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 responsive display

Development

• My change follows the developer guide
• I have added JavaScript unit tests to cover my changes
• 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 added 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	f8e145d
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/646cdc4bf256b900083e84d3
😎 Deploy Preview	https://deploy-preview-1861--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 settings.

[MewenLeHo]

readonly doesn't work on checkboxes as it prevents user from editing a field's value, but with a checkbox you're actually editing the field's state (on || off).

From faqs.org:

[louismaximepiton]

Should we try something with the following markup as a structure instead od readonly?

<div class="star-rating">
  <span>...</span>
  <span>...</span>
  <span>...</span>
  <span>...</span>
  <span>...</span>
</div>

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[MewenLeHo]

Will be completed by PR #2035