Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 55 commits into from
Dec 18, 2023
Merged

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

Show file tree
Hide file tree
Changes from 43 commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
45a09d6
updated slider to create a licket scale
jongund Sep 27, 2023
566780e
Merge branch 'main' into update/rating-slider
jongund Oct 5, 2023
452abe0
update rating slider example
jongund Oct 6, 2023
a93b182
updated example documentation
jongund Oct 7, 2023
578f97f
updated example documentation
jongund Oct 7, 2023
df37681
updated labeling
jongund Oct 7, 2023
fe20292
fixed regression tests
jongund Oct 8, 2023
85dae46
updated rating documentation
jongund Oct 8, 2023
ceaa0d8
fixed validation errors
jongund Oct 8, 2023
bf46ad4
fixed validation errors
jongund Oct 8, 2023
cf67540
fixed validation errors
jongund Oct 8, 2023
4efd671
fixed validation error
jongund Oct 9, 2023
e9ed9a1
fixed bugs with pointer events
jongund Oct 9, 2023
88d1277
udpated slider based on meeting feedback
jongund Oct 10, 2023
bf97468
updated documentation
jongund Oct 10, 2023
81989a5
updated documentation
jongund Oct 10, 2023
c3ad48c
fixed focus outline on DIV element issue
jongund Oct 11, 2023
34b491d
updated visual styling of rating slider, selected rating value and fo…
jongund Oct 19, 2023
579fe1c
updated offset
jongund Oct 19, 2023
8e45785
updated rating slider width
jongund Oct 31, 2023
8fc0b22
reduced with to rating bar
jongund Oct 31, 2023
6cef06e
made rail responsive
jongund Nov 8, 2023
68305b1
fixed some resizing bugs
jongund Nov 9, 2023
0093ef4
fixed some bugs in resizing
jongund Nov 9, 2023
ca9fb0d
added support for windows high contrast support
jongund Nov 14, 2023
0b079c9
updated documentation for rating slider
jongund Nov 14, 2023
802d6e9
added media query for forced colors
jongund Nov 14, 2023
a7f4dd3
updated @media documentation
jongund Nov 14, 2023
1da4e84
fixed positioning bug
jongund Nov 14, 2023
7911cac
updated description text color
jongund Nov 14, 2023
46cb2bb
updated text element height calc
jongund Nov 15, 2023
240c65c
updated label height calc
jongund Nov 15, 2023
7e65ec0
removed debugging code
jongund Nov 15, 2023
453b580
changed styling of selected value
jongund Nov 15, 2023
4fae83a
fixed linting errors
jongund Nov 15, 2023
9c21e04
fixed linting errors
jongund Nov 16, 2023
6729e7c
refactored js code
jongund Nov 16, 2023
7383879
fixed pointer bug
jongund Nov 29, 2023
a55cff5
fixed linting errors
jongund Nov 29, 2023
10da896
removed files not part of pull request
jongund Nov 29, 2023
474dc01
improved JS readability
jongund Dec 1, 2023
3d642b2
Update content/patterns/slider/examples/slider-rating.html
andreancardona Dec 5, 2023
e2afde9
Update content/patterns/slider/examples/slider-rating.html
andreancardona Dec 5, 2023
9836f05
Correct link text for rating radio example
mcking65 Dec 11, 2023
7bf1bd5
Revise 'about this example' section to explain use of slider compared…
mcking65 Dec 11, 2023
74079af
Editorial clarification of accessibility features
mcking65 Dec 11, 2023
234c572
Keyboard documenation: correct home and end descriptions
mcking65 Dec 11, 2023
ef3a763
Editorial revisions to states and properties documentation
mcking65 Dec 11, 2023
620cbad
correct spelling
mcking65 Dec 11, 2023
83fd3e0
Revise valuetext strings to be more understandable for screen reader …
mcking65 Dec 11, 2023
8553fb6
Correct link text for rating slider in slider pattern
mcking65 Dec 11, 2023
38aff35
Correct link text for rating slider on rating radio example page
mcking65 Dec 11, 2023
7425522
Correct lists of similar examples on other slider example pages
mcking65 Dec 11, 2023
1405105
Editorial revision to 'About this example' based on discussion in Dec…
mcking65 Dec 17, 2023
71170a3
Update regression tests to support new valutext strings
mcking65 Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 54 additions & 49 deletions content/patterns/slider/examples/css/slider-rating.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

.rating-slider {
color: #005a9c;
user-select: none;
}

.rating-slider svg {
Expand All @@ -14,84 +15,88 @@
}

.rating-slider svg .focus-ring {
fill: #eee;
fill: currentcolor;
stroke-width: 0;
fill-opacity: 0;
}

.rating-slider svg .star {
.rating-slider svg .target {
stroke-width: 2px;
stroke: currentcolor;
fill-opacity: 0;
}

.rating-slider svg .fill-left,
.rating-slider svg .fill-right {
stroke-width: 0;
fill-opacity: 0;
}

.rating-slider[aria-valuenow="5"] svg .star {
.rating-slider svg .label {
font-size: 90%;
font-family: sans-serif;
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
fill: currentcolor;
fill-opacity: 1;
.rating-slider svg .description {
font-size: 90%;
fill: canvastext;
}

.rating-slider[aria-valuenow="1"] svg .star-1 .star {
.rating-slider svg .current .target {
fill: currentcolor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
fill: currentcolor;
fill-opacity: 1;
.rating-slider svg .current .label {
fill: white;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this one hardcoded to white? Isn't there a named color we could use here?

font-weight: bold;
}

.rating-slider[aria-valuenow="2"] svg .star-2 .star {
fill: currentcolor;
fill-opacity: 1;
}
/* focus styling */

.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
fill: currentcolor;
fill-opacity: 1;
.rating-slider:focus,
.rating-slider:focus-visible {
outline: none !important;
}

.rating-slider[aria-valuenow="3"] svg .star-3 .star {
fill: currentcolor;
fill-opacity: 1;
.rating-slider svg .focus {
stroke-width: 0;
stroke: currentcolor;
fill-opacity: 0;
}

.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
fill: currentcolor;
fill-opacity: 1;
.rating-slider:focus svg .focus-ring {
stroke-width: 2px;
stroke: currentcolor;
}

.rating-slider[aria-valuenow="4"] svg .star-4 .star {
fill: currentcolor;
fill-opacity: 1;
}
@media (forced-colors: active) {
.rating-slider svg .focus-ring {
fill: linktext;
}

.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
fill: currentcolor;
fill-opacity: 1;
}
.rating-slider svg .target {
stroke: linktext;
}

/* focus styling */
.rating-slider svg .label {
fill: linktext;
}

.rating-slider:focus {
outline: none;
}
.rating-slider svg .description {
fill: linktext;
}

.rating-slider:focus svg .focus-ring {
stroke-width: 2px;
stroke: currentcolor;
.rating-slider svg .current .target {
fill: linktext;
}

.rating-slider svg .current .label {
fill: canvas;
}

/* focus styling */

.rating-slider svg .focus {
stroke: linktext;
}

.rating-slider:focus svg .focus-ring {
stroke: linktext;
}
}
Loading
Loading