Accessibility: Tooltips cause screen readers to read out the slider value twice

[lyudmil]

Fiddle: https://jsfiddle.net/cL3vutr9/6/

Steps to repro

1. Run the fiddle
2. Start a screen reader and start interacting with the output

Expected result

The slider value should be read out once, and it should be clear it's the current value of the slider.

Actual result

Both the tooltip and the slider value are announced, causing confusion. For example, VoiceOver with Safari announces "5, 5, slider" instead of "5, slider".

The tooltip also receives focus when interacting with the div the slider is contained in, causing extra keystrokes and more confusing announcements (i.e. "5" with no context).

[lyudmil]

To fix this, I suggest removing role="presentation" from the tooltip elements and making them invisible to screen readers via aria-hidden="true". Slider values are already announced sensibly due to aria-valuetext, so the tooltips don't add value. In fact, if I understand correctly, the tooltip text is guaranteed to be the same as aria-valuetext, so repeated announcements are guaranteed unless the tooltips are hidden to screen readers.

[lyudmil]

I'm happy to submit a PR for this.