Updated slider examples using aria-valuetext based on 6 April 2021 meeting

[jongund]

I have created a new example based on the discussion at the 6 April 2021 meeting to include the temperature slider, remove fan speed slider and a new media seek slider to illustrate the use of aria-valuetext.

Features.Changes:

• Example uses SVG graphics elements
• Increased size of clickable area on rail to change value with pointing device
• Has high contrast support
• Code to use APG coding practices
• Uses event.keyCode
• Uses pointer events
• Uses the presentation role on SVG element
• Sets the CSS property forced-color-adjust to auto on the SVG elements.
• Using stroke-opacity and fill-opacity instead of transparent values for setting stroke and fill colors for the SVG rect used for focus ring for high contrast mode.

Preview media seek slider example

Review checklist

• Editorial review by @mcking65
• Functional review by @carmacleod
• Visual design review by @smhigley
• Accessibility review on Windows by @charmarkk
• Accessibility review on MacOS by @carmacleod
• Accessibility review on iOS/iPadOS by @jongund
• Accessibility review on Android by @a11ydoer (Note Talkback problem in the comment)
• Code review by @jesdaigle
• Test review by @jesdaigle

---

Preview | Diff

[jscholes]

@jongund Thanks for your work on this! Some initial thoughts:

1. I think there are some outstanding decisions from Addressing Slider Update Concerns #1847 that will have an impact on this example. E.g. it was my understanding that the different values for aria-orientation could be demonstrated by having seek (horizontal) and volume (vertical) sliders on the same page, making a thematically consistent example rather than the seek bar and temperature sliders being together.
2. Having both on one page would also allow for shorter labels ("Seek" and "Volume" rather than "Media Seek").
3. Do we want the seek bar to indicate the maximum value (i.e. the total duration) in its value text? For example, "1 minute 30 seconds of 5 minutes".
4. In aria-valuetext, the number of seconds is zero-padded so you get announcements like, "1 minute 0 0 seconds" and "2 minutes 0 5 seconds".
5. When the number of minutes is less than 1, should only the seconds be included in aria-valuetext (rather than "0 minutes N seconds")?

[jongund]

@jscholes
Thank you for the feedback on aria-valuetext, I updated the calculation, let me know what you think.
Separating the two slides we can discuss on Tuesday, unless Matt King responds with a definitive direction.

[smhigley]

visuals & approach look good to me!

[smhigley]

I'd suggest splitting each class to its own JS file, just to make them easier to find and read, but since it's already been suggested that we only have one example per page, that's probably happening anyway.

[jongund]

This pull request is no longer needed sine the two example were split to create pull #1863 and pull #1864.

[a11ydoer]

Thanks, @jongund !