Skip to content

Commit

Permalink
Add new example of rating slider (pull #1867)
Browse files Browse the repository at this point in the history 
Adds rating slider example that:
* Uses SVG graphics elements 
* Has high contrast support 
* Implements current APG coding practices, including transition to pointer events.

Co-authored-by: Matt King <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 committed May 18, 2021
1 parent 9455054 commit 35bff94
Show file tree
Hide file tree
Showing 11 changed files with 1,171 additions and 1,621 deletions.
17 changes: 7 additions & 10 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,8 +342,8 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<td>
<ul>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -602,6 +602,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="button/button_idl.html">Button (IDL Version)</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand Down Expand Up @@ -657,8 +658,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
<li><a href="tabs/tabs-2/tabs.html">Tabs with Manual Activation</a></li>
Expand Down Expand Up @@ -710,10 +711,6 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td><code>aria-multiselectable</code></td>
<td><a href="listbox/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></td>
</tr>
<tr>
<td><code>aria-orientation</code></td>
<td><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></td>
</tr>
<tr>
<td><code>aria-owns</code></td>
<td><a href="treeview/treeview-navigation.html">Navigation Treeview</a></td>
Expand Down Expand Up @@ -806,8 +803,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -819,8 +816,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -832,8 +829,8 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<ul>
<li><a href="meter/meter.html">Meter</a></li>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand All @@ -844,7 +841,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="slider/multithumb-slider.html">Horizontal Multi-Thumb Slider</a></li>
<li><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="toolbar/toolbar.html">Toolbar</a></li>
</ul>
Expand Down
97 changes: 97 additions & 0 deletions examples/slider/css/slider-rating.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/* CSS Document */

.rating-slider label {
display: block;
}

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

.rating-slider svg {
forced-color-adjust: auto;
touch-action: pan-y;
}

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

.rating-slider svg .star {
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 {
fill: currentColor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
fill: currentColor;
fill-opacity: 1;
}

.rating-slider[aria-valuenow="1"] svg .star-1 .star {
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[aria-valuenow="2"] svg .star-2 .star {
fill: currentColor;
fill-opacity: 1;
}

.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[aria-valuenow="3"] svg .star-3 .star {
fill: currentColor;
fill-opacity: 1;
}

.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[aria-valuenow="4"] svg .star-4 .star {
fill: currentColor;
fill-opacity: 1;
}

.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;
}

/* focus styling */

.rating-slider:focus {
outline: none;
}

.rating-slider:focus svg .focus-ring {
stroke-width: 2px;
stroke: currentColor;
}
48 changes: 0 additions & 48 deletions examples/slider/css/text-slider.css
View file

This file was deleted.

51 changes: 0 additions & 51 deletions examples/slider/css/vertical-slider.css
View file

This file was deleted.

Loading

0 comments on commit 35bff94

Please sign in to comment.