feat(slider): expose formatLabel to value tooltip

[dkaushik95]

This PR exposes formatLabel to the tooltip for devs to use

• expose formatLabel to thumbWrapper for twoHandles as well as single handle.
• add examples on storybooks on how it could be used

Doesn't close a PR but gets us closer to the comment here: https://github.com/carbon-design-system/carbon/issues/7581#issuecomment-1113437295

Changelog

New

• formatLabel now also works with the Tooltips for the thumbs which gives you more options on how to customize how the value looks.
• Two new storybooks added to describe the change

Changed

• Changed the definition of formatLabel to represent the above addition

Testing / Reviewing

• Ran unit test to make sure nothing is breaking
• You can test it by changing the storybooks:
  • Slider With Hidden Inputs And Custom Format
  • Slider With Hidden Inputs And Format Label

Screenshots

[github-actions[bot]]

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	668a37ab893cf1643f1f13e75be33a0f7370d75a
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6657628d440af80007f6eb8c
😎 Deploy Preview	https://deploy-preview-16616--v11-carbon-react.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.

[dkaushik95]

I have read the DCO document and I hereby sign the DCO.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	668a37ab893cf1643f1f13e75be33a0f7370d75a
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6657628d8ebf4700088790d4
😎 Deploy Preview	https://deploy-preview-16616--carbon-elements.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.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1a98031e36667403214544338fdf1a26aaae7565
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/668419639cfc3f0008100218
😎 Deploy Preview	https://deploy-preview-16616--v11-carbon-react.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.

[netlify[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	1a98031e36667403214544338fdf1a26aaae7565
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/66841963177e5500081aec5b
😎 Deploy Preview	https://deploy-preview-16616--carbon-elements.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.

[guidari]

Hey @dkaushik95 sorry for the late reply.

This is something would be nice for us to talk with the design team, so we can delivery a consistent solution like it was mentioned here https://github.com/carbon-design-system/carbon/issues/7581#issuecomment-1113437295

I'll make sure to bring that discussion in further meetings with the team.

[dkaushik95]

Thanks @guidari , please let me know if there's any other way we can achieve this without this change because we will be needing this functionality soon in our project.

[bradelectro]

@guidari This change will enable us to do the migration we need in our product, Instana. Can we please merge?

[tay1orjones]

This approach seems good to me. The design considerations on that issue are mostly related to the addition of increment "tics", which will still need a scalable solution for programatic/dynamic labels. I think this provides that pretty well. Seems like it would meet the needs of the increments feature if we do eventually take that on.

A few suggestions to get this closer to merge:

• [ ] Add unit tests covering the new behavior
• [ ] Condense both stories into one single story - I wonder if a name like "Slider With Custom Value Label" would make more sense to someone with no context on what the feature is or the props used?
• [ ] Add that story to AVT and VRT - each of these should first move focus to one of the slider handles (so a tooltip is visible) before running toBeAccessible or snapshotStory
• [ ] The aria-valuetext attribute needs to be placed on the input when using this label and the value should be updated just the same as the tooltip. Right now when using this with voiceover, only the numeric value is read while changing the value. You can get the "medium" to be read by pressing up or exiting the slider, but I think with aria-valuetext "medium" can be read instead or at least alongside/after the numeric value.

https://github.com/carbon-design-system/carbon/assets/3360588/99e7e96f-d40f-4de1-baa7-538327e4fb6b

[bradelectro]

@tay1orjones Thank you for being open to our suggestions. What is AVT / VRT please?

[guidari]

@tay1orjones Thank you for being open to our suggestions. What is AVT / VRT please?

Hey @bradelectro

• AVT testing is located in this pathe2e/components/Slider/Slider-test.avt.e2e.js. This test helps us finding any a11y issues and also validate against keyboard navigation.
• VRT testing is located in this path e2e/components/Slider/Slider-test.e2e.js. This test can guard us against any visual changes in the story.

I'm happy to help with this PR to get all checks that Taylor had mentioned.

[tay1orjones]

I had a conversation with @laurenmrice just now about the design-related concerns of this and we both agreed non-numeric labels are widely used enough (and supported in the a11y spec via aria-valuetext) that we should support it.

Also, If/when the increment/tics are implemented the intent is to allow the input to still be hidden, which means the dynamic tooltip value (the functionality in this PR) will be needed.

Once this PR is merged we'll revisit documentation on the website and determine how/if we should update it.

[dkaushik95]

Thanks @tay1orjones and @guidari. I’ll complete the tests and fix the a11y issue and let you know once I’m done.

[dkaushik95]

Here's what I've done:

• Added unit test to cover the new behavior for both variants
• Added VRT test using snapshotStory
• Added AVT test by checking the label after pressing tab and using toHaveNoACViolations
• Added the aria-valuetext and tested this by using VoiceOver on Mac. I was able to get the formatted values on change.

@guidari , @tay1orjones , can you please help me with verifying that the change works well? Thank you! :D