fix(ui): use aria-valuetext and disabled attributes on Slider

[llfalcao]

What's the purpose of this pull request?

• Fixes an issue where screen readers wouldn't announce the value text provided by the prop getAriaValueText.
• Adds the missing disabled prop to both inputs.

How it works?

Currently, screen readers announce the elements's role (e.g. "horizontal slider", or "slider at") and then the input value. The prop getAriaValueText was supposed to allow a human-readable text containing the current value to be announced instead. However, it was assigned to the aria-labelledby prop instead of aria-valuetext. aria-labelledby should only be used to reference other elements (via ids) that will act as labels, instead of receiving formatted texts for the input values.

After the fix, screen readers should announce the slider's role and then the formatted text provided by the function getAriaValueText.

How to test it?

Aria Attributes

• Follow the Local Install Instructions from the CodeSandbox CI to update the package.json of a store;
• Import the Slider atom in a component following the docs: https://developers.vtex.com/docs/guides/faststore/atoms-slider
• Assign a function to the getAriaValueText prop that returns a custom value text;
• Enable your operating system's screen reader;
• Open the store in development mode;
• Click or move slider thumbs and verify that the screen reader announces your custom value text.

Disabled Attribute

• Pass the disabled prop to the Slider atom;
• Verify that the slider interaction is disabled.

References

MDN - aria-labelledby

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[llfalcao]

Updated PR title (slider -> ui).