Slider: Temperature Selector Slider Example

[jongund]

I have created a new temperature selector example based on the discussion at the 20 April 2021 meeting to include the only the temperature selector slider to illustrate the use of aria-valuetext and aria-orientation.

Features:

• Appends temperature unit to aria-valuetext.
• 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.key
• Uses pointer events
• Uses the none 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 temperature 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

[mcking65]

@jongund

The meaning of this is not clear to me:

For people with visual impairments the current value of the slider is visible next to the thumb when it has focus or is being dragged.

What problem does this solve for people with visual impairments in particular?

[mcking65]

@jongund,

In valuetext, I wonder if using the degrees symbol instead of writing out the word "degrees" could impact announcement with some screen readers. We advise content designers to avoid using symbols in label strings at Facebook. However, the driver there might be translation. I'm not sure if there is generally accepted best practice around that.

Similarly, I am wondering if we want to use the letter "C" or write out celsius.

[jongund]

@jongund

The meaning of this is not clear to me:

For people with visual impairments the current value of the slider is visible next to the thumb when it has focus or is being dragged.

What problem does this solve for people with visual impairments in particular?

@mcking65
Updated the accessibility documentation to clarify the benefit.

[jongund]

@jongund,

In valuetext, I wonder if using the degrees symbol instead of writing out the word "degrees" could impact announcement with some screen readers. We advise content designers to avoid using symbols in label strings at Facebook. However, the driver there might be translation. I'm not sure if there is generally accepted best practice around that.

Similarly, I am wondering if we want to use the letter "C" or write out Celsius.

@mcking65
I don't have a strong opinion on the changing the aira-valuetext to use °C, it's an easy change if you want me to make it.

[mcking65]

@jongund

I think I now understand the meaning of:

The current value of the slider is visible next to the thumb, so when the thumb value is changed using a pointing device by a person with the visual impairment they can immediately see the change in value without have to move their visual attention to another part of the page.

However, that does not make it clear that the value display moves with the thumb. Is the following revision accurate?

The display of the slider's current value remains adjacent to the thumb as the thumb is moved, so people with a small field of view (e.g., due to magnification) can easily see the value while focusing on the thumb as they move it.

[mcking65]

@jongund
The last sentence of the high contrast documentation is:

In addition, some browsers the SVG rect elements may need to adjust their stroke-opacity and fill-opacity values in place of using the transparent value for setting the fill and stroke colors in high contrast modes.

The grammar is not correct. But, I can't correct it because I don't know what it means.

Who would need to adjust the opacity instead of using the transparent value? The author? Does our example adjust opacity or use the transparent value?

[mcking65]

@jongund

What does the styling on this heading do? We don't have it on the kb heading in other examples? Should it be removed?

[jongund]

@mcking65
I think some older examples may use the CSS float property, so this is probably a ruminant from some of those early examples to make sure the heading was on a new line. It can be removed.

[jongund]

@mcking65
I have also updated the description of using fill-opacity and removing references to transparent value. Please review whenyou get a chance.

[mcking65]

@jongund

Thank you for the help with the HCM documentation. I revised the focus ring sentences slightly to try to simplify and clarify a bit more. Here is where I landed. Is this wording clear and accurate?

To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. For example, the color of the focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS currentColor value for the stroke property of the inline SVG rect element used to draw the focus ring border. To make the background of the rect match the high contrast background color, the fill-opacity attribute of the rect is set to zero. If specific colors were instead used to specify the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentColor value to be updated in high contrast mode. Some browsers do not use auto for the default value.

[jongund]

@mcking65
The changes to HCM documentation look great!

[mcking65]

Editorial revisions and review complete. Looking great! Thank you, thank you @jongund for the fabulous work on this.

[a11ydoer]

I had to zoom in the example to activate and interact with slider thumb. Once I activate it, I could adjust the temperature. The exisiting problem is that the change is still annoucned as percentage, not as celsius degree. I have attached two screen shots, one is 22.4 celsicus as 44 percent, the other one is 34.1 celsius as 84 percent.

All the editorial changes look good to me.

[jesdaigle]

Everything looks good. There are still a few test failures but they're unrelated to this PR and are part of another effort to get APG into a "green" state.

[charmarkk]

Functions appropriately with Firefox/Chrome and NVDA/JAWS latest. HCM Black and White look good. Rock on!

[smhigley]

visual design looks good :)

[carmacleod]

This is an approving Accessibility Review for VO + Safari/Chrome on macOS

Fn+up/down arrows work for PageUp/PageDown in VoiceOver the same as with VO off (i.e. temperature goes up/down by 2 degrees instead of 1/10 degree). (Also works with PageUp/PageDown using a Windows keyboard).

Fn+left/right arrows for Home/End work oddly in VoiceOver: they do change the slider value to min/max as expected, but then they move the VO cursor to unexpected locations at the beginning and end of the Thermostat group. This seems like a VO bug and not anything in the example code. (Also tried Home/End using a Windows keyboard, with the same odd results).

So, other than the weirdness with Home/End, this example works well with VoiceOver on macOS.