Rating Slider Example: Redesign as an input for 10-value satisfaction scale

[jongund]

Resolve #2501 by redesigning rating slider to be an input for an 10 point satisfaction scale.

Features:

• 0 value of the slider means no satisfaction rating has been selected, this is the value when rating slider is initialized.
• User can only select values between 1-10.

Preview link

Preview Updated Rating Slider Example

Review checklist

Reviewers: To learn what needs to be covered by each review, Follow the link for the type of review to which you are assigned.

• Editorial review by @mcking65
• Functional review by @curtbellew
• Visual design review by @ariellalgilmore
• Accessibility review by @ariellalgilmore
• Code review by @andreancardona
• Test review by @a11ydoer
• [Color contrast] color contrast by @a11ydoer

---

WAI Preview Link (Last built on Mon, 18 Dec 2023 04:17:54 GMT).

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Slider Example.

The full IRC log of that discussion

<jongund> TOPIC: Slider Example
<Matt_King> github: https://github.com//pull/2831
<jongund> MK: I have looked at it, but not commented
<jongund> MK: It seems to address the issue problems
<jongund> https://deploy-preview-271--aria-practices.netlify.app/aria/apg/patterns/slider/examples/slider-rating/
<jongund> MK: My first thought is about the wording of the label, and the number of items in the scale
<jongund> MK: Normally they are 10 point scales, not 11 points
<jongund> MK: The scale is extremely dissatisified to extremly satisified
<jongund> MK: The found the wording confusing
<jongund> JG: In the previous example we just talked about stars
<jongund> MK: What do people expect in a 10 point satisfaction scale
<jongund> MK: Do we want words to label the numbers
<jongund> JG: Let's make it simplier, use a 10 point scale
<jongund> MK: We do not a 0-10 point scale in the label
<jongund> CB: I think the label could be shorter
<jongund> AC: Can we use 0-5 instead of 10?
<jongund> MK: We radio have the radio one for the 5 point scale
<jongund> MK: We wanted a longer scale to demonstrate where slider is better than radio pattern
<jongund> MK: Shorten from 1-10, rather than 010
<jongund> JG: The ratings will only have text labels on 1 and 10
<jongund> CB: For some reason I thought value max and min are announced by JAWS
<jongund> MK: We have an issue in ARIA-AT on this issue
<jongund> MK: If you have aria-min and aria-max and you are using ara-valuetext
<jongund> MK: aria-min and aria-max can only be numbers
<jongund> JG: The range is 0-10, but the user can only select between 1-10
<jongund> MK: That seems to make sense
<jongund> MK: The range should be from 1 - 10, instead of 0 - 10.
<jongund> JG: Our documentation says that we need a aria-valuenow between aria-valuemin and aria-valuemax
<jongund> JG: Dynamically changing the range has many problems
<jongund> MK: We can do what you are doing right now, since it conforms to the spec
<jongund> MK: What is the screen reader going to hear if there is a minimum value

[jongund]

@mcking65
I made the changes to the rating slider example, should be ready for review

[jongund]

@mcking65
The link checker errors are on files that I did not touch, maybe do to some of the problems with the slow website response.

[mcking65]

Thank you @jongund, this is great!!

When I tried with VO on chrome, the VO speech is kind of wonky at the ends of the scale. I hope that is a VO/Chrome issue. It is worth investigating. If you press right arrow until you get to 10, VO says 9. Then pressing left it says 10. then pressing right is says 9. I get similar behavior at the low end of the scale. I don't have a similar problem on Windows, so I'm guessing it is not related to the JavaScript unless there is a js interop bug in the mix.

[jongund]

@mcking65

What do you think of the 1 rating being labelled "Not At All Satisfied", instead of "Extremely Dissatisfied"?
"Extremely Dissatisfied" doesn't sound quite right to me, but I can live with it for the example.

[jongund]

@mcking65 '
i could not replicate the problem with VO saying 9 when on the value 10 on Chrome, Safari or Firefox
Not sure what is going on, it works fine for me.
The HOME and END keys are a different story with VO, they do not work for me.

[mcking65]

@jongund asked:

What do you think of the 1 rating being labelled "Not At All Satisfied", instead of "Extremely Dissatisfied"? "Extremely Dissatisfied" doesn't sound quite right to me, but I can live with it for the example.

I think extremely dissatisfied is the most appropriate label. It is the inversion of extremely satisfied, and it is common on such scales.

[a11ydoer]

@mcking65 The review of forced color regarding color contrast was done. The documentation is also updated in accessibility review section

[mcking65]

@a11ydoer @jnurthen @jongund

There is an unresolve comment by @jnurthen on line 46 of content/patterns/slider/examples/css/slider-rating.css.

[mcking65]

I have completed editorial review.

@jongund @a11ydoer

I made quite a few changes to content in all sections of the example page in addition to changing links on 5 other pages. My changes should be easy to distinguish by looking at the list of commits; I tried to make the commit titles descriptive. I'm re-requesting reviews from you to double-check my work.

[mcking65]

Friendly nudg to @ariellalgilmore for accessibility review and @andreancardona for code review.

[mcking65]

@jongund, since this is your PR, I can't request review from you, but I'd like it if you were to double-check the changes I made in the last 10 commits.

[ariellalgilmore]

accessibility looks good to me!!

[a11ydoer]

The mouse and touch (without a screen reader running) are working as expected on Windows, macOS, iOS, and Android.

[a11ydoer]

The clarification for "user freindly" was done via this commit.

[a11ydoer]

I see the clarification on " less friendly" concept via revised commit. - "significantly increase efficiency for users who rely on keyboard navigation to perceive options and make a selection."
Great job and this is approved.

[curtbellew]

Tested with mouse and on mobile and found no issues. Looks great.