feat(range): provide an example to display the value

[julien-deramond]

Description

This PR provides a new example in the input range documentation to show how to display the value as a label for better usability.

Regarding a11y, here is how I defined the HTML structure and attributes:

• Avoided a double <label> and chose a <span>
• Tested with VoiceOver, the value was already announced so I chose to aria-hidden="true" it to avoid a double announce for the same value.
• Finally used what's provided by a11y expert described in feat(range): provide an example to display the value #1714 (comment)

• Check the rendering compared to the ODS design guidelines
• Auto-check HTML markup for a11y (will need a real a11y review after that)
• Enhance documentation (split HTML code and JS?)

Types of change

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

Live previews

• https://deploy-preview-1714--boosted.netlify.app/docs/5.3/forms/range/#usability

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• My change introduces changes to the migration guide
• I have updated the documentation accordingly
• (NA) I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	7857317
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/641c167318eb21000783d790
😎 Deploy Preview	https://deploy-preview-1714--boosted.netlify.app/docs/5.3/forms/range
📱 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.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[Aniort]

after some checkings, i think that we should use an output tag, as follow:

<div class="d-flex w-100 justify-content-between">
  <label for="customRange4" class="form-label">Example range</label>
  <output id="customRange4ValueText" for="customRange4" class="fw-bold"></span>
</div>
<input type="range" class="form-range" min="0" max="100" step="1" id="customRange4" onchange="updateLabelValue()">

it's seems to work well with screen readers

[julien-deramond]

after some checkings, i think that we should use an output tag, as follow:
it's seems to work well with screen readers

It confirms what we talked about with @louismaximepiton in private. Thanks for the feedback @Aniort. I'll make some changes to go with it!

[julien-deramond]

@Aniort, this PR's ready for final a11y review based on #1714 (comment). Should be quick to double-check 😄
(please test only in light mode, our dark mode is a work in progress)

[Aniort]

to avoid a double vocalization with both screen readers Jaws & NVDA please add ariahidden to output tag:
xx
and it'll be ok !

[louismaximepiton]

One thing and we're good

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information