I have updated the rating slider based on the visual styling of the Survey Monkey Customer Satisfaction Survey Template<https://www.surveymonkey.com/mp/customer-satisfaction-survey-questions/>.
The updated visual styling of the example has connected rectangles around each rating value and the selected rating value is larger than the other rating values, has a different forground/background colors and the value is bolded. The larger rectangle and bolding of the selected value is to meet the WCAG requirements of more than just changing the foreground/background colors of the selected value. Also increased the size of the operable area of each rating value to meet WCAG 2.2 minimum size requirements.
URL to a preview of the updated example:
<https://deploy-preview-271--aria-practices.netlify.app/aria/apg/patterns/slider/examples/slider-rating/>
[social-sharing-default.jpg]
Rating Slider Example<https://deploy-preview-271--aria-practices.netlify.app/aria/apg/patterns/slider/examples/slider-rating/>
deploy-preview-271--aria-practices.netlify.app<https://deploy-preview-271--aria-practices.netlify.app/aria/apg/patterns/slider/examples/slider-rating/>
PLEASE TAKE A MINUTE and review the new visual styling and place your comments in the Github Pull request:
<https://github.com/w3c/aria-practices/pull/2831>
[2831.png]
Rating Slider Example: Redesign as an input for 10-value satisfaction scale by jongund · Pull Request #2831 · w3c/aria-practices<https://github.com/w3c/aria-practices/pull/2831>
github.com<https://github.com/w3c/aria-practices/pull/2831>
Thank you for your help,
Jon
