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.

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

Slider thermostat update from focus group meeting results #1755

Closed
wants to merge 47 commits into from
Closed
Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
94a201e
updated slider thermostat example
jongund Feb 6, 2021
4ffb3f3
changed mouse to pointre events
jongund Feb 6, 2021
6b7f123
updated thermostat slider example to use pointer events
jongund Feb 8, 2021
9a9cdfd
updated regression tests to handle fixed point values
jongund Feb 8, 2021
9d23850
fixed html lintning bugs
jongund Feb 8, 2021
43b0c2e
fixed label bug
jongund Feb 8, 2021
bd029cd
fixed spelling bugs
jongund Feb 8, 2021
a01f526
added touch action
jongund Feb 8, 2021
512b738
added test to slider-thermostat
jongund Feb 9, 2021
8a1457d
added touch advisement
jongund Feb 9, 2021
96d161b
added meta tag, removed output element and updated code to limit value
jongund Feb 16, 2021
46d44af
update thermostate slider to use SVG for buttons and temperatiure label
jongund Feb 18, 2021
13d7ba4
updated documentation and test cases for SVG buttons
jongund Feb 18, 2021
7eb3d92
fixed button keyboard tests
jongund Feb 18, 2021
fbfa8ce
updated documentation
jongund Feb 18, 2021
d46d44b
fixed linting bug
jongund Feb 18, 2021
e7cb21d
removed outer focus ring and updated documentation
jongund Feb 24, 2021
685aef1
added documentation about using inline SVG
jongund Feb 25, 2021
5994034
updated documentation
jongund Mar 2, 2021
a2925e5
updated documentation page up and down keys
jongund Mar 3, 2021
eb553e5
updated warning documentation
jongund Mar 3, 2021
431ed2f
updated thermostat example to remove buttons and update reference links
jongund Mar 9, 2021
ae54aed
updated regression tests
jongund Mar 9, 2021
bfe0a82
fixing linter issues
jongund Mar 9, 2021
d0149a2
updated reference tables
jongund Mar 9, 2021
3636aea
updated documentation
jongund Mar 9, 2021
c8bec70
removed focus and blur event handlers
jongund Mar 16, 2021
1dfbbba
restored CSS
jongund Mar 16, 2021
5ecf7c2
fixed currentColor issue in high contast
jongund Mar 16, 2021
09c49a5
updated code to set the value used by the SVG onload based on current…
jongund Mar 18, 2021
e1c769f
flixed linting errors
jongund Mar 18, 2021
b17a15b
flixed linting errors
jongund Mar 18, 2021
3ba5d26
updated documentation on defining the color attribute on the SVG elem…
jongund Mar 22, 2021
ec91f48
updated documentation on defining the color attribute on the SVG elem…
jongund Mar 22, 2021
de3da6d
updated documentation on defining the color attribute on the SVG elem…
jongund Mar 22, 2021
add99db
updated example to use none on SVG elements and hide fan labels
jongund Mar 23, 2021
cc67bf9
updated reference tables
jongund Mar 23, 2021
3f53489
changed role=none ot role=presentation due to linting error
jongund Mar 23, 2021
51fe8c7
updated regression test to use role=presentation
jongund Mar 23, 2021
593c6c4
Merge branch 'main' into slider-thermostat-update
jongund Mar 23, 2021
6262ea8
updated reference tables
jongund Mar 23, 2021
bcbdeed
added validator exception
jongund Mar 23, 2021
54857fc
added validator exception
jongund Mar 23, 2021
27c01df
changed role to none on SVG elements
jongund Mar 23, 2021
61f3cb0
updated documentation and JS initialization script
jongund Mar 23, 2021
7a927c6
fixed miss spelled word and updated CSS
jongund Mar 23, 2021
bd7967a
updated documentation
jongund Mar 24, 2021
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
30 changes: 30 additions & 0 deletions .husky/_/husky.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
#!/bin/sh
if [ -z "$husky_skip_init" ]; then
debug () {
[ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
}

readonly hook_name="$(basename "$0")"
debug "starting $hook_name..."

if [ "$HUSKY" = "0" ]; then
debug "HUSKY env variable is set to 0, skipping hook"
exit 0
fi

if [ -f ~/.huskyrc ]; then
debug "sourcing ~/.huskyrc"
. ~/.huskyrc
fi

export readonly husky_skip_init=1
sh -e "$0" "$@"
exitCode="$?"

if [ $exitCode != 0 ]; then
echo "husky - $hook_name hook exited with code $exitCode (error)"
exit $exitCode
fi

exit 0
fi
2 changes: 2 additions & 0 deletions .vnurc
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,5 @@ The “row” role is unnecessary for element “tr”.
Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”.
# https://github.com/w3c/aria-practices/issues/1678
Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections.
# https://github.com/validator/validator/issues/1096
An “svg” element can have a “role” attribute.
Copy link
Contributor

Choose a reason for hiding this comment

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

The supressions work by string matching, so it's the exact error message (or a regex)

Suggested change
An “svg” element can have a “role” attribute.
Bad value “presentation” for attribute “role” on element “svg”.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks @nschonni

2 changes: 1 addition & 1 deletion aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -2362,7 +2362,7 @@ <h3>Slider</h3>
<h4>Examples</h4>
<ul>
<li><a href="examples/slider/slider-color-viewer.html">Color Viewer Slider Examples</a>: Demonstrates using three horizontally aligned sliders to make a color viewer.</li>
<li><a href="examples/slider/slider-2.html">Slider Examples with aria-orientation and aria-valuetext</a>: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.</li>
<li><a href="examples/slider/slider-thermostat.html">Slider Examples with aria-orientation and aria-valuetext</a>: Three thermostat control sliders that demonstrate using aria-orientation and aria-valuetext.</li>
</ul>
</section>

Expand Down
20 changes: 14 additions & 6 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
<li><a href="checkbox/checkbox-1/checkbox-1.html">Checkbox (Two State)</a></li>
<li><a href="menubar/menubar-editor.html">Editor Menubar</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="treeview/treeview-navigation.html">Navigation Treeview</a></li>
</ul>
Expand Down Expand Up @@ -251,6 +252,10 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
</ul>
</td>
</tr>
<tr>
<td><code>presentation</code></td>
<td><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></td>
</tr>
<tr>
<td><code>radio</code></td>
<td>
Expand Down Expand Up @@ -303,8 +308,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></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -552,6 +557,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<td>
<ul>
<li><a href="dialog-modal/alertdialog.html">Alert Dialog</a></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></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 @@ -588,6 +594,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
<li><a href="table/table.html">Table</a></li>
<li><a href="tabs/tabs-1/tabs.html">Tabs with Automatic Activation</a></li>
Expand Down Expand Up @@ -625,6 +632,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
<li><a href="radio/radio-activedescendant.html">Radio Group Using aria-activedescendant</a></li>
<li><a href="radio/radio.html">Radio Group Using Roving tabindex</a></li>
<li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></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 @@ -678,7 +686,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
</tr>
<tr>
<td><code>aria-orientation</code></td>
<td><a href="slider/slider-2.html">Slider with aria-orientation and aria-valuetext</a></td>
<td><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></td>
</tr>
<tr>
<td><code>aria-owns</code></td>
Expand Down Expand Up @@ -767,8 +775,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></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></li>
<li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
</ul>
</td>
Expand All @@ -779,8 +787,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></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></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 @@ -792,8 +800,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></li>
<li><a href="slider/slider-thermostat.html">Slider with aria-orientation and aria-valuetext</a></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 @@ -804,7 +812,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-thermostat.html">Slider with aria-orientation and aria-valuetext</a></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
110 changes: 110 additions & 0 deletions examples/slider/css/slider-thermostat.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/* CSS Document */

.thermostat h3 {
color: black;
font-weight: bold;
font-size: 150%;
}

.slider-thermostat-vertical .slider-group {
touch-action: pan-x;
}

.slider-thermostat-text .slider-group {
touch-action: pan-y;
}

.slider-thermostat {
margin-top: 1em;
padding: 6px;
width: 12em;
color: black;
}

.slider-thermostat.text {
width: 14em;
}

.slider-thermostat .label {
font-weight: bold;
fill: currentColor;
color: currentColor;
}

.slider-thermostat .value {
position: relative;
top: 20px;
height: 1.5em;
font-size: 80%;
fill: currentColor;
}

.slider-thermostat.vertical .temp-value {
padding-left: 24px;
font-weight: bold;
font-size: 200%;
font-family: sans-serif;
fill: currentColor;
color: currentColor;
}

.slider-thermostat .rail {
stroke: currentColor;
stroke-width: 2px;
fill: currentColor;
fill-opacity: 25%;
}

.slider-thermostat .thumb {
stroke-width: 0;
fill: currentColor;
}

.slider-thermostat .focus {
stroke-width: 3px;
stroke: transparent;
fill: transparent;
}

.slider-thermostat.text .value-label rect {
fill: transparent;
stroke-width: 2px;
stroke: transparent;
}

.slider-thermostat.text .value-label text {
fill: currentColor;
font-weight: bold;
}

/* Focus and hover styling */

.slider-thermostat.text .value-label:hover rect {
stroke: currentColor;
}

.slider-thermostat.focus [role="slider"] {
color: #005a9c;
}

.slider-thermostat.focus [role="slider"] .rail {
stroke: currentColor;
fill: #adddff;
}

.slider-thermostat [role="slider"]:focus {
outline: none;
}

.slider-thermostat [role="slider"]:focus .focus {
stroke: currentColor;
}

.slider-thermostat [role="slider"]:focus .thumb {
fill: currentColor;
}

.slider-thermostat.vertical [role="slider"]:focus .value {
font-weight: bold;
fill: currentColor;
}
48 changes: 0 additions & 48 deletions examples/slider/css/text-slider.css

This file was deleted.

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

This file was deleted.

Loading