Fix a11y problems on star rating component

[MewenLeHo]

Related issues

Closes #2005
Closes #1764

Description

Fix a11y problems on star rating component.

Motivation & Context

Improve a11y.

Types of change

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

Live previews

• https://deploy-preview-2035--boosted.netlify.app/docs/5.3/forms/checks-radios/#star-rating
• https://deploy-preview-2035--boosted.netlify.app/docs/5.3/forms/checks-radios/#readonly
• https://deploy-preview-2035--boosted.netlify.app/docs/5.3/forms/checks-radios/#disabled-2

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
• (NA) My change is compatible with 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
• (NA) My new component is added in Storybook
• (NA) 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	3960fb4
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/64d36fcbbc75470008469b78
😎 Deploy Preview	https://deploy-preview-2035--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.

[MewenLeHo]

Coming from Spec Meeting - May, 16:

• Selected option: stop using solid stars for inactive stars and replace them with shape stars
• Selected colors: on light background: #666 / on dark background: #999

[Franco-Riccitelli]

For the disabled state, the stars should remain in outline and change to a different grey.

On white: #CCCCCC
On black: #666666

I don't think it's necessary to have a "filled" disabled state colour as the component is inactive.
Apart from that it all looks good.

[MewenLeHo]

For the disabled state, the stars should remain in outline and change to a different grey.

On white: #CCCCCC On black: #666666

I don't think it's necessary to have a "filled" disabled state colour as the component is inactive. Apart from that it all looks good.

Thanks for the review @Franco-Riccitelli

But for me there is no reason to prevent a disabled star to be filled. For instance you may see the actual quotation but the component is disabled because you are not logged in. Or you don't have the right to change it. Or you changed the score but you remove a mandatory information so it become disabled. In fact I see many reasons why it can be possible to have checked stars in a disabled star rating component.

This component is working like radio buttons and checkboxes so why should we reset it when it becomes disabled?

If you are ok, I will need to know what color(s) you prefer for checked stars in a disabled star rating component please 😉

[Franco-Riccitelli]

For the disabled state, the stars should remain in outline and change to a different grey.
On white: #CCCCCC On black: #666666
I don't think it's necessary to have a "filled" disabled state colour as the component is inactive. Apart from that it all looks good.

Thanks for the review @Franco-Riccitelli

But for me there is no reason to prevent a disabled star to be filled. For instance you may see the actual quotation but the component is disabled because you are not logged in. Or you don't have the right to change it. Or you changed the score but you remove a mandatory information so it become disabled. In fact I see many reasons why it can be possible to have checked stars in a disabled star rating component.

This component is working like radio buttons and checkboxes so why should we reset it when it becomes disabled?

If you are ok, I will need to know what color(s) you prefer for checked stars in a disabled star rating component please 😉

Ok, then we should use the same grey colour used for the outlines in the disabled state for the fill colour.
These are our standard disabled grey colours for components. Thanks.

[louismaximepiton]

Few things more to tackle for the readonly and disabled variants

[louismaximepiton]

It feels weird to have it here since it's not the same behavior and not the same purpose. Do you think we should have a proper section for this component (I mean the whole star rating) ?

[MewenLeHo]

It could be a good thing yes since we now have normal/small versions + light/dark versions + disabled state + readonly state etc. It's probably too much for a simple section in the Checks & radios page.

In addition the disabled state is supposed to be used outside of a form, in a card for instance, so there is no reason to keep it in the Forms section although the rest of the star rating thing is still a form element. 🤔

Should we split it? (🤢)

[louismaximepiton]

🚀

[MewenLeHo]

This solution is working perfectly but because of the number of changes (adding a second svg, adding disabled and readonly states, having different colors for disabled dark and disabled light, etc) we decided to start a complete refactoring of this component.

See PR #2184 for alternative solution.

[MewenLeHo]

Will be resolved by #2184