From 85d656436e8932f78b799b7538017a37033e425a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Feb 2021 10:44:45 -0600 Subject: [PATCH 01/35] updated multithumb slider example from slider focus group meeting --- examples/index.html | 10 +- examples/slider/css/multithumb-slider.css | 48 --- examples/slider/css/slider-multithumb.css | 98 +++++ examples/slider/js/multithumb-slider.js | 235 ----------- examples/slider/js/slider-multithumb.js | 394 ++++++++++++++++++ examples/slider/multithumb-slider.html | 277 ------------ examples/slider/slider-multithumb.html | 287 +++++++++++++ ...tithumb.js => slider_slider-multithumb.js} | 15 +- 8 files changed, 792 insertions(+), 572 deletions(-) delete mode 100644 examples/slider/css/multithumb-slider.css create mode 100644 examples/slider/css/slider-multithumb.css delete mode 100644 examples/slider/js/multithumb-slider.js create mode 100644 examples/slider/js/slider-multithumb.js delete mode 100644 examples/slider/multithumb-slider.html create mode 100644 examples/slider/slider-multithumb.html rename test/tests/{slider_multithumb.js => slider_slider-multithumb.js} (98%) diff --git a/examples/index.html b/examples/index.html index 2874c16147..f0195c1f64 100644 --- a/examples/index.html +++ b/examples/index.html @@ -298,9 +298,9 @@

Examples by Role

slider @@ -755,9 +755,9 @@

Examples By Properties and States

@@ -767,9 +767,9 @@

Examples By Properties and States

@@ -780,9 +780,9 @@

Examples By Properties and States

@@ -792,8 +792,8 @@

Examples By Properties and States

aria-valuetext diff --git a/examples/slider/css/multithumb-slider.css b/examples/slider/css/multithumb-slider.css deleted file mode 100644 index a442e09d2f..0000000000 --- a/examples/slider/css/multithumb-slider.css +++ /dev/null @@ -1,48 +0,0 @@ -/* CSS Document */ - -div.aria-widget-slider { - clear: both; - padding-top: 0.5em; - padding-bottom: 1em; -} - -div.rail-label { - padding-right: 0.5em; - text-align: right; - float: left; - width: 4em; - position: relative; - top: -0.5em; -} - -div.rail-label.max { - padding-left: 0.5em; - text-align: left; -} - -div.aria-widget-slider .rail { - background-color: #eee; - border: 1px solid #888; - position: relative; - height: 4px; - float: left; -} - -div.aria-widget-slider img[role="slider"] { - position: absolute; - padding: 0; - margin: 0; - top: -10px; -} - -div.aria-widget-slider img[role="slider"].focus, -div.aria-widget-slider img[role="slider"]:hover { - outline-color: rgb(140, 203, 242); - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; -} - -div.aria-widget-slider .rail.focus { - background-color: #aaa; -} diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css new file mode 100644 index 0000000000..61d163392b --- /dev/null +++ b/examples/slider/css/slider-multithumb.css @@ -0,0 +1,98 @@ +/* CSS Document */ + +.slider-multithumb { + padding: 6px; + width: 350px; +} + +.slider-multithumb.focus { + padding: 4px; + border: 2px solid #005a9c; + border-radius: 5px; +} + +.slider-multithumb.mobile { + clear: both; + display: grid; + grid-template-columns: 100px 340px 100px; + grid-column-gap: 10px; + width: 550px; +} + +.slider-multithumb.mobile .input-minimum, +.slider-multithumb.mobile .input-maximum { + position: relative; + top: 32px; + height: 1.5em; +} + +.slider-multithumb.mobile .input-minimum { + grid-column: 1; +} + +.slider-multithumb.mobile .input-maximum { + grid-column: 3; +} + +.slider-multithumb.mobile .slider-group { + grid-column: 2; +} + +.slider-multithumb.mobile .input-minimum input, +.slider-multithumb.mobile .input-maximum input { + width: 4em; +} + +.slider-multithumb .slider-group .value { + font-size: 80%; + color: currentColor; + fill: currentColor; +} + +.slider-multithumb .slider-group .rail { + stroke: currentColor; + stroke-width: 2px; + fill: #ccc; +} + +.slider-multithumb .slider-group .thumb { + stroke: transparent; + stroke-width: 2px; + fill: currentColor; +} + +.slider-multithumb .slider-group .focus { + stroke-width: 3px; + stroke: transparent; + fill: transparent; + stroke-linecap: round; + stroke-linejoin: round; +} + +/* Focus and hover styling */ + +.slider-multithumb.focus .slider-group { + color: #005a9c; +} + +.slider-multithumb.focus .slider-group .rail { + stroke: currentColor; + fill: #adddff; +} + +.slider-multithumb [role="slider"]:focus { + outline: none; +} + +.slider-multithumb [role="slider"]:focus .focus { + stroke: currentColor; +} + +.slider-multithumb [role="slider"]:focus .thumb { + stroke: currentColor; +} + +.slider-multithumb [role="slider"]:focus .value { + color: currentColor; + font-weight: bold; +} diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js deleted file mode 100644 index b71eb2bb82..0000000000 --- a/examples/slider/js/multithumb-slider.js +++ /dev/null @@ -1,235 +0,0 @@ -/* - * This content is licensed according to the W3C Software License at - * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document - * - * File: slider.js - * - * Desc: Slider widget that implements ARIA Authoring Practices - */ - -'use strict'; - -// Create Slider that contains value, valuemin, valuemax, and valuenow -var Slider = function (domNode) { - this.domNode = domNode; - this.railDomNode = domNode.parentNode; - - this.labelDomNode = false; - this.minDomNode = false; - this.maxDomNode = false; - - this.valueNow = 50; - - this.railMin = 0; - this.railMax = 100; - this.railWidth = 0; - this.railBorderWidth = 1; - - this.thumbWidth = 20; - this.thumbHeight = 24; - - this.keyCode = Object.freeze({ - left: 37, - up: 38, - right: 39, - down: 40, - pageUp: 33, - pageDown: 34, - end: 35, - home: 36, - }); -}; - -// Initialize slider -Slider.prototype.init = function () { - if (this.domNode.previousElementSibling) { - this.minDomNode = this.domNode.previousElementSibling; - this.railMin = parseInt(this.minDomNode.getAttribute('aria-valuemin')); - } else { - this.railMin = parseInt(this.domNode.getAttribute('aria-valuemin')); - } - - if (this.domNode.nextElementSibling) { - this.maxDomNode = this.domNode.nextElementSibling; - this.railMax = parseInt(this.maxDomNode.getAttribute('aria-valuemax')); - } else { - this.railMax = parseInt(this.domNode.getAttribute('aria-valuemax')); - } - - this.valueNow = parseInt(this.domNode.getAttribute('aria-valuenow')); - - this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2)); - - if (this.domNode.classList.contains('min')) { - this.labelDomNode = this.domNode.parentElement.previousElementSibling; - } - - if (this.domNode.classList.contains('max')) { - this.labelDomNode = this.domNode.parentElement.nextElementSibling; - } - - if (this.domNode.tabIndex != 0) { - this.domNode.tabIndex = 0; - } - - this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); - this.domNode.addEventListener('mousedown', this.handleMouseDown.bind(this)); - this.domNode.addEventListener('focus', this.handleFocus.bind(this)); - this.domNode.addEventListener('blur', this.handleBlur.bind(this)); - - this.moveSliderTo(this.valueNow); -}; - -Slider.prototype.moveSliderTo = function (value) { - var valueMax = parseInt(this.domNode.getAttribute('aria-valuemax')); - var valueMin = parseInt(this.domNode.getAttribute('aria-valuemin')); - - if (value > valueMax) { - value = valueMax; - } - - if (value < valueMin) { - value = valueMin; - } - - this.valueNow = value; - this.dolValueNow = '$' + value; - - this.domNode.setAttribute('aria-valuenow', this.valueNow); - this.domNode.setAttribute('aria-valuetext', this.dolValueNow); - - if (this.minDomNode) { - this.minDomNode.setAttribute('aria-valuemax', this.valueNow); - } - - if (this.maxDomNode) { - this.maxDomNode.setAttribute('aria-valuemin', this.valueNow); - } - - var pos = Math.round( - ((this.valueNow - this.railMin) * - (this.railWidth - 2 * (this.thumbWidth - this.railBorderWidth))) / - (this.railMax - this.railMin) - ); - - if (this.minDomNode) { - this.domNode.style.left = - pos + this.thumbWidth - this.railBorderWidth + 'px'; - } else { - this.domNode.style.left = pos - this.railBorderWidth + 'px'; - } - - if (this.labelDomNode) { - this.labelDomNode.innerHTML = this.dolValueNow.toString(); - } -}; - -Slider.prototype.handleKeyDown = function (event) { - var flag = false; - - switch (event.keyCode) { - case this.keyCode.left: - case this.keyCode.down: - this.moveSliderTo(this.valueNow - 1); - flag = true; - break; - - case this.keyCode.right: - case this.keyCode.up: - this.moveSliderTo(this.valueNow + 1); - flag = true; - break; - - case this.keyCode.pageDown: - this.moveSliderTo(this.valueNow - 10); - flag = true; - break; - - case this.keyCode.pageUp: - this.moveSliderTo(this.valueNow + 10); - flag = true; - break; - - case this.keyCode.home: - this.moveSliderTo(this.railMin); - flag = true; - break; - - case this.keyCode.end: - this.moveSliderTo(this.railMax); - flag = true; - break; - - default: - break; - } - - if (flag) { - event.preventDefault(); - event.stopPropagation(); - } -}; - -Slider.prototype.handleFocus = function () { - this.domNode.classList.add('focus'); - this.railDomNode.classList.add('focus'); -}; - -Slider.prototype.handleBlur = function () { - this.domNode.classList.remove('focus'); - this.railDomNode.classList.remove('focus'); -}; - -Slider.prototype.handleMouseDown = function (event) { - var self = this; - - var handleMouseMove = function (event) { - var diffX = event.pageX - self.railDomNode.offsetLeft; - self.valueNow = - self.railMin + - parseInt(((self.railMax - self.railMin) * diffX) / self.railWidth); - self.moveSliderTo(self.valueNow); - - event.preventDefault(); - event.stopPropagation(); - }; - - var handleMouseUp = function () { - document.removeEventListener('mousemove', handleMouseMove); - document.removeEventListener('mouseup', handleMouseUp); - }; - - // bind a mousemove event handler to move pointer - document.addEventListener('mousemove', handleMouseMove); - - // bind a mouseup event handler to stop tracking mouse movements - document.addEventListener('mouseup', handleMouseUp); - - event.preventDefault(); - event.stopPropagation(); - - // Set focus to the clicked handle - this.domNode.focus(); -}; - -// handleMouseMove has the same functionality as we need for handleMouseClick on the rail -// Slider.prototype.handleClick = function (event) { - -// var diffX = event.pageX - this.railDomNode.offsetLeft; -// this.valueNow = parseInt(((this.railMax - this.railMin) * diffX) / this.railWidth); -// this.moveSliderTo(this.valueNow); - -// event.preventDefault(); -// event.stopPropagation(); - -// }; - -// Initialize Sliders on the page -window.addEventListener('load', function () { - var sliders = document.querySelectorAll('[role=slider]'); - - for (var i = 0; i < sliders.length; i++) { - var s = new Slider(sliders[i]); - s.init(); - } -}); diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js new file mode 100644 index 0000000000..9d84c568f0 --- /dev/null +++ b/examples/slider/js/slider-multithumb.js @@ -0,0 +1,394 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: slider-multithumb.js + * + * Desc: A dual slider widget that implements ARIA Authoring Practices + */ + +'use strict'; +class SliderMultithumb { + constructor(domNode) { + this.domNode = domNode; + this.svgNode = domNode.querySelector('svg'); + this.railNode = domNode.querySelector('.rail'); + + this.minSliderNode = domNode.querySelector('[role=slider].minimum'); + this.maxSliderNode = domNode.querySelector('[role=slider].maximum'); + + this.minSliderValueNode = this.minSliderNode.querySelector('.value'); + this.maxSliderValueNode = this.maxSliderNode.querySelector('.value'); + + this.minSliderFocusNode = this.minSliderNode.querySelector('.focus'); + this.maxSliderFocusNode = this.maxSliderNode.querySelector('.focus'); + + this.minSliderThumbNode = this.minSliderNode.querySelector('.thumb'); + this.maxSliderThumbNode = this.maxSliderNode.querySelector('.thumb'); + + // The input elements are optional to support mobile devices, + // when a keyboard is not present + this.minInputNode = domNode.querySelector('.input-minimum input'); + this.maxInputNode = domNode.querySelector('.input-maximum input'); + + if (this.minInputNode) { + this.minInputNode.addEventListener( + 'change', + this.onInputChange.bind(this) + ); + this.minInputNode.addEventListener('blur', this.onInputChange.bind(this)); + this.minInputNode.addEventListener('blur', this.onSliderBlur.bind(this)); + this.minInputNode.addEventListener('focus', this.onSliderBlur.bind(this)); + this.minInputNode.min = this.getValueMin(this.minSliderNode); + this.minInputNode.max = this.getValueMax(this.minSliderNode); + } + + if (this.maxInputNode) { + this.maxInputNode.addEventListener( + 'change', + this.onInputChange.bind(this) + ); + this.maxInputNode.addEventListener('blur', this.onInputChange.bind(this)); + this.maxInputNode.addEventListener('blur', this.onSliderBlur.bind(this)); + this.maxInputNode.addEventListener('focus', this.onSliderBlur.bind(this)); + this.maxInputNode.min = this.getValueMin(this.maxSliderNode); + this.maxInputNode.max = this.getValueMax(this.maxSliderNode); + } + + // Dimensions of the slider focus ring, thumb and rail + + this.svgWidth = 360; + this.svgHeight = 80; + + this.valueTop = 24; + this.valueHeight = this.minSliderValueNode.getBoundingClientRect().height; + + this.railHeight = 6; + this.railWidth = 300; + this.railY = 42; + this.railX = 10; + + this.thumbTop = 31; + this.thumbHeight = 28; + this.thumbWidth = 28; + this.thumb2Width = 2 * this.thumbWidth; + this.thumbMiddle = this.thumbTop + this.thumbHeight / 2; + this.thumbBottom = this.thumbTop + this.thumbHeight; + + this.focusOffset = 8; + this.focusY = this.valueTop - this.valueHeight - this.focusOffset + 2; + this.focusWidth = this.thumbWidth + 2 * this.focusOffset; + this.focusHeight = this.thumbBottom - this.focusY + this.focusOffset + 2; + + this.svgNode.setAttribute('width', this.svgWidth); + this.svgNode.setAttribute('height', this.svgHeight); + + this.minSliderFocusNode.setAttribute('y', this.focusY); + this.maxSliderFocusNode.setAttribute('y', this.focusY); + this.minSliderFocusNode.setAttribute('width', this.focusWidth); + this.maxSliderFocusNode.setAttribute('width', this.focusWidth); + this.minSliderFocusNode.setAttribute('height', this.focusHeight); + this.maxSliderFocusNode.setAttribute('height', this.focusHeight); + this.minSliderFocusNode.setAttribute('rx', this.focusWidth / 2); + this.maxSliderFocusNode.setAttribute('rx', this.focusWidth / 2); + + this.minSliderValueNode.setAttribute('y', this.valueTop); + this.maxSliderValueNode.setAttribute('y', this.valueTop); + + this.railNode.setAttribute('y', this.railY); + this.railNode.setAttribute('x', this.railX); + this.railNode.setAttribute('height', this.railHeight); + this.railNode.setAttribute('width', this.railWidth + this.thumbWidth); + this.railNode.setAttribute('rx', this.railHeight / 2); + + this.sliderMinValue = this.getValueMin(this.minSliderNode); + this.sliderMaxValue = this.getValueMax(this.maxSliderNode); + + this.minSliderRight = 0; + this.maxSliderLeft = this.railWidth; + + this.minSliderNode.addEventListener( + 'keydown', + this.onSliderKeydown.bind(this) + ); + this.minSliderNode.addEventListener( + 'mousedown', + this.onSliderMousedown.bind(this) + ); + this.minSliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); + this.minSliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); + + this.maxSliderNode.addEventListener( + 'keydown', + this.onSliderKeydown.bind(this) + ); + this.maxSliderNode.addEventListener( + 'mousedown', + this.onSliderMousedown.bind(this) + ); + this.maxSliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); + this.maxSliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); + + this.moveSliderTo(this.minSliderNode, this.getValue(this.minSliderNode)); + + this.moveSliderTo(this.maxSliderNode, this.getValue(this.maxSliderNode)); + } + + getValue(sliderNode) { + return parseInt(sliderNode.getAttribute('aria-valuenow')); + } + + getValueMin(sliderNode) { + return parseInt(sliderNode.getAttribute('aria-valuemin')); + } + + getValueMax(sliderNode) { + return parseInt(sliderNode.getAttribute('aria-valuemax')); + } + + isMinSlider(sliderNode) { + return this.minSliderNode === sliderNode; + } + + isMinInput(inputNode) { + return this.minInputNode === inputNode; + } + + isInRange(sliderNode, value) { + let valueMin = this.getValueMin(sliderNode); + let valueMax = this.getValueMax(sliderNode); + return value <= valueMax && value >= valueMin; + } + + isOutOfRange(value) { + let valueMin = this.getValueMin(this.minSliderNode); + let valueMax = this.getValueMax(this.maxSliderNode); + return value > valueMax || value < valueMin; + } + + moveSliderTo(sliderNode, value) { + var valueMax, + valueMin, + pos, + x, + points = '', + width; + + if (this.isMinSlider(sliderNode)) { + valueMin = this.getValueMin(this.minSliderNode); + valueMax = this.getValueMax(this.minSliderNode); + } else { + valueMin = this.getValueMin(this.maxSliderNode); + valueMax = this.getValueMax(this.maxSliderNode); + } + + if (value > valueMax) { + value = valueMax; + } + + if (value < valueMin) { + value = valueMin; + } + + var dollarValue = '$' + value; + sliderNode.setAttribute('aria-valuenow', value); + sliderNode.setAttribute('aria-valuetext', dollarValue); + + pos = this.railX; + pos += Math.round( + (value * (this.railWidth - this.thumbWidth)) / + (this.sliderMaxValue - this.sliderMinValue) + ); + + if (this.isMinSlider(sliderNode)) { + // update INPUT, label and ARIA attributes + this.minSliderValueNode.textContent = dollarValue; + this.maxSliderNode.setAttribute('aria-valuemin', value); + + if (this.maxInputNode && this.minInputNode) { + this.maxInputNode.min = value; + this.minInputNode.value = value; + } + + // move the SVG focus ring and thumb elements + x = pos - this.focusOffset - 1; + this.minSliderFocusNode.setAttribute('x', x); + + points = `${pos},${this.thumbTop}`; + points += ` ${pos + this.thumbWidth},${this.thumbMiddle}`; + points += ` ${pos},${this.thumbBottom}`; + this.minSliderThumbNode.setAttribute('points', points); + + // Position value + width = this.minSliderValueNode.getBoundingClientRect().width; + pos = pos + (this.thumbWidth - width) / 2; + if (pos + width > this.maxSliderLeft - 2) { + pos = this.maxSliderLeft - width - 2; + } + this.minSliderValueNode.setAttribute('x', pos); + this.minSliderRight = pos; + } else { + // move the SVG focus ring and thumb elements + x = pos + this.thumbWidth - this.focusOffset + 1; + this.maxSliderFocusNode.setAttribute('x', x); + + points = `${pos + this.thumbWidth},${this.thumbMiddle}`; + points += ` ${pos + this.thumb2Width},${this.thumbTop}`; + points += ` ${pos + this.thumb2Width},${this.thumbBottom}`; + this.maxSliderThumbNode.setAttribute('points', points); + + width = this.maxSliderValueNode.getBoundingClientRect().width; + pos = pos + this.thumbWidth + (this.thumbWidth - width) / 2; + if (pos - width < this.minSliderRight + 2) { + pos = this.minSliderRight + width + 2; + } + this.maxSliderValueNode.setAttribute('x', pos); + this.maxSliderLeft = pos; + + // update INPUT, label and ARIA attributes + this.maxSliderValueNode.textContent = dollarValue; + this.minSliderNode.setAttribute('aria-valuemax', value); + + if (this.maxInputNode && this.minInputNode) { + this.minInputNode.max = value; + this.maxInputNode.value = value; + } + } + } + + onSliderKeydown(event) { + var flag = false; + var sliderNode = event.currentTarget; + var value = this.getValue(sliderNode); + var valueMin = this.getValueMin(sliderNode); + var valueMax = this.getValueMax(sliderNode); + + switch (event.key) { + case 'ArrowLeft': + case 'ArrowDown': + this.moveSliderTo(sliderNode, value - 1); + flag = true; + break; + + case 'ArrowRight': + case 'ArrowUp': + this.moveSliderTo(sliderNode, value + 1); + flag = true; + break; + + case 'PageDown': + this.moveSliderTo(sliderNode, value - 10); + flag = true; + break; + + case 'PageUp': + this.moveSliderTo(sliderNode, value + 10); + flag = true; + break; + + case 'Home': + this.moveSliderTo(sliderNode, valueMin); + flag = true; + break; + + case 'End': + this.moveSliderTo(sliderNode, valueMax); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.preventDefault(); + event.stopPropagation(); + } + } + + onSliderFocus() { + this.domNode.classList.add('focus'); + } + + onSliderBlur() { + this.domNode.classList.remove('focus'); + } + + onSliderMousedown(event) { + var onMousemove = function (e) { + var diffX = e.pageX - this.railNode.getBoundingClientRect().left; + + if (isMinSlider) { + diffX -= this.thumbWidth / 2; + } else { + diffX -= (3 * this.thumbWidth) / 2; + } + + var value = parseInt( + ((this.sliderMaxValue - this.sliderMinValue) * diffX) / this.railWidth + ); + + this.moveSliderTo(sliderNode, value); + + e.preventDefault(); + e.stopPropagation(); + }.bind(this); + + var onMouseup = function () { + document.removeEventListener('mousemove', onMousemove); + document.removeEventListener('mouseup', onMouseup); + }; + + var sliderNode = event.currentTarget; + var isMinSlider = this.isMinSlider(sliderNode); + + // bind a mousemove event handler to move pointer + document.addEventListener('mousemove', onMousemove); + + // bind a mouseup event handler to stop tracking mouse movements + document.addEventListener('mouseup', onMouseup); + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + sliderNode.focus(); + } + + onInputChange(event) { + var tgt = event.currentTarget, + value = tgt.value, + isNumber = typeof parseInt(value) === 'number'; + + if (this.isMinInput(tgt)) { + if (value.length === 0) { + tgt.value = this.getValue(this.minSliderNode); + } else { + if (isNumber && this.isInRange(this.minSliderNode, value)) { + this.moveSliderTo(this.minSliderNode, value); + } else { + tgt.value = this.getValue(this.minSliderNode); + } + } + } else { + if (value.length === 0) { + tgt.value = this.getValue(this.maxSliderNode); + } else { + if (isNumber && this.isInRange(this.maxSliderNode, value)) { + this.moveSliderTo(this.maxSliderNode, value); + } else { + tgt.value = this.getValue(this.maxSliderNode); + } + } + } + } +} + +// Initialize Multithumb Slider widgets on the page +window.addEventListener('load', function () { + var slidersMultithumb = document.querySelectorAll('.slider-multithumb'); + + for (let i = 0; i < slidersMultithumb.length; i++) { + new SliderMultithumb(slidersMultithumb[i]); + } +}); diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html deleted file mode 100644 index a40edc524d..0000000000 --- a/examples/slider/multithumb-slider.html +++ /dev/null @@ -1,277 +0,0 @@ - - - - - Horizontal Multi-Thumb Slider Example | WAI-ARIA Authoring Practices 1.2 - - - - - - - - - - - - - - -
-

Horizontal Multi-Thumb Slider Example

-

- The below example section includes a slider for setting a price range that demonstrates the - multi-thumb slider design pattern. - Users set a price range by moving the arrows (thumbs). - Each slider has two thumbs: one for the minimum price and one for the maximum price. - The price labels at the ends of the slider update as their corresponding thumbs are moved. -

-

Similar examples include:

- -
-
-

Example

-
- -
-

Hotel Price Range

-
-
- 0 -
-
- - -
-
- 0 -
-
-

Flight Price Range

-
-
- 0 -
-
- - -
-
- 0 -
-
-
- -
- -
-

Keyboard Support

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Right ArrowIncreases slider value one step.
Up ArrowIncreases slider value one step.
Left ArrowDecreases slider value one step.
Down ArrowDecreases slider value one step.
Page UpIncreases slider value multiple steps. In this slider, jumps ten steps.
Page DownDecreases slider value multiple steps. In this slider, jumps ten steps.
HomeSets slider to its minimum value.
EndSets slider to its maximum value.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- slider - - img - -
    -
  • Identifies the img element as a slider.
    • -
  • Set on the movable thumb because it is the operable element that receives focus and represents the slider value.
    • -
-
- tabindex=0 - - img - Includes the slider thumb in the page tab sequence.
- aria-valuemax=NUMBER - - img - Specifies the maximum value of the slider.
- aria-valuemin=NUMBER - - img - Specifies the minimum value of the slider.
- aria-valuenow=NUMBER - - img - Indicates the current value of the slider.
- aria-valuetext=DOLLAR AMOUNT - - img - Indicates the current value of the slider in dollars using the $ character as a prefix.
- aria-label=text - - img - A label identifying the purpose of the slider, e.g., Hotel Minimum Price.
-
- -
-

Javascript and CSS Source Code

- -
- -
-

HTML Source Code

- -
- - -
- -
- - - diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html new file mode 100644 index 0000000000..8ce1e57ba0 --- /dev/null +++ b/examples/slider/slider-multithumb.html @@ -0,0 +1,287 @@ + + + + + Horizontal Multi-Thumb Slider Example | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + +
+

Horizontal Multi-Thumb Slider Example

+

+ The below example section includes a slider for setting a price range that demonstrates the + multi-thumb slider design pattern. + Users set a price range by moving the arrows (thumbs). + Each slider has two thumbs: one for the minimum price and one for the maximum price. + The price labels at the ends of the slider update as their corresponding thumbs are moved. +

+

Similar examples include:

+ +
+
+

Example

+
+ +
+

Hotel Price Range

+
+ + + + 0 + + + + + 0 + + + + +
+

Flight Price Range

+
+ + + + 0 + + + + + 0 + + + + +
+
+ +
+ +
+

Accessibility Features

+
    +
  • A border is placed around the entire multi-thumbslider when one of the elements within the slider receives focus.
    • +
  • The placement of the slider value above the thumb supports users with low vision by allow them to more easily view the value of the slider as they move the thumb.
    • +
  • The SVG rect element is used to encapsulate both the slider and slider value for the slider with keyboard focus.
    • +
  • The use SVG polygon, rect and text elements enables the thumb, focus ring, value and rail of the slider to adapt to operating system high contrast colors.
    • +
  • The CSS currentColor value for the fill and stroke properties of the thumb and slider is used to support the override colors in high contrast mode.
    • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
Right ArrowIncreases slider value one step.
Up ArrowIncreases slider value one step.
Left ArrowDecreases slider value one step.
Down ArrowDecreases slider value one step.
Page UpIncreases slider value multiple steps. In this slider, jumps ten steps.
Page DownDecreases slider value multiple steps. In this slider, jumps ten steps.
HomeSets slider to its minimum value.
EndSets slider to its maximum value.
+
+
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
+ slider + + img + +
    +
  • Identifies the img element as a slider.
    • +
  • Set on the movable thumb because it is the operable element that receives focus and represents the slider value.
    • +
+
+ tabindex=0 + + img + Includes the slider thumb in the page tab sequence.
+ aria-valuemax=NUMBER + + img + Specifies the maximum value of the slider.
+ aria-valuemin=NUMBER + + img + Specifies the minimum value of the slider.
+ aria-valuenow=NUMBER + + img + Indicates the current value of the slider.
+ aria-valuetext=DOLLAR AMOUNT + + img + Indicates the current value of the slider in dollars using the $ character as a prefix.
+ aria-label=text + + img + A label identifying the purpose of the slider, e.g., Hotel Minimum Price.
+
+
+

Javascript and CSS Source Code

+ +
+
+

HTML Source Code

+ +
+ + +
+
+ + + diff --git a/test/tests/slider_multithumb.js b/test/tests/slider_slider-multithumb.js similarity index 98% rename from test/tests/slider_multithumb.js rename to test/tests/slider_slider-multithumb.js index 46e6f47827..abd8afbe5a 100644 --- a/test/tests/slider_multithumb.js +++ b/test/tests/slider_slider-multithumb.js @@ -4,22 +4,23 @@ const assertAttributeValues = require('../util/assertAttributeValues'); const assertAriaLabelExists = require('../util/assertAriaLabelExists'); const assertAriaRoles = require('../util/assertAriaRoles'); -const exampleFile = 'slider/multithumb-slider.html'; +const exampleFile = 'slider/slider-multithumb.html'; const ex = { sliderSelector: '#ex1 [role="slider"]', - hotelSliderSelector: - '#ex1 div.aria-widget-slider:nth-of-type(1) [role="slider"]', + hotelSliderSelector: '#ex1 .slider-multithumb:nth-of-type(1) [role="slider"]', flightSliderSelector: - '#ex1 div.aria-widget-slider:nth-of-type(2) [role="slider"]', + '#ex1 .slider-multithumb:nth-of-type(2) [role="slider"]', hotelMin: '0', hotelMax: '400', flightMin: '0', flightMax: '1000', hotelDefaultValues: ['100', '250'], flightDefaultValues: ['100', '250'], - hotelLabelSelector: '#ex1 div.aria-widget-slider:nth-of-type(1) .rail-label', - flightLabelSelector: '#ex1 div.aria-widget-slider:nth-of-type(2) .rail-label', + hotelLabelSelector: + '#ex1 .slider-multithumb:nth-of-type(1) [role=slider] .value', + flightLabelSelector: + '#ex1 .slider-multithumb:nth-of-type(2) [role=slider] .value', }; const verifyAllValues = async function ( @@ -54,7 +55,7 @@ ariaTest( exampleFile, 'slider-role', async (t) => { - await assertAriaRoles(t, 'ex1', 'slider', '4', 'img'); + await assertAriaRoles(t, 'ex1', 'slider', '4', 'g'); } ); From f655378aff679faa7bc09f11e2137693d3c5d58a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Feb 2021 11:30:04 -0600 Subject: [PATCH 02/35] updated to use pointer events and remove support for input elements --- examples/slider/js/slider-multithumb.js | 158 ++++++++---------------- 1 file changed, 50 insertions(+), 108 deletions(-) diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 9d84c568f0..6feb5d9a6f 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -10,8 +10,14 @@ 'use strict'; class SliderMultithumb { constructor(domNode) { + this.isMoving = false; + this.movingSliderNode = false; + this.domNode = domNode; + this.svgNode = domNode.querySelector('svg'); + this.svgPoint = this.svgNode.createSVGPoint(); + this.railNode = domNode.querySelector('.rail'); this.minSliderNode = domNode.querySelector('[role=slider].minimum'); @@ -26,35 +32,6 @@ class SliderMultithumb { this.minSliderThumbNode = this.minSliderNode.querySelector('.thumb'); this.maxSliderThumbNode = this.maxSliderNode.querySelector('.thumb'); - // The input elements are optional to support mobile devices, - // when a keyboard is not present - this.minInputNode = domNode.querySelector('.input-minimum input'); - this.maxInputNode = domNode.querySelector('.input-maximum input'); - - if (this.minInputNode) { - this.minInputNode.addEventListener( - 'change', - this.onInputChange.bind(this) - ); - this.minInputNode.addEventListener('blur', this.onInputChange.bind(this)); - this.minInputNode.addEventListener('blur', this.onSliderBlur.bind(this)); - this.minInputNode.addEventListener('focus', this.onSliderBlur.bind(this)); - this.minInputNode.min = this.getValueMin(this.minSliderNode); - this.minInputNode.max = this.getValueMax(this.minSliderNode); - } - - if (this.maxInputNode) { - this.maxInputNode.addEventListener( - 'change', - this.onInputChange.bind(this) - ); - this.maxInputNode.addEventListener('blur', this.onInputChange.bind(this)); - this.maxInputNode.addEventListener('blur', this.onSliderBlur.bind(this)); - this.maxInputNode.addEventListener('focus', this.onSliderBlur.bind(this)); - this.maxInputNode.min = this.getValueMin(this.maxSliderNode); - this.maxInputNode.max = this.getValueMax(this.maxSliderNode); - } - // Dimensions of the slider focus ring, thumb and rail this.svgWidth = 360; @@ -103,6 +80,7 @@ class SliderMultithumb { this.sliderMinValue = this.getValueMin(this.minSliderNode); this.sliderMaxValue = this.getValueMax(this.maxSliderNode); + this.sliderDiffValue = this.sliderMaxValue - this.sliderMinValue; this.minSliderRight = 0; this.maxSliderLeft = this.railWidth; @@ -112,9 +90,10 @@ class SliderMultithumb { this.onSliderKeydown.bind(this) ); this.minSliderNode.addEventListener( - 'mousedown', - this.onSliderMousedown.bind(this) + 'pointerdown', + this.onSliderPointerdown.bind(this) ); + this.minSliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); this.minSliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); @@ -123,9 +102,16 @@ class SliderMultithumb { this.onSliderKeydown.bind(this) ); this.maxSliderNode.addEventListener( - 'mousedown', - this.onSliderMousedown.bind(this) + 'pointerdown', + this.onSliderPointerdown.bind(this) ); + + // bind a pointermove event handler to move pointer + document.addEventListener('pointermove', this.onPointermove.bind(this)); + + // bind a pointerup event handler to stop tracking pointer movements + document.addEventListener('pointerup', this.onPointerup.bind(this)); + this.maxSliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); this.maxSliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); @@ -134,6 +120,12 @@ class SliderMultithumb { this.moveSliderTo(this.maxSliderNode, this.getValue(this.maxSliderNode)); } + getSVGPoint(event) { + this.svgPoint.x = event.clientX; + this.svgPoint.y = event.clientY; + return this.svgPoint.matrixTransform(this.svgNode.getScreenCTM().inverse()); + } + getValue(sliderNode) { return parseInt(sliderNode.getAttribute('aria-valuenow')); } @@ -150,10 +142,6 @@ class SliderMultithumb { return this.minSliderNode === sliderNode; } - isMinInput(inputNode) { - return this.minInputNode === inputNode; - } - isInRange(sliderNode, value) { let valueMin = this.getValueMin(sliderNode); let valueMax = this.getValueMax(sliderNode); @@ -201,15 +189,10 @@ class SliderMultithumb { ); if (this.isMinSlider(sliderNode)) { - // update INPUT, label and ARIA attributes + // update ARIA attributes this.minSliderValueNode.textContent = dollarValue; this.maxSliderNode.setAttribute('aria-valuemin', value); - if (this.maxInputNode && this.minInputNode) { - this.maxInputNode.min = value; - this.minInputNode.value = value; - } - // move the SVG focus ring and thumb elements x = pos - this.focusOffset - 1; this.minSliderFocusNode.setAttribute('x', x); @@ -245,14 +228,9 @@ class SliderMultithumb { this.maxSliderValueNode.setAttribute('x', pos); this.maxSliderLeft = pos; - // update INPUT, label and ARIA attributes + // update label and ARIA attributes this.maxSliderValueNode.textContent = dollarValue; this.minSliderNode.setAttribute('aria-valuemax', value); - - if (this.maxInputNode && this.minInputNode) { - this.minInputNode.max = value; - this.maxInputNode.value = value; - } } } @@ -314,74 +292,38 @@ class SliderMultithumb { this.domNode.classList.remove('focus'); } - onSliderMousedown(event) { - var onMousemove = function (e) { - var diffX = e.pageX - this.railNode.getBoundingClientRect().left; - - if (isMinSlider) { - diffX -= this.thumbWidth / 2; - } else { - diffX -= (3 * this.thumbWidth) / 2; - } - - var value = parseInt( - ((this.sliderMaxValue - this.sliderMinValue) * diffX) / this.railWidth - ); - - this.moveSliderTo(sliderNode, value); - - e.preventDefault(); - e.stopPropagation(); - }.bind(this); - - var onMouseup = function () { - document.removeEventListener('mousemove', onMousemove); - document.removeEventListener('mouseup', onMouseup); - }; - - var sliderNode = event.currentTarget; - var isMinSlider = this.isMinSlider(sliderNode); - - // bind a mousemove event handler to move pointer - document.addEventListener('mousemove', onMousemove); - - // bind a mouseup event handler to stop tracking mouse movements - document.addEventListener('mouseup', onMouseup); + onSliderPointerdown(event) { + this.isMoving = true; + this.movingSliderNode = event.currentTarget; event.preventDefault(); event.stopPropagation(); // Set focus to the clicked handle - sliderNode.focus(); + this.movingSliderNode.focus(); } - onInputChange(event) { - var tgt = event.currentTarget, - value = tgt.value, - isNumber = typeof parseInt(value) === 'number'; - - if (this.isMinInput(tgt)) { - if (value.length === 0) { - tgt.value = this.getValue(this.minSliderNode); - } else { - if (isNumber && this.isInRange(this.minSliderNode, value)) { - this.moveSliderTo(this.minSliderNode, value); - } else { - tgt.value = this.getValue(this.minSliderNode); - } - } - } else { - if (value.length === 0) { - tgt.value = this.getValue(this.maxSliderNode); - } else { - if (isNumber && this.isInRange(this.maxSliderNode, value)) { - this.moveSliderTo(this.maxSliderNode, value); - } else { - tgt.value = this.getValue(this.maxSliderNode); - } - } + onPointermove(event) { + if ( + this.isMoving && + this.movingSliderNode && + this.domNode.contains(event.target) + ) { + var x = this.getSVGPoint(event).x; + var diffX = x - this.railX; + var value = Math.round((diffX * this.sliderDiffValue) / this.railWidth); + + this.moveSliderTo(this.movingSliderNode, value); + + event.preventDefault(); + event.stopPropagation(); } } + + onPointerup() { + this.isMoving = false; + this.movingSliderNode = false; + } } // Initialize Multithumb Slider widgets on the page From 34afe514730b31de0ba0f5d2a361f1f8e2354afe Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Feb 2021 11:37:30 -0600 Subject: [PATCH 03/35] fixed spelling mistake --- examples/slider/slider-multithumb.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 8ce1e57ba0..a49f2ca05b 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -119,7 +119,7 @@

Flight Price Range

Accessibility Features

    -
  • A border is placed around the entire multi-thumbslider when one of the elements within the slider receives focus.
    • +
  • A border is placed around the entire multi-thumb slider when one of the elements within the slider receives focus.
  • The placement of the slider value above the thumb supports users with low vision by allow them to more easily view the value of the slider as they move the thumb.
  • The SVG rect element is used to encapsulate both the slider and slider value for the slider with keyboard focus.
  • The use SVG polygon, rect and text elements enables the thumb, focus ring, value and rail of the slider to adapt to operating system high contrast colors.
    • From b46e1059c59db2e093ce2011cb0bd940d139a9b1 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Feb 2021 11:42:03 -0600 Subject: [PATCH 04/35] added touch-action to CSS --- examples/slider/css/slider-multithumb.css | 33 +---------------------- 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index 61d163392b..e05621af63 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -3,6 +3,7 @@ .slider-multithumb { padding: 6px; width: 350px; + touch-action: pan-y; } .slider-multithumb.focus { @@ -11,38 +12,6 @@ border-radius: 5px; } -.slider-multithumb.mobile { - clear: both; - display: grid; - grid-template-columns: 100px 340px 100px; - grid-column-gap: 10px; - width: 550px; -} - -.slider-multithumb.mobile .input-minimum, -.slider-multithumb.mobile .input-maximum { - position: relative; - top: 32px; - height: 1.5em; -} - -.slider-multithumb.mobile .input-minimum { - grid-column: 1; -} - -.slider-multithumb.mobile .input-maximum { - grid-column: 3; -} - -.slider-multithumb.mobile .slider-group { - grid-column: 2; -} - -.slider-multithumb.mobile .input-minimum input, -.slider-multithumb.mobile .input-maximum input { - width: 4em; -} - .slider-multithumb .slider-group .value { font-size: 80%; color: currentColor; From e96f7d9b0d5a1f26276e7ed39e63763e842ae461 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Feb 2021 13:19:38 -0600 Subject: [PATCH 05/35] added touch advisement --- examples/slider/slider-multithumb.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index a49f2ca05b..050692c47d 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -24,8 +24,10 @@

    Horizontal Multi-Thumb Slider Example

    -

    - The below example section includes a slider for setting a price range that demonstrates the +

    +

    WARNING! Users of touch-based assistive technologies may not be able to fully operate widgets that implement the slider pattern because APIs for capturing the necessary gestures and commands from assistive technologies are not yet available. Authors should fully test slider widgets using assistive technologies on primarily touch devices before considering incorporation into production systems.

    +
    +

    The below example section includes a slider for setting a price range that demonstrates the multi-thumb slider design pattern. Users set a price range by moving the arrows (thumbs). Each slider has two thumbs: one for the minimum price and one for the maximum price. From a5b350e2a0484480fe165c0d5538ace7fa1a2b96 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 16 Feb 2021 17:08:14 -0600 Subject: [PATCH 06/35] updated value limit code --- examples/slider/js/slider-multithumb.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 6feb5d9a6f..c590fad36d 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -170,13 +170,7 @@ class SliderMultithumb { valueMax = this.getValueMax(this.maxSliderNode); } - if (value > valueMax) { - value = valueMax; - } - - if (value < valueMin) { - value = valueMin; - } + value = Math.min(Math.max(value, valueMin), valueMax); var dollarValue = '$' + value; sliderNode.setAttribute('aria-valuenow', value); From 6358677eb3c20e3e62926d13fa74a2f12a2fb284 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 18 Feb 2021 13:31:23 -0600 Subject: [PATCH 07/35] added meta tag --- examples/slider/slider-multithumb.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 050692c47d..332a26c9ee 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -2,6 +2,7 @@ + Horizontal Multi-Thumb Slider Example | WAI-ARIA Authoring Practices 1.2 From 5e329ad6e559116d5b314d0c9a18a650add0ee07 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 24 Feb 2021 16:21:33 -0600 Subject: [PATCH 08/35] removed outer focus ring and updated documentation --- examples/slider/css/slider-multithumb.css | 6 ------ examples/slider/js/slider-multithumb.js | 7 ++++--- examples/slider/slider-multithumb.html | 17 ++++++++++++----- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index e05621af63..b11fa3a36d 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -6,12 +6,6 @@ touch-action: pan-y; } -.slider-multithumb.focus { - padding: 4px; - border: 2px solid #005a9c; - border-radius: 5px; -} - .slider-multithumb .slider-group .value { font-size: 80%; color: currentColor; diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index c590fad36d..59c79d7814 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -56,6 +56,7 @@ class SliderMultithumb { this.focusY = this.valueTop - this.valueHeight - this.focusOffset + 2; this.focusWidth = this.thumbWidth + 2 * this.focusOffset; this.focusHeight = this.thumbBottom - this.focusY + this.focusOffset + 2; + this.focusRadius = this.focusWidth / 8; this.svgNode.setAttribute('width', this.svgWidth); this.svgNode.setAttribute('height', this.svgHeight); @@ -66,8 +67,8 @@ class SliderMultithumb { this.maxSliderFocusNode.setAttribute('width', this.focusWidth); this.minSliderFocusNode.setAttribute('height', this.focusHeight); this.maxSliderFocusNode.setAttribute('height', this.focusHeight); - this.minSliderFocusNode.setAttribute('rx', this.focusWidth / 2); - this.maxSliderFocusNode.setAttribute('rx', this.focusWidth / 2); + this.minSliderFocusNode.setAttribute('rx', this.focusRadius); + this.maxSliderFocusNode.setAttribute('rx', this.focusRadius); this.minSliderValueNode.setAttribute('y', this.valueTop); this.maxSliderValueNode.setAttribute('y', this.valueTop); @@ -76,7 +77,7 @@ class SliderMultithumb { this.railNode.setAttribute('x', this.railX); this.railNode.setAttribute('height', this.railHeight); this.railNode.setAttribute('width', this.railWidth + this.thumbWidth); - this.railNode.setAttribute('rx', this.railHeight / 2); + this.railNode.setAttribute('rx', this.railHeight / 4); this.sliderMinValue = this.getValueMin(this.minSliderNode); this.sliderMaxValue = this.getValueMax(this.maxSliderNode); diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 332a26c9ee..18f4b38e87 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -122,11 +122,18 @@

    Flight Price Range

    Accessibility Features

      -
    • A border is placed around the entire multi-thumb slider when one of the elements within the slider receives focus.
      • -
    • The placement of the slider value above the thumb supports users with low vision by allow them to more easily view the value of the slider as they move the thumb.
      • -
    • The SVG rect element is used to encapsulate both the slider and slider value for the slider with keyboard focus.
      • -
    • The use SVG polygon, rect and text elements enables the thumb, focus ring, value and rail of the slider to adapt to operating system high contrast colors.
      • -
    • The CSS currentColor value for the fill and stroke properties of the thumb and slider is used to support the override colors in high contrast mode.
      • +
    • + The placement of the slider value above the thumb supports users with low vision by allow them to more easily view the value of the slider as the thumb is dragged. +
      • +
    • + The focus ring includes both the thumb and the slider value to make it easier to identify the thumb with the thumb value. +
      • +
    • + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background. +
      • +
    • + The use of pointer events supports assistive technologies on touch devices to change the value of slider using gestures. +
    From eae496616b37d3b0d24f95186379bdefa64fe653 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 25 Feb 2021 09:27:24 -0600 Subject: [PATCH 09/35] added documentation about using inline SVG --- examples/slider/slider-multithumb.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 18f4b38e87..79674d20f2 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -129,7 +129,7 @@

    Accessibility Features

    The focus ring includes both the thumb and the slider value to make it easier to identify the thumb with the thumb value.
  • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the inline SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background. NOTE: The use of inline SVG graphics are needed to support the use of the currentColor value.
  • The use of pointer events supports assistive technologies on touch devices to change the value of slider using gestures. From d0fc3a822c71b6faa31bd5edb81615fb75417a1c Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 2 Mar 2021 13:49:50 -0600 Subject: [PATCH 10/35] updated documentation and fill color of slider rail --- examples/slider/css/slider-multithumb.css | 1 - examples/slider/slider-multithumb.html | 9 +++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index b11fa3a36d..8d4c0de88f 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -40,7 +40,6 @@ .slider-multithumb.focus .slider-group .rail { stroke: currentColor; - fill: #adddff; } .slider-multithumb [role="slider"]:focus { diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 79674d20f2..b265ea943d 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -123,16 +123,13 @@

    Flight Price Range

    Accessibility Features

    • - The placement of the slider value above the thumb supports users with low vision by allow them to more easily view the value of the slider as the thumb is dragged. + The placement of the slider value above the thumb makes it easier for users with low vision to see the current value while dragging the thumb.
    • - The focus ring includes both the thumb and the slider value to make it easier to identify the thumb with the thumb value. + To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
    • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the inline SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background. NOTE: The use of inline SVG graphics are needed to support the use of the currentColor value. -
      • -
    • - The use of pointer events supports assistive technologies on touch devices to change the value of slider using gestures. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors were used to specify the stroke property, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background NOTE: SVGs must be inline to use currentColor.
From e41aafd265ccc14205f810b1c5435de29f5ae4fa Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 2 Mar 2021 16:29:30 -0600 Subject: [PATCH 11/35] updated slider move event for mouse to stay inside of thumb --- examples/slider/css/slider-multithumb.css | 22 ++++++++++----- examples/slider/js/slider-multithumb.js | 33 ++++++++++++++--------- examples/slider/slider-multithumb.html | 16 ++++++----- 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index 8d4c0de88f..f3654178e2 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -6,6 +6,10 @@ touch-action: pan-y; } +.slider-multithumb .slider-group { + color: #005a9c; +} + .slider-multithumb .slider-group .value { font-size: 80%; color: currentColor; @@ -15,7 +19,8 @@ .slider-multithumb .slider-group .rail { stroke: currentColor; stroke-width: 2px; - fill: #ccc; + fill: #ddd; + opacity: 0.6; } .slider-multithumb .slider-group .thumb { @@ -24,7 +29,7 @@ fill: currentColor; } -.slider-multithumb .slider-group .focus { +.slider-multithumb .slider-group .focus-ring { stroke-width: 3px; stroke: transparent; fill: transparent; @@ -34,19 +39,22 @@ /* Focus and hover styling */ -.slider-multithumb.focus .slider-group { - color: #005a9c; +.slider-multithumb .slider-group g.rail, +.slider-multithumb .slider-group g.focus { + color: black; } -.slider-multithumb.focus .slider-group .rail { - stroke: currentColor; +.slider-multithumb .slider-group.active g.rail { + fill: currentColor; + opacity: 0.4; } .slider-multithumb [role="slider"]:focus { outline: none; } -.slider-multithumb [role="slider"]:focus .focus { +.slider-multithumb [role="slider"]:hover .focus-ring, +.slider-multithumb [role="slider"]:focus .focus-ring { stroke: currentColor; } diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 59c79d7814..712dcd1db9 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -18,7 +18,7 @@ class SliderMultithumb { this.svgNode = domNode.querySelector('svg'); this.svgPoint = this.svgNode.createSVGPoint(); - this.railNode = domNode.querySelector('.rail'); + this.railNode = domNode.querySelector('.rail rect'); this.minSliderNode = domNode.querySelector('[role=slider].minimum'); this.maxSliderNode = domNode.querySelector('[role=slider].maximum'); @@ -26,8 +26,8 @@ class SliderMultithumb { this.minSliderValueNode = this.minSliderNode.querySelector('.value'); this.maxSliderValueNode = this.maxSliderNode.querySelector('.value'); - this.minSliderFocusNode = this.minSliderNode.querySelector('.focus'); - this.maxSliderFocusNode = this.maxSliderNode.querySelector('.focus'); + this.minSliderFocusNode = this.minSliderNode.querySelector('.focus-ring'); + this.maxSliderFocusNode = this.maxSliderNode.querySelector('.focus-ring'); this.minSliderThumbNode = this.minSliderNode.querySelector('.thumb'); this.maxSliderThumbNode = this.maxSliderNode.querySelector('.thumb'); @@ -77,7 +77,7 @@ class SliderMultithumb { this.railNode.setAttribute('x', this.railX); this.railNode.setAttribute('height', this.railHeight); this.railNode.setAttribute('width', this.railWidth + this.thumbWidth); - this.railNode.setAttribute('rx', this.railHeight / 4); + this.railNode.setAttribute('rx', this.railHeight / 2); this.sliderMinValue = this.getValueMin(this.minSliderNode); this.sliderMaxValue = this.getValueMax(this.maxSliderNode); @@ -279,17 +279,20 @@ class SliderMultithumb { } } - onSliderFocus() { - this.domNode.classList.add('focus'); + onSliderFocus(event) { + event.currentTarget.classList.add('focus'); + this.svgNode.classList.add('active'); } - onSliderBlur() { - this.domNode.classList.remove('focus'); + onSliderBlur(event) { + event.currentTarget.classList.remove('focus'); + this.svgNode.classList.remove('active'); } onSliderPointerdown(event) { this.isMoving = true; this.movingSliderNode = event.currentTarget; + this.isMinSliderMoving = this.isMinSlider(event.currentTarget); event.preventDefault(); event.stopPropagation(); @@ -304,10 +307,16 @@ class SliderMultithumb { this.movingSliderNode && this.domNode.contains(event.target) ) { - var x = this.getSVGPoint(event).x; - var diffX = x - this.railX; - var value = Math.round((diffX * this.sliderDiffValue) / this.railWidth); - + var x = this.getSVGPoint(event).x - this.railX; + if (this.isMinSliderMoving) { + x = Math.max(0, x - this.thumbWidth / 3); + } else { + x = Math.max(0, x - (5 * this.thumbWidth) / 3); + } + x = Math.min(x, this.railWidth - this.thumbWidth); + var value = Math.round( + (x * this.sliderDiffValue) / (this.railWidth - this.thumbWidth) + ); this.moveSliderTo(this.movingSliderNode, value); event.preventDefault(); diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index b265ea943d..85e0b58ec4 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -58,7 +58,9 @@

Example

Hotel Price Range

- + + + Hotel Price Range aria-valuemax="250" aria-label="Hotel Minimum Price"> 0 - + Hotel Price Range aria-valuemax="400" aria-label="Hotel Maximum Price"> 0 - + @@ -88,7 +90,9 @@

Hotel Price Range

Flight Price Range

- + + + Flight Price Range aria-valuemax="250" aria-label="Flight Minimum Price"> 0 - + Flight Price Range aria-valuemax="1000" aria-label="Flight Maximum Price"> 0 - + From a765ba073e3e7aa4d53bfb2357e21cc9a1305aa2 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 2 Mar 2021 16:34:23 -0600 Subject: [PATCH 12/35] fixed spelling error --- examples/slider/slider-multithumb.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 85e0b58ec4..8771195285 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -133,7 +133,7 @@

Accessibility Features

To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
  • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors were used to specify the stroke property, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background NOTE: SVGs must be inline to use currentColor. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors were used to specify the stroke property, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background NOTE: SVG graphics must be inline to use currentColor.
    • From a1f39b1ad0fd1a97c97baa3436c924690715b2da Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 2 Mar 2021 16:44:54 -0600 Subject: [PATCH 13/35] fixed initial positioning of max slider value --- examples/slider/js/slider-multithumb.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 712dcd1db9..39b1bb43d3 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -117,7 +117,6 @@ class SliderMultithumb { this.maxSliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); this.moveSliderTo(this.minSliderNode, this.getValue(this.minSliderNode)); - this.moveSliderTo(this.maxSliderNode, this.getValue(this.maxSliderNode)); } @@ -206,6 +205,10 @@ class SliderMultithumb { this.minSliderValueNode.setAttribute('x', pos); this.minSliderRight = pos; } else { + // update label and ARIA attributes + this.maxSliderValueNode.textContent = dollarValue; + this.minSliderNode.setAttribute('aria-valuemax', value); + // move the SVG focus ring and thumb elements x = pos + this.thumbWidth - this.focusOffset + 1; this.maxSliderFocusNode.setAttribute('x', x); @@ -220,12 +223,9 @@ class SliderMultithumb { if (pos - width < this.minSliderRight + 2) { pos = this.minSliderRight + width + 2; } + this.maxSliderValueNode.setAttribute('x', pos); this.maxSliderLeft = pos; - - // update label and ARIA attributes - this.maxSliderValueNode.textContent = dollarValue; - this.minSliderNode.setAttribute('aria-valuemax', value); } } From 3fd5d8a2db117379fcc71150236cfd8004a94126 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 3 Mar 2021 09:52:31 -0600 Subject: [PATCH 14/35] added range rect between min and max thumbs to visual indicate the range of values --- examples/slider/css/slider-multithumb.css | 12 ++++++++++-- examples/slider/js/slider-multithumb.js | 19 +++++++++++++++++++ examples/slider/slider-multithumb.html | 6 ++++++ 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index f3654178e2..86bf8aae27 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -19,10 +19,15 @@ .slider-multithumb .slider-group .rail { stroke: currentColor; stroke-width: 2px; - fill: #ddd; + fill: transparent; opacity: 0.6; } +.slider-multithumb .slider-group .range { + fill: currentColor; + opacity: 0.5; +} + .slider-multithumb .slider-group .thumb { stroke: transparent; stroke-width: 2px; @@ -45,8 +50,11 @@ } .slider-multithumb .slider-group.active g.rail { + opacity: 0.8; +} + +.slider-multithumb .slider-group.active g.range { fill: currentColor; - opacity: 0.4; } .slider-multithumb [role="slider"]:focus { diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 39b1bb43d3..89aa0d69a5 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -19,6 +19,7 @@ class SliderMultithumb { this.svgPoint = this.svgNode.createSVGPoint(); this.railNode = domNode.querySelector('.rail rect'); + this.rangeNode = domNode.querySelector('.range rect'); this.minSliderNode = domNode.querySelector('[role=slider].minimum'); this.maxSliderNode = domNode.querySelector('[role=slider].maximum'); @@ -79,6 +80,11 @@ class SliderMultithumb { this.railNode.setAttribute('width', this.railWidth + this.thumbWidth); this.railNode.setAttribute('rx', this.railHeight / 2); + this.rangeNode.setAttribute('y', this.railY); + this.rangeNode.setAttribute('x', this.railX / 2); + this.rangeNode.setAttribute('height', this.railHeight); + this.rangeNode.setAttribute('width', 0); + this.sliderMinValue = this.getValueMin(this.minSliderNode); this.sliderMaxValue = this.getValueMax(this.maxSliderNode); this.sliderDiffValue = this.sliderMaxValue - this.sliderMinValue; @@ -154,6 +160,11 @@ class SliderMultithumb { return value > valueMax || value < valueMin; } + getXFromThumb(node) { + var points = node.getAttribute('points').split(','); + return parseInt(points[0]); + } + moveSliderTo(sliderNode, value) { var valueMax, valueMin, @@ -227,6 +238,14 @@ class SliderMultithumb { this.maxSliderValueNode.setAttribute('x', pos); this.maxSliderLeft = pos; } + + // Set range rect + + x = this.getXFromThumb(this.minSliderThumbNode) + this.thumbWidth / 2; + width = + this.getXFromThumb(this.maxSliderThumbNode) - x + this.thumbWidth / 2; + this.rangeNode.setAttribute('x', x); + this.rangeNode.setAttribute('width', width); } onSliderKeydown(event) { diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 8771195285..a051edc080 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -61,6 +61,9 @@

    Hotel Price Range

    + + + Flight Price Range + + + Date: Wed, 3 Mar 2021 16:19:37 -0600 Subject: [PATCH 15/35] updated warning documentation --- examples/slider/slider-multithumb.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index a051edc080..fe971b8b45 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -26,7 +26,7 @@

    Horizontal Multi-Thumb Slider Example

    -

    WARNING! Users of touch-based assistive technologies may not be able to fully operate widgets that implement the slider pattern because APIs for capturing the necessary gestures and commands from assistive technologies are not yet available. Authors should fully test slider widgets using assistive technologies on primarily touch devices before considering incorporation into production systems.

    +

    WARNING! Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for incrementing and decrementing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

    The below example section includes a slider for setting a price range that demonstrates the multi-thumb slider design pattern. From dbd98a201963d1749565923df3f3cd5ca72906cf Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Mar 2021 19:10:41 -0600 Subject: [PATCH 16/35] updated example to remove flight price and use of aria-valuetext --- examples/index.html | 1 - examples/slider/js/slider-multithumb.js | 6 +- examples/slider/slider-multithumb.html | 64 +-- test/tests/slider_slider-multithumb.js | 542 +----------------------- 4 files changed, 10 insertions(+), 603 deletions(-) diff --git a/examples/index.html b/examples/index.html index f0195c1f64..a9f43fbc16 100644 --- a/examples/index.html +++ b/examples/index.html @@ -793,7 +793,6 @@

    Examples By Properties and States

    diff --git a/examples/slider/js/slider-multithumb.js b/examples/slider/js/slider-multithumb.js index 89aa0d69a5..fcb2ae6288 100644 --- a/examples/slider/js/slider-multithumb.js +++ b/examples/slider/js/slider-multithumb.js @@ -171,7 +171,8 @@ class SliderMultithumb { pos, x, points = '', - width; + width, + dollarValue; if (this.isMinSlider(sliderNode)) { valueMin = this.getValueMin(this.minSliderNode); @@ -183,9 +184,8 @@ class SliderMultithumb { value = Math.min(Math.max(value, valueMin), valueMax); - var dollarValue = '$' + value; sliderNode.setAttribute('aria-valuenow', value); - sliderNode.setAttribute('aria-valuetext', dollarValue); + dollarValue = '$' + value; pos = this.railX; pos += Math.round( diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index fe971b8b45..7141e6c270 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -31,22 +31,17 @@

    Horizontal Multi-Thumb Slider Example

    The below example section includes a slider for setting a price range that demonstrates the multi-thumb slider design pattern. Users set a price range by moving the arrows (thumbs). - Each slider has two thumbs: one for the minimum price and one for the maximum price. - The price labels at the ends of the slider update as their corresponding thumbs are moved. + The slider has two thumbs: one for the minimum price and one for the maximum price.

    Similar examples include:

    @@ -55,7 +50,7 @@

    Example

    -

    Hotel Price Range

    +

    Hotel Price Range (in USD)

    @@ -69,7 +64,6 @@

    Hotel Price Range

    tabindex="0" aria-valuemin="0" aria-valuenow="100" - aria-valuetext="$100" aria-valuemax="250" aria-label="Hotel Minimum Price"> 0 @@ -81,7 +75,6 @@

    Hotel Price Range

    tabindex="0" aria-valuemin="100" aria-valuenow="250" - aria-valuetext="$250" aria-valuemax="400" aria-label="Hotel Maximum Price"> 0 @@ -90,41 +83,6 @@

    Hotel Price Range

    -

    Flight Price Range

    -
    - - - - - - - - - 0 - - - - - 0 - - - - -
    @@ -256,16 +214,6 @@

    Role, Property, State, and Tabindex Attributes

    Indicates the current value of the slider. - - - - aria-valuetext=DOLLAR AMOUNT - - - img - - Indicates the current value of the slider in dollars using the $ character as a prefix. - diff --git a/test/tests/slider_slider-multithumb.js b/test/tests/slider_slider-multithumb.js index abd8afbe5a..356f5ccd16 100644 --- a/test/tests/slider_slider-multithumb.js +++ b/test/tests/slider_slider-multithumb.js @@ -9,18 +9,11 @@ const exampleFile = 'slider/slider-multithumb.html'; const ex = { sliderSelector: '#ex1 [role="slider"]', hotelSliderSelector: '#ex1 .slider-multithumb:nth-of-type(1) [role="slider"]', - flightSliderSelector: - '#ex1 .slider-multithumb:nth-of-type(2) [role="slider"]', hotelMin: '0', hotelMax: '400', - flightMin: '0', - flightMax: '1000', hotelDefaultValues: ['100', '250'], - flightDefaultValues: ['100', '250'], hotelLabelSelector: '#ex1 .slider-multithumb:nth-of-type(1) [role=slider] .value', - flightLabelSelector: - '#ex1 .slider-multithumb:nth-of-type(2) [role=slider] .value', }; const verifyAllValues = async function ( @@ -55,7 +48,7 @@ ariaTest( exampleFile, 'slider-role', async (t) => { - await assertAriaRoles(t, 'ex1', 'slider', '4', 'g'); + await assertAriaRoles(t, 'ex1', 'slider', '2', 'g'); } ); @@ -77,10 +70,6 @@ ariaTest( t, ex.hotelSliderSelector ); - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); t.is( await hotelSliders[0].getAttribute('aria-valuemax'), @@ -94,19 +83,6 @@ ariaTest( 'Value of "aria-valuemax" for second hotel slider on page load should be: ' + ex.hotelMax ); - t.is( - await flightSliders[0].getAttribute('aria-valuemax'), - ex.flightDefaultValues[1], - 'Value of "aria-valuemax" for first flight slider on page load should be: ' + - ex.flightDefaultValues[1] - ); - - t.is( - await flightSliders[1].getAttribute('aria-valuemax'), - ex.flightMax, - 'Value of "aria-valuemax" for second flight slider on page load should be: ' + - ex.flightMax - ); } ); @@ -119,10 +95,6 @@ ariaTest( t, ex.hotelSliderSelector ); - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); t.is( await hotelSliders[0].getAttribute('aria-valuemin'), @@ -135,17 +107,6 @@ ariaTest( 'Value of "aria-valuemin" for second hotel slider on page load should be: ' + ex.hotelDefaultValues[0] ); - t.is( - await flightSliders[0].getAttribute('aria-valuemin'), - '0', - 'Value of "aria-valuemin" for first flight slider on page load should be: "0"' - ); - t.is( - await flightSliders[1].getAttribute('aria-valuemin'), - ex.flightDefaultValues[0], - 'Value of "aria-valuemin" for second flight slider on page load should be: ' + - ex.flightDefaultValues[0] - ); } ); @@ -158,10 +119,6 @@ ariaTest( t, ex.hotelSliderSelector ); - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); t.is( await hotelSliders[0].getAttribute('aria-valuenow'), @@ -175,59 +132,6 @@ ariaTest( 'Value of "aria-valuenow" for second hotel slider on page load should be: ' + ex.hotelDefaultValues[1] ); - t.is( - await flightSliders[0].getAttribute('aria-valuenow'), - ex.flightDefaultValues[0], - 'Value of "aria-valuenow" for first flight slider on page load should be: ' + - ex.flightDefaultValues[0] - ); - t.is( - await flightSliders[1].getAttribute('aria-valuenow'), - ex.flightDefaultValues[1], - 'Value of "aria-valuenow" for second flight slider on page load should be: ' + - ex.flightDefaultValues[1] - ); - } -); - -ariaTest( - '"aria-valuetext" reflects slider value', - exampleFile, - 'aria-valuetext', - async (t) => { - const hotelSliders = await t.context.queryElements( - t, - ex.hotelSliderSelector - ); - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - - t.is( - await hotelSliders[0].getAttribute('aria-valuetext'), - '$' + ex.hotelDefaultValues[0], - 'Value of "aria-valuetext" for first hotel slider on page load should be: $' + - ex.hotelDefaultValues[0] - ); - t.is( - await hotelSliders[1].getAttribute('aria-valuetext'), - '$' + ex.hotelDefaultValues[1], - 'Value of "aria-valuetext" for second hotel slider on page load should be: $' + - ex.hotelDefaultValues[1] - ); - t.is( - await flightSliders[0].getAttribute('aria-valuetext'), - '$' + ex.flightDefaultValues[0], - 'Value of "aria-valuetext" for first flight slider on page load should be: $' + - ex.flightDefaultValues[0] - ); - t.is( - await flightSliders[1].getAttribute('aria-valuetext'), - '$' + ex.flightDefaultValues[1], - 'Value of "aria-valuetext" for second flight slider on page load should be: $' + - ex.flightDefaultValues[1] - ); } ); @@ -306,69 +210,6 @@ ariaTest( hotelLabels[1], 'after END then one ARROW RIGHT to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.ARROW_RIGHT); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) + 1).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one ARROW RIGHT to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.END, Key.ARROW_RIGHT); - - await verifyAllValues( - t, - ex.flightDefaultValues[1], - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after END then one ARROW RIGHT to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.ARROW_RIGHT); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) + 1).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one ARROW RIGHT to lower flight slider' - ); - - await flightSliders[1].sendKeys(Key.END, Key.ARROW_RIGHT); - - await verifyAllValues( - t, - ex.flightMax, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after END then one ARROW RIGHT to upper flight slider' - ); } ); @@ -436,69 +277,6 @@ ariaTest( hotelLabels[1], 'after END then one ARROW UP to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.ARROW_UP); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) + 1).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one ARROW UP to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.END, Key.ARROW_UP); - - await verifyAllValues( - t, - ex.flightDefaultValues[1], - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after END then one ARROW UP to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.ARROW_UP); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) + 1).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one ARROW UP to lower flight slider' - ); - - await flightSliders[1].sendKeys(Key.END, Key.ARROW_UP); - - await verifyAllValues( - t, - ex.flightMax, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after END then one ARROW UP to upper flight slider' - ); } ); @@ -566,69 +344,6 @@ ariaTest( hotelLabels[1], 'after END then one PAGE UP to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.PAGE_UP); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) + 10).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one PAGE UP to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.END, Key.PAGE_UP); - - await verifyAllValues( - t, - ex.flightDefaultValues[1], - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after END then one PAGE UP to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.PAGE_UP); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) + 10).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one PAGE UP to upper flight slider' - ); - - await flightSliders[1].sendKeys(Key.END, Key.PAGE_UP); - - await verifyAllValues( - t, - ex.flightMax, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after END then one PAGE UP to upper flight slider' - ); } ); @@ -696,69 +411,6 @@ ariaTest( hotelLabels[1], 'after HOME then one ARROW LEFT to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.ARROW_LEFT); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) - 1).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one ARROW LEFT to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.HOME, Key.ARROW_LEFT); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after HOME then one ARROW LEFT to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.ARROW_LEFT); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) - 1).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one ARROW LEFT to upper flight slider' - ); - - await flightSliders[1].sendKeys(Key.HOME, Key.ARROW_LEFT); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after HOME then one ARROW LEFT to upper flight slider' - ); } ); @@ -826,69 +478,6 @@ ariaTest( hotelLabels[1], 'after HOME then one ARROW DOWN to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.ARROW_DOWN); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) - 1).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one ARROW DOWN to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.HOME, Key.ARROW_DOWN); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after HOME then one ARROW DOWN to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.ARROW_DOWN); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) - 1).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one ARROW DOWN to upper flight slider' - ); - - await flightSliders[1].sendKeys(Key.HOME, Key.ARROW_DOWN); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after HOME then one ARROW DOWN to upper flight slider' - ); } ); @@ -956,69 +545,6 @@ ariaTest( hotelLabels[1], 'after HOME then one PAGE DOWN to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements( - t, - ex.flightLabelSelector - ); - - // Send 1 key to lower flight slider - await flightSliders[0].sendKeys(Key.PAGE_DOWN); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[0]) - 10).toString(), - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one PAGE DOWN to lower flight slider' - ); - - await flightSliders[0].sendKeys(Key.HOME, Key.PAGE_DOWN); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after HOME then one PAGE DOWN to lower flight slider' - ); - - // Send 1 key to lower upper slider - await flightSliders[1].sendKeys(Key.PAGE_DOWN); - - await verifyAllValues( - t, - (parseInt(ex.flightDefaultValues[1]) - 10).toString(), - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one PAGE DOWN to lower flight slider' - ); - - await flightSliders[1].sendKeys(Key.HOME, Key.PAGE_DOWN); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after HOME then one PAGE DOWN to upper flight slider' - ); } ); @@ -1053,40 +579,6 @@ ariaTest('home sends value to minimum', exampleFile, 'key-home', async (t) => { hotelLabels[0], 'after one HOME to lower hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements(t, ex.flightLabelSelector); - - // Send 1 key to upper flight slider - await flightSliders[1].sendKeys(Key.HOME); - - await verifyAllValues( - t, - ex.flightDefaultValues[0], - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one HOME to upper flight slider' - ); - - // Send 1 key to upper flight slider - await flightSliders[0].sendKeys(Key.HOME); - - await verifyAllValues( - t, - ex.flightMin, - flightSliders[0], - 'aria-valuenow', - flightSliders[1], - 'aria-valuemin', - flightLabels[0], - 'after one HOME to lower flight slider' - ); }); ariaTest('end sends value to minimum', exampleFile, 'key-end', async (t) => { @@ -1118,36 +610,4 @@ ariaTest('end sends value to minimum', exampleFile, 'key-end', async (t) => { hotelLabels[1], 'after one END to upper hotel slider' ); - - const flightSliders = await t.context.queryElements( - t, - ex.flightSliderSelector - ); - const flightLabels = await t.context.queryElements(t, ex.flightLabelSelector); - - await flightSliders[0].sendKeys(Key.END); - - await verifyAllValues( - t, - ex.flightDefaultValues[1], - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[0], - 'after one END to lower flight slider' - ); - - await flightSliders[1].sendKeys(Key.END); - - await verifyAllValues( - t, - ex.flightMax, - flightSliders[0], - 'aria-valuemax', - flightSliders[1], - 'aria-valuenow', - flightLabels[1], - 'after one END to upper flight slider' - ); }); From 24d177a854a1d42d3c2e5e778dfea92975824f21 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Mar 2021 19:34:16 -0600 Subject: [PATCH 17/35] fixed example reference for multithumb slider --- aria-practices.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aria-practices.html b/aria-practices.html index 486d525334..fca32f1d78 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2424,7 +2424,7 @@

    Slider (Multi-Thumb)

    Example

    -

    Multi-Thumb Slider Examples: Demonstrates two-thumb sliders for picking price ranges for an airline flight and hotel reservation.

    +

    Multi-Thumb Slider Examples: Demonstrates two-thumb sliders for picking a price range for a hotel reservation.

    From b32d8fad9a2a9ce539f5556d9834a535c8e50919 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 9 Mar 2021 19:35:17 -0600 Subject: [PATCH 18/35] fixed example reference for multithumb slider --- aria-practices.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aria-practices.html b/aria-practices.html index fca32f1d78..a3f218ff49 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2424,7 +2424,7 @@

    Slider (Multi-Thumb)

    Example

    -

    Multi-Thumb Slider Examples: Demonstrates two-thumb sliders for picking a price range for a hotel reservation.

    +

    Multi-Thumb Slider Examples: Demonstrates a two-thumb slider for picking a price range for a hotel reservation.

    From 17a7042749e15b8a35e406eee07a986377fd7091 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 6 Apr 2021 15:50:37 -0500 Subject: [PATCH 19/35] updated code and accessibility information for support high contrast setting in chromiumn based browsers --- examples/slider/css/slider-multithumb.css | 31 ++++++++++++++++------- examples/slider/slider-multithumb.html | 3 ++- 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index 86bf8aae27..2fa1c1daa5 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -6,6 +6,10 @@ touch-action: pan-y; } +.slider-multithumb svg { + forced-color-adjust: auto; +} + .slider-multithumb .slider-group { color: #005a9c; } @@ -19,25 +23,23 @@ .slider-multithumb .slider-group .rail { stroke: currentColor; stroke-width: 2px; - fill: transparent; - opacity: 0.6; + fill-opacity: 0; } .slider-multithumb .slider-group .range { fill: currentColor; - opacity: 0.5; + opacity: 0.4; } .slider-multithumb .slider-group .thumb { - stroke: transparent; + stroke-opacity: 0; stroke-width: 2px; fill: currentColor; } .slider-multithumb .slider-group .focus-ring { - stroke-width: 3px; - stroke: transparent; - fill: transparent; + stroke-opacity: 0; + fill-opacity: 0; stroke-linecap: round; stroke-linejoin: round; } @@ -46,7 +48,7 @@ .slider-multithumb .slider-group g.rail, .slider-multithumb .slider-group g.focus { - color: black; + color: currentColor; } .slider-multithumb .slider-group.active g.rail { @@ -55,17 +57,28 @@ .slider-multithumb .slider-group.active g.range { fill: currentColor; + fill-opacity: 1; } .slider-multithumb [role="slider"]:focus { outline: none; } -.slider-multithumb [role="slider"]:hover .focus-ring, +.slider-multithumb [role="slider"]:hover .focus-ring { + stroke: currentColor; + stroke-width: 1px; + stroke-opacity: 0.8; +} + +.slider-multithumb [role="slider"]:focus:hover .focus-ring, .slider-multithumb [role="slider"]:focus .focus-ring { stroke: currentColor; + stroke-opacity: 1; + stroke-width: 3px; } + + .slider-multithumb [role="slider"]:focus .thumb { stroke: currentColor; } diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 7141e6c270..82c6e3f2a3 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -97,7 +97,8 @@

    Accessibility Features

    To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
  • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke property is used for the SVG rect elements to synchronize the border color with text content. If specific colors were used to specify the stroke property, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background NOTE: SVG graphics must be inline to use currentColor. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke and fill property is used for the inline SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke or fill property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background.
    + Note: The SVG element needs to have the CSS forced-color-adjust property set to the value auto for the currentColor value to be updated in high contrast modes, some browsers do not use auto for the default value. In addition, some browsers the SVG rect and polygon elements may need to adjust their stroke-opacity and fill-opacity values in place of using the transparent value for setting the fill and stroke colors in high contrast modes.
    • From 66a69831cb87652d51d6438da051a31bbf238d1d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 6 Apr 2021 15:52:50 -0500 Subject: [PATCH 20/35] fixed css linting issue --- examples/slider/css/slider-multithumb.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index 2fa1c1daa5..e33f945c80 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -77,8 +77,6 @@ stroke-width: 3px; } - - .slider-multithumb [role="slider"]:focus .thumb { stroke: currentColor; } From facec6398ebcf1f4d252c72112ade528b102d496 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 22 Apr 2021 09:51:03 -0500 Subject: [PATCH 21/35] updated documentation and added role=none and aria-hidden --- examples/slider/slider-multithumb.html | 39 ++++++++++++++++++++------ test/tests/slider_slider-multithumb.js | 25 +++++++++++++++++ 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 82c6e3f2a3..596dbdf573 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -52,11 +52,11 @@

    Example

    Hotel Price Range (in USD)

    - - + + - + Role, Property, State, and Tabindex Attributes +
    + +
    none + + + + svg + + + The use of the none role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role. + slider - img + g
      @@ -181,7 +192,7 @@

      Role, Property, State, and Tabindex Attributes

      tabindex=0 - img + g Includes the slider thumb in the page tab sequence. @@ -191,7 +202,7 @@

      Role, Property, State, and Tabindex Attributes

      aria-valuemax=NUMBER - img + g Specifies the maximum value of the slider. @@ -201,7 +212,7 @@

      Role, Property, State, and Tabindex Attributes

      aria-valuemin=NUMBER - img + g Specifies the minimum value of the slider. @@ -211,7 +222,7 @@

      Role, Property, State, and Tabindex Attributes

      aria-valuenow=NUMBER - img + g Indicates the current value of the slider. @@ -221,10 +232,20 @@

      Role, Property, State, and Tabindex Attributes

      aria-label=text - img + g A label identifying the purpose of the slider, e.g., Hotel Minimum Price. + + + + aria-hidden=true + + + g + + Removes the SVG g element and it's children from the accessibility tree, since some screen readers will describe it as an image separate from the slider. +
    diff --git a/test/tests/slider_slider-multithumb.js b/test/tests/slider_slider-multithumb.js index 356f5ccd16..fd123a667f 100644 --- a/test/tests/slider_slider-multithumb.js +++ b/test/tests/slider_slider-multithumb.js @@ -8,6 +8,9 @@ const exampleFile = 'slider/slider-multithumb.html'; const ex = { sliderSelector: '#ex1 [role="slider"]', + svgSelector: '#ex1 svg', + railSelector: '#ex1 g.rail', + rangeSelector: '#ex1 g.range', hotelSliderSelector: '#ex1 .slider-multithumb:nth-of-type(1) [role="slider"]', hotelMin: '0', hotelMax: '400', @@ -43,6 +46,28 @@ const verifyAllValues = async function ( // Attributes +ariaTest('role="none" on SVG element', exampleFile, 'svg-none', async (t) => { + await assertAriaRoles(t, 'ex1', 'none', '1', 'svg'); +}); + +ariaTest( + 'SVG g elements used for the rail have aria-hidden', + exampleFile, + 'aria-hidden-g', + async (t) => { + await assertAttributeValues(t, ex.railSelector, 'aria-hidden', 'true'); + } +); + +ariaTest( + 'SVG g elements used for the range have aria-hidden', + exampleFile, + 'aria-hidden-g', + async (t) => { + await assertAttributeValues(t, ex.rangeSelector, 'aria-hidden', 'true'); + } +); + ariaTest( 'role="slider" on div element', exampleFile, From c3f6165fd131322c311b11e76c5d4885941f02b4 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 22 Apr 2021 11:38:08 -0500 Subject: [PATCH 22/35] fixed some linting errors --- .vnurc | 3 +++ examples/index.html | 2 ++ 2 files changed, 5 insertions(+) diff --git a/.vnurc b/.vnurc index 4afaa5da84..a92b023dd8 100644 --- a/.vnurc +++ b/.vnurc @@ -12,3 +12,6 @@ Attribute “aria-posinset” not allowed on element “tr” at this point. Attribute “aria-setsize” not allowed on element “tr” at this point. # Ignoring role meter Bad value “meter” for attribute “role” on element “div”. +# https://github.com/validator/validator/issues/1096 +Bad value “none” for attribute “role” on element “svg”. +Bad value “presentation” for attribute “role” on element “svg”. diff --git a/examples/index.html b/examples/index.html index a9f43fbc16..384c2b41e8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -233,6 +233,7 @@

    Examples by Role

    @@ -579,6 +580,7 @@

    Examples By Properties and States

  • Navigation Menubar
  • Radio Group Using aria-activedescendant
  • Radio Group Using Roving tabindex
    • +
  • Horizontal Multi-Thumb Slider
  • Date Picker Spin Button
  • Table
  • Tabs with Automatic Activation
    • From 4a62955e92b621f6124f2b431c928c39e1a6c532 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Apr 2021 15:44:59 -0500 Subject: [PATCH 23/35] updated color styling of rail and thumbs with focus --- examples/slider/css/slider-multithumb.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index e33f945c80..cf04326028 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -11,7 +11,7 @@ } .slider-multithumb .slider-group { - color: #005a9c; + color: black; } .slider-multithumb .slider-group .value { @@ -60,11 +60,12 @@ fill-opacity: 1; } -.slider-multithumb [role="slider"]:focus { +.slider-multithumb .slider-group [role="slider"]:focus { outline: none; + color: #005a9c; } -.slider-multithumb [role="slider"]:hover .focus-ring { +.slider-multithumb .slider-group [role="slider"]:hover .focus-ring { stroke: currentColor; stroke-width: 1px; stroke-opacity: 0.8; From 4b612c6438d453892b49c14e802e93a6a958dce4 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 27 Apr 2021 15:52:08 -0500 Subject: [PATCH 24/35] updated color styling of rail and thumbs with focus to match other slider examples --- examples/slider/css/slider-multithumb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index cf04326028..2e2ab65bf8 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -56,7 +56,7 @@ } .slider-multithumb .slider-group.active g.range { - fill: currentColor; + fill: #005a9c; fill-opacity: 1; } From 3861e97eff48ae17421de7590c93066b49683d2f Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 4 May 2021 14:29:06 -0500 Subject: [PATCH 25/35] updated label for sliders and accessibility documentation --- .husky/_/husky.sh | 30 ++++++++++++++++++++++++++ examples/slider/slider-multithumb.html | 6 +++--- 2 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 .husky/_/husky.sh diff --git a/.husky/_/husky.sh b/.husky/_/husky.sh new file mode 100644 index 0000000000..ca2720e08a --- /dev/null +++ b/.husky/_/husky.sh @@ -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 diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 596dbdf573..d00cb5c8cd 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -65,7 +65,7 @@

    Hotel Price Range (in USD)

    aria-valuemin="0" aria-valuenow="100" aria-valuemax="250" - aria-label="Hotel Minimum Price"> + aria-label="Hotel Minimum Price in US dollars"> 0 @@ -76,7 +76,7 @@

    Hotel Price Range (in USD)

    aria-valuemin="100" aria-valuenow="250" aria-valuemax="400" - aria-label="Hotel Maximum Price"> + aria-label="Hotel Maximum Price in US dollars"> 0 @@ -91,7 +91,7 @@

    Hotel Price Range (in USD)

    Accessibility Features

    • - The placement of the slider value above the thumb makes it easier for users with low vision to see the current value while dragging the thumb. + The current value of the slider is visible above the thumb, so when the thumb value is changed using a pointing device by a person with the visual impairment they can immediately see the change in value without have to move their visual attention to another part of the page.
    • To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value. From e255ab36434115381d1f47463d1c0eeb6a4ede2e Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 12 May 2021 13:00:43 -0500 Subject: [PATCH 26/35] updated accessibility documentation on using fill-opacity --- examples/slider/slider-multithumb.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index d00cb5c8cd..9f2242cff1 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -97,8 +97,11 @@

      Accessibility Features

      To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
    • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS currentColor value for the stroke and fill property is used for the inline SVG rect elements to synchronize the border color with text content. If specific colors are used to specify the stroke or fill property, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if its color matches the high contrast mode background.
      - Note: The SVG element needs to have the CSS forced-color-adjust property set to the value auto for the currentColor value to be updated in high contrast modes, some browsers do not use auto for the default value. In addition, some browsers the SVG rect and polygon elements may need to adjust their stroke-opacity and fill-opacity values in place of using the transparent value for setting the fill and stroke colors in high contrast modes. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. + For example, support for using the high contrast foreground color for the focus ring border is achieved by using the CSS currentColor value for the stroke property of an inline SVG rect element. To enable the high contrast background color to be the used as the contrasting color the fill-opacity attribute of the rect is set to zero. + If specific colors were instead used to specify the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
      + Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentColor value to be updated in high contrast mode. + Some browsers do not use auto for the default value.
    From 0435eff8b1ec491cb5b61523b956e60a7da2635d Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 21:22:05 -0700 Subject: [PATCH 27/35] Update warning language to match other slider examples --- examples/slider/slider-multithumb.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 9f2242cff1..ce877d51cd 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -26,7 +26,12 @@

    Horizontal Multi-Thumb Slider Example

    -

    WARNING! Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. To change the slider value, touch-based assistive technologies need to respond to user gestures for incrementing and decrementing the value by synthesizing key events. This is a new convention that may not be fully implemented by some assistive technologies. Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

    +

    + WARNING! Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output. + To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events. + This is a new convention that may not be fully implemented by some assistive technologies. + Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems. +

    The below example section includes a slider for setting a price range that demonstrates the multi-thumb slider design pattern. From be2affe0b6f19dcd49f942d946c112784032b681 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 21:46:39 -0700 Subject: [PATCH 28/35] Simplify intro --- examples/slider/slider-multithumb.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index ce877d51cd..319975c846 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -33,10 +33,11 @@

    Horizontal Multi-Thumb Slider Example

    Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.

    -

    The below example section includes a slider for setting a price range that demonstrates the - multi-thumb slider design pattern. - Users set a price range by moving the arrows (thumbs). - The slider has two thumbs: one for the minimum price and one for the maximum price. +

    + The following example of the + multi-thumb slider design pattern + demonstrates an input for setting a pair of values that represent a range. + This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.

    Similar examples include:

      From 80128b2aeb38ef64f601d83894052fc0a977e553 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 21:51:34 -0700 Subject: [PATCH 29/35] Update list of similar examples --- examples/slider/slider-multithumb.html | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 319975c846..57a0fe6452 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -41,15 +41,11 @@

      Horizontal Multi-Thumb Slider Example

      Similar examples include:

      +

      Example

      From 9c0bfd0bbc2cb84b01c142999609f4fea342c669 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 21:58:34 -0700 Subject: [PATCH 30/35] Update wording of accessibility features documentation to match latest wording from other examples --- examples/slider/slider-multithumb.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 57a0fe6452..c6cc9e7e59 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -92,19 +92,16 @@

      Hotel Price Range (in USD)

      Accessibility Features

        +
      • The display of the slider's current value remains adjacent to the thumb as the thumb is moved, so people with a small field of view (e.g., due to magnification) can easily see the value while focusing on the thumb as they move it.
        • +
      • To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.
      • - The current value of the slider is visible above the thumb, so when the thumb value is changed using a pointing device by a person with the visual impairment they can immediately see the change in value without have to move their visual attention to another part of the page. -
        • -
      • - To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value. -
        • -
      • - To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. - For example, support for using the high contrast foreground color for the focus ring border is achieved by using the CSS currentColor value for the stroke property of an inline SVG rect element. To enable the high contrast background color to be the used as the contrasting color the fill-opacity attribute of the rect is set to zero. - If specific colors were instead used to specify the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
        - Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentColor value to be updated in high contrast mode. + To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content. + For example, the color of the focus ring border is set to match the foreground color of high contrast mode text by specifying the CSS currentColor value for the stroke property of the inline SVG rect element used to draw the focus ring border. + To make the background of the rect match the high contrast background color, the fill-opacity attribute of the rect is set to zero. + If specific colors were instead used to specify the stroke and fill properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.
        + Note: The SVG element needs to have the CSS forced-color-adjust property set to auto for the currentColor value to be updated in high contrast mode. Some browsers do not use auto for the default value. -
        • +
      From 1fe991f74ab49bbfc034ca3bc3310c1c6e14de5a Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 22:06:09 -0700 Subject: [PATCH 31/35] Revise aria-hidden documentation --- examples/slider/slider-multithumb.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index c6cc9e7e59..aeaa4a7363 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -246,11 +246,12 @@

      Role, Property, State, and Tabindex Attributes

      g - Removes the SVG g element and it's children from the accessibility tree, since some screen readers will describe it as an image separate from the slider. + Removes the SVG g element from the accessibility tree to prevent assistive technologies from presenting it as an image separate from the slider.
      +

      Javascript and CSS Source Code

        From b866c6fce35d05d572026ce40007c74957a96e45 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 24 May 2021 22:10:59 -0700 Subject: [PATCH 32/35] Make aria-hidden documentation in rating slider match wording in seek and multi-thumb --- examples/slider/slider-multithumb.html | 1 + examples/slider/slider-rating.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index aeaa4a7363..80bed1101a 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -259,6 +259,7 @@

        Javascript and CSS Source Code

      • Javascript: slider-multithumb.js
      +

      HTML Source Code

      diff --git a/examples/slider/slider-rating.html b/examples/slider/slider-rating.html index d716bdb415..4e83f010b4 100644 --- a/examples/slider/slider-rating.html +++ b/examples/slider/slider-rating.html @@ -267,7 +267,7 @@

      Role, Property, State, and Tabindex Attributes

      aria-hidden="true" svg - Removes the SVG elements from the accessibility tree. Some assistive technologies will describe the SVG elements, unless they are explicitly hidden. + Removes the SVG elements from the accessibility tree to prevent assistive technologies from presenting them as elements separate from the slider. From d401396a01fe9bb4f7376a0966dbf22d839858ef Mon Sep 17 00:00:00 2001 From: Jon Date: Tue, 25 May 2021 13:55:51 -0500 Subject: [PATCH 33/35] fixed css linting error --- examples/slider/css/slider-multithumb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index 2e2ab65bf8..e03f654482 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -71,7 +71,7 @@ stroke-opacity: 0.8; } -.slider-multithumb [role="slider"]:focus:hover .focus-ring, +.slider-multithumb [role="slider"]:hover .focus-ring, .slider-multithumb [role="slider"]:focus .focus-ring { stroke: currentColor; stroke-opacity: 1; From 422bcb861c4a27b1a662f7645218e42bd4151d02 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 25 May 2021 17:38:02 -0500 Subject: [PATCH 34/35] fixed css linting error --- examples/slider/css/slider-multithumb.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/slider/css/slider-multithumb.css b/examples/slider/css/slider-multithumb.css index e03f654482..fb26f97a4e 100644 --- a/examples/slider/css/slider-multithumb.css +++ b/examples/slider/css/slider-multithumb.css @@ -60,12 +60,12 @@ fill-opacity: 1; } -.slider-multithumb .slider-group [role="slider"]:focus { +.slider-multithumb [role="slider"]:focus { outline: none; color: #005a9c; } -.slider-multithumb .slider-group [role="slider"]:hover .focus-ring { +.slider-multithumb [role="slider"]:hover .focus-ring { stroke: currentColor; stroke-width: 1px; stroke-opacity: 0.8; From 60a48bb194937723642e85ce087b48e570ac3d94 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 24 Aug 2021 07:50:54 -0700 Subject: [PATCH 35/35] Add link to media seek slider --- examples/slider/slider-multithumb.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/slider/slider-multithumb.html b/examples/slider/slider-multithumb.html index 80bed1101a..1617fd6ce2 100644 --- a/examples/slider/slider-multithumb.html +++ b/examples/slider/slider-multithumb.html @@ -44,6 +44,7 @@

      Horizontal Multi-Thumb Slider Example

    • Color Viewer Slider Example: Basic horizontal sliders that illustrate setting numeric values for a color picker.
    • Vertical Temperature Slider Example: Demonstrates using aria-orientation to specify vertical orientation and aria-valuetext to communicate unit of measure for a temperature input.
    • Rating Slider Example: Horizontal slider that demonstrates using aria-valuetext to communicate current and maximum value of a rating input for a five star rating scale.
      • +
    • Media Seek Slider Example: Horizontal slider that demonstrates using aria-valuetext to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.