From 6975e8248f1d4ba566fab87c81403321e5acd84d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 13 Apr 2021 16:50:15 -0500 Subject: [PATCH 1/3] fixed linter issues --- aria-practices.html | 2 +- examples/index.html | 15 +- examples/slider/css/slider-valuetext.css | 107 +++ examples/slider/css/text-slider.css | 48 -- examples/slider/css/vertical-slider.css | 51 -- examples/slider/js/slider-valuetext.js | 554 ++++++++++++++++ examples/slider/js/text-slider.js | 210 ------ examples/slider/js/vertical-slider.js | 221 ------- examples/slider/multithumb-slider.html | 6 +- examples/slider/slider-2.html | 286 -------- examples/slider/slider-color-viewer.html | 3 +- examples/slider/slider-valuetext.html | 366 +++++++++++ test/tests/slider_slider-2.js | 795 ----------------------- test/tests/slider_slider-valuetext.js | 794 ++++++++++++++++++++++ 14 files changed, 1834 insertions(+), 1624 deletions(-) create mode 100644 examples/slider/css/slider-valuetext.css delete mode 100644 examples/slider/css/text-slider.css delete mode 100644 examples/slider/css/vertical-slider.css create mode 100644 examples/slider/js/slider-valuetext.js delete mode 100644 examples/slider/js/text-slider.js delete mode 100644 examples/slider/js/vertical-slider.js delete mode 100644 examples/slider/slider-2.html create mode 100644 examples/slider/slider-valuetext.html delete mode 100644 test/tests/slider_slider-2.js create mode 100644 test/tests/slider_slider-valuetext.js diff --git a/aria-practices.html b/aria-practices.html index c0740a23ec..aed18f450f 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2362,7 +2362,7 @@

Slider

Examples

diff --git a/examples/index.html b/examples/index.html index 13eb4991ed..f7ca2f7d4b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -237,6 +237,7 @@

Examples by Role

@@ -303,8 +304,8 @@

Examples by Role

@@ -588,6 +589,7 @@

Examples By Properties and States

  • Radio Group Using aria-activedescendant
  • Radio Group Using Roving tabindex
  • Color Viewer Slider
    • +
  • Slider with aria-orientation and aria-valuetext
  • Date Picker Spin Button
  • Table
  • Tabs with Automatic Activation
    • @@ -625,6 +627,7 @@

    Examples By Properties and States

  • Radio Group Using aria-activedescendant
  • Radio Group Using Roving tabindex
  • Color Viewer Slider
    • +
  • Slider with aria-orientation and aria-valuetext
  • Date Picker Spin Button
  • Tabs with Automatic Activation
  • Tabs with Manual Activation
    • @@ -678,7 +681,7 @@

    Examples By Properties and States

    aria-orientation - Slider with aria-orientation and aria-valuetext + Slider with aria-orientation and aria-valuetext aria-owns @@ -767,8 +770,8 @@

    Examples By Properties and States

    @@ -779,8 +782,8 @@

    Examples By Properties and States

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

    Examples By Properties and States

    @@ -804,7 +807,7 @@

    Examples By Properties and States

    diff --git a/examples/slider/css/slider-valuetext.css b/examples/slider/css/slider-valuetext.css new file mode 100644 index 0000000000..55a2d52d7a --- /dev/null +++ b/examples/slider/css/slider-valuetext.css @@ -0,0 +1,107 @@ +/* CSS Document */ + +.slider-valuetext h3 { + color: black; + font-weight: bold; + font-size: 150%; +} + +.slider-temperature .label, +.slider-seek .label { + font-weight: bold; + font-size: 125%; +} + +.slider-temperature svg, +.slider-seek svg { + forced-color-adjust: auto; +} + +.slider-temperature text, +.slider-seek text { + font-weight: bold; + fill: currentColor; + font-family: sans-serif; +} + +.slider-temperature { + width: 12em; +} + +.slider-temperature, +.slider-seek { + margin-top: 1em; + padding: 6px; + color: black; +} + +.slider-temperature .value, +.slider-slider .value { + position: relative; + top: 20px; + height: 1.5em; + font-size: 80%; +} + +.slider-temperature .temp-value, +.slider-seek .temp-value { + padding-left: 24px; + font-size: 200%; +} + +.slider-temperature .rail, +.slider-seek .rail { + stroke: currentColor; + stroke-width: 2px; + fill: currentColor; + fill-opacity: 25%; +} + +.slider-temperature .thumb, +.slider-seek .thumb { + stroke-width: 0; + fill: currentColor; +} + +.slider-temperature .focus-ring, +.slider-seek .focus-ring { + stroke: currentColor; + stroke-opacity: 0; + fill-opacity: 0; + stroke-width: 3px; + display: none; +} + +.slider-temperature .slider-group { + touch-action: pan-x; +} + +.slider-seek .slider-group { + touch-action: pan-y; +} + +.slider-seek .slider-group .value { + display: none; +} + +/* Focus and hover styling */ + +.slider-seek.focus [role="slider"], +.slider-temperature.focus [role="slider"] { + color: #005a9c; +} + +.slider-temperature [role="slider"]:focus, +.slider-seek [role="slider"]:focus { + outline: none; +} + +.slider-temperature [role="slider"]:focus .focus-ring, +.slider-seek [role="slider"]:focus .focus-ring { + display: block; + stroke-opacity: 1; +} + +.slider-seek [role="slider"]:focus .value { + display: block; +} diff --git a/examples/slider/css/text-slider.css b/examples/slider/css/text-slider.css deleted file mode 100644 index 7709acdb95..0000000000 --- a/examples/slider/css/text-slider.css +++ /dev/null @@ -1,48 +0,0 @@ -/* CSS Document */ - -div.aria-widget-text-slider { - margin-top: 0.5em; - margin-bottom: 0.5em; - height: 120px; -} - -div.aria-widget-text-slider .rail { - margin: 2px; - padding: 1px; - background-color: #eee; - border: 1px solid #888; - position: relative; - top: 2em; - height: 4px; -} - -div.aria-widget-text-slider .thumb { - border: 1px solid #888; - border-top-color: #666; - border-left-color: #666; - background-color: #ddd; - position: relative; -} - -div.aria-widget-text-slider .rail .thumb.focus, -div.aria-widget-text-slider .rail .thumb:hover { - outline: 2px solid #888; - background-color: #e0cb52; -} - -div.aria-widget-text-slider .rail.focus { - background-color: #aaa; -} - -div.aria-widget-text-slider div.value { - text-align: center; - display: block; - position: absolute; -} - -div.aria-widget-text-slider .label { - display: block; - margin-top: 0.5em; - margin-bottom: 0.5em; - font-weight: bold; -} diff --git a/examples/slider/css/vertical-slider.css b/examples/slider/css/vertical-slider.css deleted file mode 100644 index f7d0ab3ee5..0000000000 --- a/examples/slider/css/vertical-slider.css +++ /dev/null @@ -1,51 +0,0 @@ -/* CSS Document */ - -div.aria-widget-vertical-slider { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -div.aria-widget-vertical-slider .rail { - margin: 2px; - padding: 1px; - background-color: #eee; - border: 1px solid #888; - position: relative; - left: 3.8em; - width: 4px; -} - -div.aria-widget-vertical-slider .thumb { - border: 1px solid #888; - border-top-color: #666; - border-left-color: #666; - background-color: #ddd; - position: relative; -} - -div.aria-widget-vertical-slider .rail .thumb.focus, -div.aria-widget-vertical-slider .rail .thumb:hover { - outline: 2px solid #888; - background-color: #e0cb52; -} - -div.aria-widget-vertical-slider .rail.focus { - background-color: #aaa; -} - -div.aria-widget-vertical-slider .label, -div.aria-widget-vertical-slider .value { - margin-top: 0.5em; - margin-bottom: 0.5em; - text-align: center; - width: 8em; -} - -div.aria-widget-vertical-slider .label { - font-weight: bold; - font-size: 110%; -} - -#id_kbd { - clear: both; -} diff --git a/examples/slider/js/slider-valuetext.js b/examples/slider/js/slider-valuetext.js new file mode 100644 index 0000000000..6e41b6deee --- /dev/null +++ b/examples/slider/js/slider-valuetext.js @@ -0,0 +1,554 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: slider-valuetext.js + * + * Desc: Slider widgets using aria-valuetext that implements ARIA Authoring Practices + */ + +'use strict'; + +class SliderTemperature { + constructor(domNode) { + this.labelCelsiusAbbrev = '°C'; + this.labelCelsius = ' degrees Celsius'; + this.changeValue = 0.1; + this.bigChangeValue = 20 * this.changeValue; + + this.domNode = domNode; + + this.isMoving = false; + + this.svgNode = domNode.querySelector('svg'); + this.svgPoint = this.svgNode.createSVGPoint(); + + this.borderWidth = 2; + this.borderWidth2 = 2 * this.borderWidth; + + this.railNode = domNode.querySelector('.rail'); + this.sliderNode = domNode.querySelector('[role=slider]'); + this.sliderValueNode = this.sliderNode.querySelector('.value'); + this.sliderFocusNode = this.sliderNode.querySelector('.focus-ring'); + this.sliderThumbNode = this.sliderNode.querySelector('.thumb'); + + // The input elements are optional to support mobile devices, + // when a keyboard is not present + this.valueNode = domNode.querySelector('.temp-value'); + + // Dimensions of the slider focus ring, thumb and rail + + this.valueX = parseInt(this.sliderValueNode.getAttribute('x')); + this.valueHeight = this.sliderValueNode.getBoundingClientRect().height; + + this.railHeight = parseInt(this.railNode.getAttribute('height')); + this.railWidth = parseInt(this.railNode.getAttribute('width')); + this.railY = parseInt(this.railNode.getAttribute('y')); + this.railX = parseInt(this.railNode.getAttribute('x')); + + this.thumbY = parseInt(this.sliderThumbNode.getAttribute('y')); + this.thumbWidth = parseInt(this.sliderThumbNode.getAttribute('width')); + this.thumbHeight = parseInt(this.sliderThumbNode.getAttribute('height')); + + this.focusX = parseInt(this.sliderFocusNode.getAttribute('x')); + this.focusWidth = parseInt(this.sliderFocusNode.getAttribute('width')); + this.focusHeight = parseInt(this.sliderFocusNode.getAttribute('height')); + + this.thumbX = this.railX + this.railWidth / 2 - this.thumbWidth / 2; + this.sliderThumbNode.setAttribute('x', this.thumbX); + this.sliderValueNode.setAttribute('x', this.valueX); + this.sliderFocusNode.setAttribute('x', this.focusX); + + this.svgNode.addEventListener('click', this.onRailClick.bind(this)); + this.sliderNode.addEventListener( + 'keydown', + this.onSliderKeydown.bind(this) + ); + this.sliderNode.addEventListener( + 'pointerdown', + this.onSliderPointerDown.bind(this) + ); + + // bind a pointermove event handler to move pointer + this.svgNode.addEventListener('pointermove', this.onPointerMove.bind(this)); + + // bind a pointerup event handler to stop tracking pointer movements + document.addEventListener('pointerup', this.onPointerUp.bind(this)); + + this.sliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); + this.sliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); + + this.moveSliderTo(this.getValue()); + } + + // Get point in global SVG space + getSVGPoint(event) { + this.svgPoint.x = event.clientX; + this.svgPoint.y = event.clientY; + return this.svgPoint.matrixTransform(this.svgNode.getScreenCTM().inverse()); + } + + getValue() { + return parseFloat(this.sliderNode.getAttribute('aria-valuenow')); + } + + getValueMin() { + return parseFloat(this.sliderNode.getAttribute('aria-valuemin')); + } + + getValueMax() { + return parseFloat(this.sliderNode.getAttribute('aria-valuemax')); + } + + isInRange(value) { + let valueMin = this.getValueMin(); + let valueMax = this.getValueMax(); + return value <= valueMax && value >= valueMin; + } + + moveSliderTo(value) { + var valueMax, valueMin, pos; + + valueMin = this.getValueMin(); + valueMax = this.getValueMax(); + + value = Math.min(Math.max(value, valueMin), valueMax); + + let valueOutput = value.toFixed(1) + this.labelCelsiusAbbrev; + + let valueText = value.toFixed(1) + this.labelCelsius; + + this.valueNode.textContent = valueOutput; + this.sliderNode.setAttribute('aria-valuenow', value.toFixed(1)); + this.sliderNode.setAttribute('aria-valuetext', valueText); + + let height = this.railHeight - this.thumbHeight + this.borderWidth2; + + pos = this.railY + height - 1; + pos -= Math.round(((value - valueMin) * height) / (valueMax - valueMin)); + this.sliderNode.setAttribute('y', pos); + + // update INPUT, label and ARIA attributes + this.sliderValueNode.textContent = valueOutput; + + // move the SVG focus ring and thumb elements + this.sliderFocusNode.setAttribute( + 'y', + pos - (this.focusHeight - this.thumbHeight) / 2 + ); + this.sliderThumbNode.setAttribute('y', pos); + + // Position value + this.sliderValueNode.setAttribute( + 'y', + pos - + this.borderWidth + + this.thumbHeight - + (this.valueHeight - this.thumbHeight) / 2 + ); + } + + onSliderKeydown(event) { + var flag = false; + var value = this.getValue(); + var valueMin = this.getValueMin(); + var valueMax = this.getValueMax(); + + switch (event.key) { + case 'ArrowLeft': + case 'ArrowDown': + this.moveSliderTo(value - this.changeValue); + flag = true; + break; + + case 'ArrowRight': + case 'ArrowUp': + this.moveSliderTo(value + this.changeValue); + flag = true; + break; + + case 'PageDown': + this.moveSliderTo(value - this.bigChangeValue); + flag = true; + break; + + case 'PageUp': + this.moveSliderTo(value + this.bigChangeValue); + flag = true; + break; + + case 'Home': + this.moveSliderTo(valueMin); + flag = true; + break; + + case 'End': + this.moveSliderTo(valueMax); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.preventDefault(); + event.stopPropagation(); + } + } + + onSliderFocus() { + this.domNode.classList.add('focus'); + } + + onSliderBlur() { + this.domNode.classList.remove('focus'); + } + + calcValue(y) { + let min = this.getValueMin(); + let max = this.getValueMax(); + let diffY = y - this.railY; + return max - (diffY * (max - min)) / this.railHeight; + } + + onRailClick(event) { + var value = this.calcValue(this.getSVGPoint(event).y); + this.moveSliderTo(value); + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + this.sliderNode.focus(); + } + + onSliderPointerDown(event) { + this.isMoving = true; + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + this.sliderNode.focus(); + } + + onPointerMove(event) { + if (this.isMoving) { + var value = this.calcValue(this.getSVGPoint(event).y); + this.moveSliderTo(value); + + event.preventDefault(); + event.stopPropagation(); + } + } + + onPointerUp() { + this.isMoving = false; + } +} + +/* + * Desc: Slider widget that implements ARIA Authoring Practices + */ + +class SliderSeek { + constructor(domNode) { + this.domNode = domNode; + + this.isMoving = false; + + this.svgNode = domNode.querySelector('svg'); + this.svgPoint = this.svgNode.createSVGPoint(); + + this.railNode = domNode.querySelector('.rail'); + this.sliderNode = domNode.querySelector('[role=slider]'); + this.sliderValueNode = this.sliderNode.querySelector('.value'); + this.sliderFocusNode = this.sliderNode.querySelector('.focus-ring'); + this.sliderThumbNode = this.sliderNode.querySelector('.thumb'); + + this.valueLabelNodes = domNode.querySelectorAll('.value-label'); + + // Dimensions of the slider focus ring, thumb and rail + + this.railHeight = parseInt(this.railNode.getAttribute('height')); + this.railWidth = parseInt(this.railNode.getAttribute('width')); + this.railY = parseInt(this.railNode.getAttribute('y')); + this.railX = parseInt(this.railNode.getAttribute('x')); + + this.thumbWidth = parseInt(this.sliderThumbNode.getAttribute('width')); + this.thumbHeight = parseInt(this.sliderThumbNode.getAttribute('height')); + + this.focusHeight = parseInt(this.sliderFocusNode.getAttribute('height')); + this.focusWidth = parseInt(this.sliderFocusNode.getAttribute('width')); + + this.thumbY = this.railY + this.railHeight / 2 - this.thumbHeight / 2; + this.sliderThumbNode.setAttribute('y', this.thumbY); + + this.focusY = this.railY + this.railHeight / 2 - this.focusHeight / 2; + this.sliderFocusNode.setAttribute('y', this.focusY); + + this.railNode.setAttribute('y', this.railY); + this.railNode.setAttribute('x', this.railX); + this.railNode.setAttribute('height', this.railHeight); + this.railNode.setAttribute('width', this.railWidth); + + // define possible slider positions + + this.svgNode.addEventListener('click', this.onRailClick.bind(this)); + this.sliderNode.addEventListener( + 'keydown', + this.onSliderKeydown.bind(this) + ); + + this.sliderNode.addEventListener( + 'pointerdown', + this.onSliderPointerDown.bind(this) + ); + + // bind a pointermove event handler to move pointer + this.svgNode.addEventListener('pointermove', this.onPointerMove.bind(this)); + + // bind a pointerup event handler to stop tracking pointer movements + document.addEventListener('pointerup', this.onPointerUp.bind(this)); + + this.sliderNode.addEventListener('focus', this.onSliderFocus.bind(this)); + this.sliderNode.addEventListener('blur', this.onSliderBlur.bind(this)); + + let deltaPosition = this.railWidth / (this.valueLabelNodes.length - 1); + + let position = this.railX; + + this.positions = []; + this.textValues = []; + + let maxTextWidth = this.getWidthFromLabelText(); + let textHeight = this.getHeightFromLabelText(); + + for (let i = 0; i < this.valueLabelNodes.length; i++) { + let valueLabelNode = this.valueLabelNodes[i]; + + let textNode = valueLabelNode.querySelector('text'); + + let w = maxTextWidth + 2; + let x = position - w / 2; + let y = this.thumbY + this.thumbHeight; + + x = x + (maxTextWidth - textNode.getBoundingClientRect().width) / 2; + y = y + textHeight; + + textNode.setAttribute('x', x); + textNode.setAttribute('y', y); + + this.textValues.push(valueLabelNode.getAttribute('data-value')); + + this.positions.push(position); + position += deltaPosition; + } + + // temporarily show slider value to allow width calc onload + this.sliderValueNode.setAttribute('style', 'display: block'); + this.moveSliderTo(this.getValue()); + this.sliderValueNode.removeAttribute('style'); + } + + getWidthFromLabelText() { + let width = 0; + for (let i = 0; i < this.valueLabelNodes.length; i++) { + let textNode = this.valueLabelNodes[i].querySelector('text'); + if (textNode) { + width = Math.max(width, textNode.getBoundingClientRect().width); + } + } + return width; + } + + getHeightFromLabelText() { + let height = 0; + let textNode = this.valueLabelNodes[0].querySelector('text'); + if (textNode) { + height = textNode.getBoundingClientRect().height; + } + return height; + } + + // Get point in global SVG space + getSVGPoint(event) { + this.svgPoint.x = event.clientX; + this.svgPoint.y = event.clientY; + return this.svgPoint.matrixTransform(this.svgNode.getScreenCTM().inverse()); + } + + getValue() { + return parseInt(this.sliderNode.getAttribute('aria-valuenow')); + } + + getValueMin() { + return parseInt(this.sliderNode.getAttribute('aria-valuemin')); + } + + getValueMax() { + return parseInt(this.sliderNode.getAttribute('aria-valuemax')); + } + + isInRange(value) { + let valueMin = this.getValueMin(); + let valueMax = this.getValueMax(); + return value <= valueMax && value >= valueMin; + } + + moveSliderTo(value) { + let valueMax, valueMin, pos, minutes, seconds, width; + let minutesLabel = ' Minutes '; + let secondsLabel = ' Seconds'; + + valueMin = this.getValueMin(); + valueMax = this.getValueMax(); + + value = Math.min(Math.max(value, valueMin), valueMax); + + this.sliderNode.setAttribute('aria-valuenow', value); + + minutes = parseInt(value / 60); + seconds = value % 60; + if (seconds < 10) { + seconds = '0' + seconds; + } + + this.sliderValueNode.textContent = minutes + ':' + seconds; + width = this.sliderValueNode.getBoundingClientRect().width; + + if (minutes === 1) { + minutesLabel = ' Minute '; + } + + if (seconds === 1) { + secondsLabel = ' Second'; + } + + this.sliderNode.setAttribute( + 'aria-valuetext', + minutes + minutesLabel + seconds + secondsLabel + ); + + pos = + this.railX + + Math.round(((value - valueMin) * this.railWidth) / (valueMax - valueMin)); + + // move the SVG focus ring and thumb elements + this.sliderFocusNode.setAttribute('x', pos - this.focusWidth / 2); + this.sliderThumbNode.setAttribute('x', pos - this.thumbWidth / 2); + this.sliderValueNode.setAttribute('x', pos - width / 2); + } + + onSliderKeydown(event) { + var flag = false; + var value = this.getValue(); + var valueMin = this.getValueMin(); + var valueMax = this.getValueMax(); + + switch (event.key) { + case 'ArrowLeft': + case 'ArrowDown': + this.moveSliderTo(value - 1); + flag = true; + break; + + case 'ArrowRight': + case 'ArrowUp': + this.moveSliderTo(value + 1); + flag = true; + break; + + case 'PageDown': + this.moveSliderTo(value - 10); + flag = true; + break; + + case 'PageUp': + this.moveSliderTo(value + 10); + flag = true; + break; + + case 'Home': + this.moveSliderTo(valueMin); + flag = true; + break; + + case 'End': + this.moveSliderTo(valueMax); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.preventDefault(); + event.stopPropagation(); + } + } + + onSliderFocus() { + this.domNode.classList.add('focus'); + } + + onSliderBlur() { + this.domNode.classList.remove('focus'); + } + + onRailClick(event) { + var x = this.getSVGPoint(event).x; + var min = this.getValueMin(); + var max = this.getValueMax(); + var diffX = x - this.railX; + var value = Math.round((diffX * (max - min)) / this.railWidth); + this.moveSliderTo(value); + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + this.sliderNode.focus(); + } + + onSliderPointerDown(event) { + this.isMoving = true; + + event.preventDefault(); + event.stopPropagation(); + + // Set focus to the clicked handle + this.sliderNode.focus(); + } + + onPointerMove(event) { + if (this.isMoving) { + var x = this.getSVGPoint(event).x; + var min = this.getValueMin(); + var max = this.getValueMax(); + var diffX = x - this.railX; + var value = Math.round((diffX * (max - min)) / this.railWidth); + this.moveSliderTo(value); + + event.preventDefault(); + event.stopPropagation(); + } + } + + onPointerUp() { + this.isMoving = false; + } +} + +window.addEventListener('load', function () { + var sliders = document.querySelectorAll('.slider-temperature'); + for (let i = 0; i < sliders.length; i++) { + new SliderTemperature(sliders[i]); + } + sliders = document.querySelectorAll('.slider-seek'); + for (let i = 0; i < sliders.length; i++) { + new SliderSeek(sliders[i]); + } +}); diff --git a/examples/slider/js/text-slider.js b/examples/slider/js/text-slider.js deleted file mode 100644 index 683e311f93..0000000000 --- a/examples/slider/js/text-slider.js +++ /dev/null @@ -1,210 +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: text-slider.js - * - * Desc: Text slider widget that implements ARIA Authoring Practices - */ - -'use strict'; - -// Create Text Slider that contains value, valuemin, valuemax, and valuenow - -var TSlider = function (domNode) { - this.domNode = domNode; - this.railDomNode = domNode.parentNode; - - this.valueDomNode = false; - - this.values = []; - this.valueNodes = this.railDomNode.getElementsByClassName('value'); - for (var i = 0; this.valueNodes[i]; i++) { - this.values.push(this.valueNodes[i].innerHTML); - } - this.valueMin = 0; - this.valueMax = this.values.length - 1; - this.valueNow = 0; - this.valueText = parseInt(this.values[this.valueNow]); - this.valueInc = 1; - - this.railWidth = 0; - - this.thumbWidth = 8; - this.thumbHeight = 28; - - this.keyCode = Object.freeze({ - left: 37, - up: 38, - right: 39, - down: 40, - end: 35, - home: 36, - }); -}; - -// Initialize text slider -TSlider.prototype.init = function () { - if (this.domNode.getAttribute('aria-valuemin')) { - this.valueMin = parseInt(this.domNode.getAttribute('aria-valuemin')); - } - if (this.domNode.getAttribute('aria-valuemax')) { - this.valueMax = parseInt(this.domNode.getAttribute('aria-valuemax')); - } - if (this.domNode.getAttribute('aria-valuenow')) { - this.valueNow = parseInt(this.domNode.getAttribute('aria-valuenow')); - } - - this.railWidth = parseInt(this.railDomNode.style.width.slice(0, -2)); - - if (this.domNode.tabIndex != 0) { - this.domNode.tabIndex = 0; - } - - this.domNode.style.width = this.thumbWidth + 'px'; - this.domNode.style.height = this.thumbHeight + 'px'; - this.domNode.style.top = this.thumbHeight / -2 + 'px'; - - var pos = 0; - var diff = this.railWidth / (this.valueNodes.length - 1); - for (var i = 0; this.valueNodes[i]; i++) { - this.valueNodes[i].style.left = - pos - this.valueNodes[i].offsetWidth / 2 + 'px'; - pos = pos + diff; - } - - this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); - // add onmousedown, move, and onmouseup - 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.railDomNode.addEventListener('click', this.handleClick.bind(this)); - - this.moveTSliderTo(this.valueNow); -}; - -TSlider.prototype.moveTSliderTo = function (value) { - if (value > this.valueMax) { - value = this.valueMax; - } - - if (value < this.valueMin) { - value = this.valueMin; - } - - this.valueNow = value; - - this.domNode.setAttribute('aria-valuenow', this.valueNow); - this.domNode.setAttribute('aria-valuetext', this.values[this.valueNow]); - - var pos = - Math.round( - (this.valueNow * this.railWidth) / (this.valueMax - this.valueMin) - ) - - this.thumbWidth / 2; - - this.domNode.style.left = pos + 'px'; -}; - -TSlider.prototype.handleKeyDown = function (event) { - var flag = false; - - switch (event.keyCode) { - case this.keyCode.left: - case this.keyCode.down: - this.moveTSliderTo(this.valueNow - 1); - flag = true; - break; - - case this.keyCode.right: - case this.keyCode.up: - this.moveTSliderTo(this.valueNow + 1); - flag = true; - break; - - case this.keyCode.home: - this.moveTSliderTo(this.valueMin); - flag = true; - break; - - case this.keyCode.end: - this.moveTSliderTo(this.valueMax); - flag = true; - break; - - default: - break; - } - if (flag) { - event.preventDefault(); - event.stopPropagation(); - } -}; - -TSlider.prototype.handleFocus = function () { - this.domNode.classList.add('focus'); - this.railDomNode.classList.add('focus'); -}; - -TSlider.prototype.handleBlur = function () { - this.domNode.classList.remove('focus'); - this.railDomNode.classList.remove('focus'); -}; - -TSlider.prototype.handleMouseDown = function (event) { - var self = this; - - var handleMouseMove = function (event) { - var diffX = event.pageX - self.railDomNode.offsetLeft; - self.valueNow = parseInt( - ((self.valueMax - self.valueMin) * diffX) / self.railWidth - ); - self.moveTSliderTo(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 -TSlider.prototype.handleClick = function (event) { - var diffX = event.pageX - this.railDomNode.offsetLeft; - this.valueNow = parseInt( - ((this.valueMax - this.valueMin) * diffX) / this.railWidth - ); - this.moveTSliderTo(this.valueNow); - - event.preventDefault(); - event.stopPropagation(); -}; - -// Initialize TSliders on the page -window.addEventListener('load', function () { - var sliders = document.querySelectorAll( - '.aria-widget-text-slider [role=slider]' - ); - - for (var i = 0; i < sliders.length; i++) { - var s = new TSlider(sliders[i]); - s.init(); - } -}); diff --git a/examples/slider/js/vertical-slider.js b/examples/slider/js/vertical-slider.js deleted file mode 100644 index fedd86a763..0000000000 --- a/examples/slider/js/vertical-slider.js +++ /dev/null @@ -1,221 +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: vertical-slider.js - * - * Desc: Vertical slider widget that implements ARIA Authoring Practices - */ - -'use strict'; - -// Create Vertical Slider that contains value, valuemin, valuemax, and valuenow -var VSlider = function (domNode) { - this.domNode = domNode; - this.railDomNode = domNode.parentNode; - - this.valueDomNode = false; - - this.valueMin = 0; - this.valueMax = 100; - this.valueNow = 50; - - this.railHeight = 0; - - this.thumbWidth = 28; - this.thumbHeight = 8; - - this.keyCode = Object.freeze({ - left: 37, - up: 38, - right: 39, - down: 40, - pageUp: 33, - pageDown: 34, - end: 35, - home: 36, - }); -}; - -// Initialize vertical slider -VSlider.prototype.init = function () { - this.domNode.setAttribute('aria-orientation', 'vertical'); - - if (this.domNode.getAttribute('aria-valuemin')) { - this.valueMin = parseInt(this.domNode.getAttribute('aria-valuemin')); - } - if (this.domNode.getAttribute('aria-valuemax')) { - this.valueMax = parseInt(this.domNode.getAttribute('aria-valuemax')); - } - if (this.domNode.getAttribute('aria-valuenow')) { - this.valueNow = parseInt(this.domNode.getAttribute('aria-valuenow')); - } - - this.railHeight = parseInt(this.railDomNode.style.height.slice(0, -2)); - - this.valueDomNode = this.railDomNode.previousElementSibling; - - if (this.valueDomNode) { - this.valueDomNode.style.position = 'relative'; - } - - if (this.domNode.tabIndex != 0) { - this.domNode.tabIndex = 0; - } - - this.domNode.style.width = this.thumbWidth + 'px'; - this.domNode.style.height = this.thumbHeight + 'px'; - this.domNode.style.left = this.thumbWidth / -2 + 'px'; - - this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this)); - // add onmousedown, move, and onmouseup - 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.railDomNode.addEventListener('click', this.handleClick.bind(this)); - - this.moveVSliderTo(this.valueNow); -}; - -VSlider.prototype.moveVSliderTo = function (value) { - if (value > this.valueMax) { - value = this.valueMax; - } - - if (value < this.valueMin) { - value = this.valueMin; - } - - this.valueNow = value; - - this.domNode.setAttribute('aria-valuenow', this.valueNow); - this.domNode.setAttribute('aria-valuetext', this.valueNow + ' degrees'); - - var pos = - Math.round( - ((this.valueMax - this.valueNow) * this.railHeight) / - (this.valueMax - this.valueMin) - ) - - this.thumbHeight / 2; - - this.domNode.style.top = pos + 'px'; - - if (this.valueDomNode) { - this.valueDomNode.innerHTML = this.valueNow.toString(); - this.valueDomNode.style.left = this.railDomNode.offsetWidth / 2 - 2 + 'px'; - } -}; - -VSlider.prototype.handleKeyDown = function (event) { - var flag = false; - - switch (event.keyCode) { - case this.keyCode.left: - case this.keyCode.down: - this.moveVSliderTo(this.valueNow - 1); - flag = true; - break; - - case this.keyCode.right: - case this.keyCode.up: - this.moveVSliderTo(this.valueNow + 1); - flag = true; - break; - - case this.keyCode.pageDown: - this.moveVSliderTo(this.valueNow - 10); - flag = true; - break; - - case this.keyCode.pageUp: - this.moveVSliderTo(this.valueNow + 10); - flag = true; - break; - - case this.keyCode.home: - this.moveVSliderTo(this.valueMin); - flag = true; - break; - - case this.keyCode.end: - this.moveVSliderTo(this.valueMax); - flag = true; - break; - - default: - break; - } - - if (flag) { - event.preventDefault(); - event.stopPropagation(); - } -}; - -VSlider.prototype.handleFocus = function () { - this.domNode.classList.add('focus'); - this.railDomNode.classList.add('focus'); -}; - -VSlider.prototype.handleBlur = function () { - this.domNode.classList.remove('focus'); - this.railDomNode.classList.remove('focus'); -}; - -VSlider.prototype.handleMouseDown = function (event) { - var self = this; - - var handleMouseMove = function (event) { - var diffY = event.pageY - self.railDomNode.offsetTop; - self.valueNow = - self.valueMax - - parseInt(((self.valueMax - self.valueMin) * diffY) / self.railHeight); - self.moveVSliderTo(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 -VSlider.prototype.handleClick = function (event) { - var diffY = event.pageY - this.railDomNode.offsetTop; - this.valueNow = - this.valueMax - - parseInt(((this.valueMax - this.valueMin) * diffY) / this.railHeight); - this.moveVSliderTo(this.valueNow); - - event.preventDefault(); - event.stopPropagation(); -}; - -// Initialize VSliders on the page -window.addEventListener('load', function () { - var sliders = document.querySelectorAll( - '.aria-widget-vertical-slider [role=slider]' - ); - - for (var i = 0; i < sliders.length; i++) { - var s = new VSlider(sliders[i]); - s.init(); - } -}); diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index a40edc524d..0ba18c5fc1 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -36,12 +36,10 @@

    Horizontal Multi-Thumb Slider Example

    Similar examples include:

    diff --git a/examples/slider/slider-2.html b/examples/slider/slider-2.html deleted file mode 100644 index 6785ddd487..0000000000 --- a/examples/slider/slider-2.html +++ /dev/null @@ -1,286 +0,0 @@ - - - - - Slider Examples with aria-orientation and aria-valuetext | WAI-ARIA Authoring Practices 1.2 - - - - - - - - - - - - - - - -
    -

    Slider Examples with aria-orientation and aria-valuetext

    -

    - The following example of a hypothetical online thermostat demonstrates the - slider design pattern. - The desired temperature is set with the first slider, which is vertically oriented. - Two horizontal sliders set fan speed and mode. - The horizontal sliders illustrate how to use aria-valuetext to provide assistive technologies with meaningful names for numeric values. -

    -

    Similar examples include:

    - - -
    -
    -

    Example

    -
    - -
    -
    -
    Temperature
    -
    0
    -
    -
    -
    -
    -
    -
    Fan
    -
    -
    -
    Off
    -
    Low
    -
    High
    -
    Auto
    -
    -
    -
    -
    Heat/Cool
    -
    -
    -
    Off
    -
    Heat
    -
    Cool
    -
    -
    -
    - -
    - -
    -

    Keyboard Support

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    KeyFunction
    - Right Arrow - Increases slider value one step.
    - Up Arrow - Increases slider value one step.
    - Left Arrow - Decreases slider value one step.
    - Down Arrow - Decreases slider value one step.
    - Page Up - Increases temperature slider value multiple steps. In this slider, jumps ten steps.
    - Page Down - Decreases temperature slider value multiple steps. In this slider, jumps ten steps.
    - Home - Sets slider to its minimum value.
    - End - Sets slider to its maximum value.
    -
    - -
    -

    Role, Property, State, and Tabindex Attributes

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    RoleAttributeElementUsage
    - slider - - div - -
      -
    • Identifies the element as a slider.
      • -
    • Set on the div that represents as the movable thumb because it is the operable element that represents the slider value.
      • -
    -
    - tabindex=0 - - div - Includes the slider thumb in the page tab sequence.
    - aria-orientation - - div - -
      -
    • Indicates the orientation of the slider element.
      • -
    • Set to vertical for the temperature slider.
      • -
    • Set to horizontal for the fan and heat/cool controls.
      • -
    -
    - aria-valuemax=NUMBER - - div - Specifies a numeric value that is the maximum value the slider can have.
    - aria-valuemin=NUMBER - - div - Specifies a numeric value that is the minimum value the slider can have.
    - aria-valuenow=NUMBER - - div - A numeric value that is the current value of the slider.
    - aria-valuetext=STRING - - div - -
      -
    • A string value that provides a user-friendly name for the current value of the slider.
      • -
    • For the temperature slider, is the value of the slider appended with the text degrees.
      • -
    • For fan and heat/cool, is the text representation of the current state, e.g., Off or Heat.
      • -
    -
    - aria-labelledby=IDREF - - div - Refers to the element containing the name of the slider.
    -
    - -
    -

    Javascript and CSS Source Code

    - -
    - -
    -

    HTML Source Code

    - -
    - - -
    -
    - - - diff --git a/examples/slider/slider-color-viewer.html b/examples/slider/slider-color-viewer.html index dac18635a9..1f981fa99c 100644 --- a/examples/slider/slider-color-viewer.html +++ b/examples/slider/slider-color-viewer.html @@ -44,8 +44,7 @@

    Color Viewer Slider Example

    Similar examples include:

    diff --git a/examples/slider/slider-valuetext.html b/examples/slider/slider-valuetext.html new file mode 100644 index 0000000000..86bd278a71 --- /dev/null +++ b/examples/slider/slider-valuetext.html @@ -0,0 +1,366 @@ + + + + + + + Slider Examples with aria-orientation and aria-valuetext | WAI-ARIA Authoring Practices 1.2 + + + + + + + + + + + + + +
    +

    Slider Examples with aria-orientation and aria-valuetext

    +
    +

    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 following examples are a temperature selector and seek control for a media player using the + slider design pattern. + The sliders illustrate how to use aria-valuetext to provide assistive technologies with meaningful names for numeric values. + The first slider is vertically oriented for setting a temperature with fixed point values and the aria-valuetext includes the Celsius temperature unit. + The second slider represents a slider to move or identify the current playing position in a audio or video media player and converts the seconds value in to minutes and seconds for aria-valuetext. +

    +

    Similar examples include:

    + + +
    +
    +

    Example

    +
    + +
    +
    +

    Sliders using aria-valuetext

    +
    +
    Temperature
    + + + 25°C + + + 25°C + + + + +
    + +
    +
    Media Seek
    + + + + 1:30 + + + + + + 0:00 + + + 1:00 + + + 2:00 + + + 3:00 + + + 4:00 + + + 5:00 + + +
    + +
    +
    + +
    + +
    +

    Accessibility Features

    +
      +
    • + For people with visual impairments the current value of the slider is visible next to the thumb when it has focus or is being dragged. +
      • +
    • + 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 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 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. +
      • +
    +
    + +
    +

    Keyboard Support

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    + Right Arrow + Increases slider value one step.
    + Up Arrow + Increases slider value one step.
    + Left Arrow + Decreases slider value one step.
    + Down Arrow + Decreases slider value one step.
    + Page Up + Increases temperature slider value multiple steps. In this slider, jumps twenty steps (e.g. 2°C).
    + Page Down + Decreases temperature slider value multiple steps. In this slider, jumps twenty steps (e.g. 2°C).
    + Home + Sets slider to its minimum value.
    + End + Sets slider to its maximum value.
    + +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    + 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 + + g + +
      +
    • Identifies the element as a slider.
      • +
    • Set on the g element that represents as the movable thumb because it is the operable element that represents the slider value.
      • +
    +
    + tabindex=0 + + g + Includes the slider thumb in the page tab sequence.
    + aria-orientation + + g + +
      +
    • Indicates the orientation of the slider element.
      • +
    • Set to vertical for the temperature slider.
      • +
    • Set to horizontal for the media seek slider.
      • +
    +
    + aria-valuemax=NUMBER + + g + Specifies a numeric value that is the maximum value the slider can have.
    + aria-valuemin=NUMBER + + g + Specifies a numeric value that is the minimum value the slider can have.
    + aria-valuenow=NUMBER + + g + A numeric value that is the current value of the slider.
    + aria-valuetext=STRING + + g + +
      +
    • A string value that provides a user-friendly name for the current value of the slider.
      • +
    • For the temperature slider, is the value of the slider appended with the text degrees.
      • +
    • For media seek slider, is the text representation of the minutes and seconds.
      • +
    +
    + aria-labelledby=IDREF + + g + Refers to the element containing the name (e.g. label) of the slider.
    + aria-hidden=true + + rect + Removes the SVG rect element from the accessibility tree, since some screen readers will describe it as an image separate from the slider.
    +
    + +
    +

    Javascript and CSS Source Code

    + +
    + +
    +

    HTML Source Code

    + +
    + + +
    +
    + + + diff --git a/test/tests/slider_slider-2.js b/test/tests/slider_slider-2.js deleted file mode 100644 index 498d66e3da..0000000000 --- a/test/tests/slider_slider-2.js +++ /dev/null @@ -1,795 +0,0 @@ -const { ariaTest } = require('..'); -const { By, Key } = require('selenium-webdriver'); -const assertAttributeValues = require('../util/assertAttributeValues'); -const assertAriaLabelledby = require('../util/assertAriaLabelledby'); -const assertAriaRoles = require('../util/assertAriaRoles'); - -const exampleFile = 'slider/slider-2.html'; - -const ex = { - sliderSelector: '#ex1 [role="slider"]', - tempSelector: '#ex1 #idTempThumb[role="slider"]', - fanSelector: '#ex1 #idFanThumb[role="slider"]', - heatSelector: '#ex1 #idHeatThumb[role="slider"]', - pageTempSelector: '#idTempValue', - tempMax: '100', - tempMin: '50', - tempDefault: '68', - tempPageInc: '10', - fanMax: '3', - fanMin: '0', - heatMax: '2', - heatMin: '0', - fanValues: ['Off', 'Low', 'High', 'Auto'], - heatValues: ['Off', 'Heat', 'Cool'], -}; - -const sendAllSlidersToEnd = async function (t) { - const sliders = await t.context.queryElements(t, ex.sliderSelector); - - for (let slider of sliders) { - await slider.sendKeys(Key.END); - } -}; - -const getValueAndText = async function (t, selector) { - const slider = await t.context.session.findElement(By.css(selector)); - const value = await slider.getAttribute('aria-valuenow'); - const text = await slider.getAttribute('aria-valuetext'); - return [value, text]; -}; - -// Attributes - -ariaTest( - 'role="slider" on div element', - exampleFile, - 'slider-role', - async (t) => { - await assertAriaRoles(t, 'ex1', 'slider', '3', 'div'); - } -); - -ariaTest( - '"tabindex" set to "0" on sliders', - exampleFile, - 'tabindex', - async (t) => { - await assertAttributeValues(t, ex.sliderSelector, 'tabindex', '0'); - } -); - -ariaTest( - '"aria-orientation" set on sliders', - exampleFile, - 'aria-orientation', - async (t) => { - await assertAttributeValues( - t, - ex.tempSelector, - 'aria-orientation', - 'vertical' - ); - await assertAttributeValues( - t, - ex.fanSelector, - 'aria-orientation', - 'horizontal' - ); - await assertAttributeValues( - t, - ex.heatSelector, - 'aria-orientation', - 'horizontal' - ); - } -); - -ariaTest( - '"aria-valuemax" set on sliders', - exampleFile, - 'aria-valuemax', - async (t) => { - await assertAttributeValues( - t, - ex.tempSelector, - 'aria-valuemax', - ex.tempMax - ); - await assertAttributeValues(t, ex.fanSelector, 'aria-valuemax', ex.fanMax); - await assertAttributeValues( - t, - ex.heatSelector, - 'aria-valuemax', - ex.heatMax - ); - } -); - -ariaTest( - '"aria-valuemin" set on sliders', - exampleFile, - 'aria-valuemin', - async (t) => { - await assertAttributeValues( - t, - ex.tempSelector, - 'aria-valuemin', - ex.tempMin - ); - await assertAttributeValues(t, ex.fanSelector, 'aria-valuemin', ex.fanMin); - await assertAttributeValues( - t, - ex.heatSelector, - 'aria-valuemin', - ex.heatMin - ); - } -); - -ariaTest( - '"aria-valuenow" reflects slider value', - exampleFile, - 'aria-valuenow', - async (t) => { - await assertAttributeValues( - t, - ex.tempSelector, - 'aria-valuenow', - ex.tempDefault - ); - await assertAttributeValues(t, ex.fanSelector, 'aria-valuenow', '0'); - await assertAttributeValues(t, ex.heatSelector, 'aria-valuenow', '0'); - } -); - -ariaTest( - '"aria-valuetext" reflects slider value', - exampleFile, - 'aria-valuetext', - async (t) => { - await assertAttributeValues( - t, - ex.fanSelector, - 'aria-valuetext', - ex.fanValues[0] - ); - await assertAttributeValues( - t, - ex.heatSelector, - 'aria-valuetext', - ex.heatValues[0] - ); - } -); - -ariaTest( - '"aria-labelledby" set on sliders', - exampleFile, - 'aria-labelledby', - async (t) => { - await assertAriaLabelledby(t, ex.sliderSelector); - } -); - -// Keys - -ariaTest( - 'Right arrow increases slider value by 1', - exampleFile, - 'key-right-arrow', - async (t) => { - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.ARROW_RIGHT); - - let sliderVal = parseInt(ex.tempDefault) + 1; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - sliderVal.toString(), - 'After sending 1 arrow right key to the temp slider, "aria-valuenow": ' + - sliderVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - sliderVal.toString(), - 'Temp display should match value of slider: ' + sliderVal - ); - - // Send 51 more keys to temp slider - for (let i = 0; i < 51; i++) { - await tempSlider.sendKeys(Key.ARROW_RIGHT); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMax, - 'After sending 52 arrow right key, the value of the temp slider should be: ' + - ex.tempMax - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMax, - 'Temp display should match value of slider: ' + ex.tempMax - ); - - // Send 1 key to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.ARROW_RIGHT); - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - ['1', ex.fanValues[1]], - 'After sending 1 arrow right key to the fan slider, aria-valuenow should be "1" and aria-value-text should be: ' + - ex.fanValues[1] - ); - - // Send more than 5 keys to fan slider - for (let i = 0; i < 5; i++) { - await fanSlider.sendKeys(Key.ARROW_RIGHT); - } - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [ex.fanMax, ex.fanValues[parseInt(ex.fanMax)]], - 'After sending 5 arrow right key to the fan slider, aria-valuenow should be "' + - ex.fanMax + - '" and aria-value-text should be: ' + - ex.fanValues[parseInt(ex.fanMax)] - ); - - // Send 1 key to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.ARROW_RIGHT); - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - ['1', ex.heatValues[1]], - 'After sending 1 arrow right key to the heat slider, aria-valuenow should be "1" and aria-value-text should be: ' + - ex.heatValues[1] - ); - - // Send more than 5 keys to heat slider - for (let i = 0; i < 5; i++) { - await heatSlider.sendKeys(Key.ARROW_RIGHT); - } - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [ex.heatMax, ex.heatValues[parseInt(ex.heatMax)]], - 'After sending 5 arrow right key to the heat slider, aria-valuenow should be "' + - ex.heatMax + - '" and aria-value-text should be: ' + - ex.heatValues[parseInt(ex.heatMax)] - ); - } -); - -ariaTest( - 'up arrow increases slider value by 1', - exampleFile, - 'key-up-arrow', - async (t) => { - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.ARROW_UP); - - let sliderVal = parseInt(ex.tempDefault) + 1; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - sliderVal.toString(), - 'After sending 1 arrow up key to the temp slider, "aria-valuenow": ' + - sliderVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - sliderVal.toString(), - 'Temp display should match value of slider: ' + sliderVal - ); - - // Send 51 more keys to temp slider - for (let i = 0; i < 51; i++) { - await tempSlider.sendKeys(Key.ARROW_UP); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMax, - 'After sending 52 arrow up key, the value of the temp slider should be: ' + - ex.tempMax - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMax, - 'Temp display should match value of slider: ' + ex.tempMax - ); - - // Send 1 key to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.ARROW_UP); - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - ['1', ex.fanValues[1]], - 'After sending 1 arrow up key to the fan slider, aria-valuenow should be "1" and aria-value-text should be: ' + - ex.fanValues[1] - ); - - // Send more than 5 keys to fan slider - for (let i = 0; i < 5; i++) { - await fanSlider.sendKeys(Key.ARROW_UP); - } - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [ex.fanMax, ex.fanValues[parseInt(ex.fanMax)]], - 'After sending 6 arrow up key to the fan slider, aria-valuenow should be "' + - ex.fanMax + - '" and aria-value-text should be: ' + - ex.fanValues[parseInt(ex.fanMax)] - ); - - // Send 1 key to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.ARROW_UP); - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - ['1', ex.heatValues[1]], - 'After sending 1 arrow up key to the heat slider, aria-valuenow should be "1" and aria-value-text should be: ' + - ex.heatValues[1] - ); - - // Send more than 5 keys to heat slider - for (let i = 0; i < 5; i++) { - await heatSlider.sendKeys(Key.ARROW_UP); - } - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [ex.heatMax, ex.heatValues[parseInt(ex.heatMax)]], - 'After sending 6 arrow up key to the heat slider, aria-valuenow should be "' + - ex.heatMax + - '" and aria-value-text should be: ' + - ex.heatValues[parseInt(ex.heatMax)] - ); - } -); - -ariaTest( - 'page up increases slider value by 10', - exampleFile, - 'key-page-up', - async (t) => { - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.PAGE_UP); - - let sliderVal = parseInt(ex.tempDefault) + 10; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - sliderVal.toString(), - 'After sending 1 page up key to the temp slider, the value of the temp slider should be: ' + - sliderVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - sliderVal.toString(), - 'Temp display should match value of slider: ' + sliderVal - ); - - // Send more than 5 keys to temp slider - for (let i = 0; i < 5; i++) { - await tempSlider.sendKeys(Key.PAGE_UP); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMax, - 'After sending 5 page up key, the value of the temp slider should be: ' + - ex.tempMax - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMax, - 'Temp display should match value of slider: ' + ex.tempMax - ); - } -); - -ariaTest( - 'key end set slider at max value', - exampleFile, - 'key-end', - async (t) => { - // Send key end to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.END); - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMax, - 'After sending key END, the value of the temp slider should be: ' + - ex.tempMax - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMax, - 'Temp display should match value of slider: ' + ex.tempMax - ); - - // Send key end to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.END); - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [ex.fanMax, ex.fanValues[parseInt(ex.fanMax)]], - 'After sending key end to the heat slider, aria-valuenow should be "' + - ex.fanMax + - '" and aria-value-text should be: ' + - ex.fanValues[parseInt(ex.fanMax)] - ); - - // Send key end to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.END); - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [ex.heatMax, ex.heatValues[parseInt(ex.heatMax)]], - 'After sending key end to the heat slider, aria-valuenow should be "' + - ex.heatMax + - '" and aria-value-text should be: ' + - ex.heatValues[parseInt(ex.heatMax)] - ); - } -); - -ariaTest( - 'left arrow decreases slider value by 1', - exampleFile, - 'key-left-arrow', - async (t) => { - await sendAllSlidersToEnd(t); - - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.ARROW_LEFT); - - let tempVal = parseInt(ex.tempMax) - 1; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - tempVal.toString(), - 'After sending 1 arrow left key, the value of the temp slider should be: ' + - tempVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - tempVal.toString(), - 'Temp display should match value of slider: ' + tempVal - ); - - // Send 51 more keys to temp slider - for (let i = 0; i < 51; i++) { - await tempSlider.sendKeys(Key.ARROW_LEFT); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMin.toString(), - 'After sending 53 arrow left key to the temp slider, "aria-valuenow": ' + - ex.tempMin - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMin.toString(), - 'Temp display should match value of slider: ' + ex.tempMin - ); - - // Send 1 key to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.ARROW_LEFT); - - let fanVal = parseInt(ex.fanMax) - 1; - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [fanVal.toString(), ex.fanValues[fanVal]], - 'After sending 1 arrow left key to the fan slider, aria-valuenow should be "' + - fanVal + - '" and aria-value-text should be: ' + - ex.fanValues[fanVal] - ); - - // Send more than 5 keys to fan slider - for (let i = 0; i < 5; i++) { - await fanSlider.sendKeys(Key.ARROW_LEFT); - } - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - ['0', ex.fanValues[0]], - 'After sending 6 arrow left key to the fan slider, aria-valuenow should be "0" and aria-value-text should be: ' + - ex.fanValues[0] - ); - - // Send 1 key to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.ARROW_LEFT); - - let heatVal = parseInt(ex.heatMax) - 1; - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [heatVal.toString(), ex.heatValues[heatVal]], - 'After sending 1 arrow left key to the heat slider, aria-valuenow should be "' + - heatVal + - '" and aria-value-text should be: ' + - ex.heatValues[heatVal] - ); - - // Send more than 5 keys to heat slider - for (let i = 0; i < 5; i++) { - await heatSlider.sendKeys(Key.ARROW_LEFT); - } - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - ['0', ex.heatValues[0]], - 'After sending 6 arrow left key to the heat slider, aria-valuenow should be "0" and aria-value-text should be: ' + - ex.heatValues[0] - ); - } -); - -ariaTest( - 'down arrow decreases slider value by 1', - exampleFile, - 'key-down-arrow', - async (t) => { - await sendAllSlidersToEnd(t); - - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.ARROW_DOWN); - - let tempVal = parseInt(ex.tempMax) - 1; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - tempVal.toString(), - 'After sending 1 arrow down key, the value of the temp slider should be: ' + - tempVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - tempVal.toString(), - 'Temp display should match value of slider: ' + tempVal - ); - - // Send 51 more keys to temp slider - for (let i = 0; i < 51; i++) { - await tempSlider.sendKeys(Key.ARROW_DOWN); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMin.toString(), - 'After sending 53 arrow down key to the temp slider, "aria-valuenow": ' + - ex.tempMin - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMin.toString(), - 'Temp display should match value of slider: ' + ex.tempMin - ); - - // Send 1 key to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.ARROW_DOWN); - - let fanVal = parseInt(ex.fanMax) - 1; - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [fanVal.toString(), ex.fanValues[fanVal]], - 'After sending 1 arrow down key to the fan slider, aria-valuenow should be "' + - fanVal + - '" and aria-value-text should be: ' + - ex.fanValues[fanVal] - ); - - // Send more than 5 keys to fan slider - for (let i = 0; i < 5; i++) { - await fanSlider.sendKeys(Key.ARROW_DOWN); - } - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - ['0', ex.fanValues[0]], - 'After sending 6 arrow down key to the fan slider, aria-valuenow should be "0" and aria-value-text should be: ' + - ex.fanValues[0] - ); - - // Send 1 key to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.ARROW_DOWN); - - let heatVal = parseInt(ex.heatMax) - 1; - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [heatVal.toString(), ex.heatValues[heatVal]], - 'After sending 1 arrow down key to the heat slider, aria-valuenow should be "' + - heatVal + - '" and aria-value-text should be: ' + - ex.heatValues[heatVal] - ); - - // Send more than 5 keys to heat slider - for (let i = 0; i < 5; i++) { - await heatSlider.sendKeys(Key.ARROW_DOWN); - } - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - ['0', ex.heatValues[0]], - 'After sending 6 arrow down key to the heat slider, aria-valuenow should be "0" and aria-value-text should be: ' + - ex.heatValues[0] - ); - } -); - -ariaTest( - 'page down decreases slider value by 10', - exampleFile, - 'key-page-down', - async (t) => { - // Send 1 key to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.PAGE_DOWN); - - let sliderVal = parseInt(ex.tempDefault) - 10; - t.is( - await tempSlider.getAttribute('aria-valuenow'), - sliderVal.toString(), - 'After sending 1 page down key to the temp slider, the value of the temp slider should be: ' + - sliderVal - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - sliderVal.toString(), - 'Temp display should match value of slider: ' + sliderVal - ); - - // Send more than 5 keys to temp slider - for (let i = 0; i < 5; i++) { - await tempSlider.sendKeys(Key.PAGE_DOWN); - } - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMin, - 'After sending 5 page down key, the value of the temp slider should be: ' + - ex.tempMin - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMin, - 'Temp display should match value of slider: ' + ex.tempMin - ); - } -); - -ariaTest( - 'home set slider value to minimum', - exampleFile, - 'key-home', - async (t) => { - // Send key home to temp slider - const tempSlider = await t.context.session.findElement( - By.css(ex.tempSelector) - ); - await tempSlider.sendKeys(Key.HOME); - - t.is( - await tempSlider.getAttribute('aria-valuenow'), - ex.tempMin, - 'After sending key HOME, the value of the temp slider should be: ' + - ex.tempMin - ); - t.is( - await t.context.session - .findElement(By.css(ex.pageTempSelector)) - .getText(), - ex.tempMin, - 'Temp display should match value of slider: ' + ex.tempMin - ); - - // Send key home to fan slider - const fanSlider = await t.context.session.findElement( - By.css(ex.fanSelector) - ); - await fanSlider.sendKeys(Key.HOME); - - t.deepEqual( - await getValueAndText(t, ex.fanSelector), - [ex.fanMin, ex.fanValues[parseInt(ex.fanMin)]], - 'After sending key home to the heat slider, aria-valuenow should be "' + - ex.fanMin + - '" and aria-value-text should be: ' + - ex.fanValues[parseInt(ex.fanMin)] - ); - - // Send key home to heat slider - const heatSlider = await t.context.session.findElement( - By.css(ex.heatSelector) - ); - await heatSlider.sendKeys(Key.HOME); - - t.deepEqual( - await getValueAndText(t, ex.heatSelector), - [ex.heatMin, ex.heatValues[parseInt(ex.heatMin)]], - 'After sending key home to the heat slider, aria-valuenow should be "' + - ex.heatMin + - '" and aria-value-text should be: ' + - ex.heatValues[parseInt(ex.heatMin)] - ); - } -); diff --git a/test/tests/slider_slider-valuetext.js b/test/tests/slider_slider-valuetext.js new file mode 100644 index 0000000000..c4f9d7b389 --- /dev/null +++ b/test/tests/slider_slider-valuetext.js @@ -0,0 +1,794 @@ +const { ariaTest } = require('..'); +const { By, Key } = require('selenium-webdriver'); +const assertAttributeValues = require('../util/assertAttributeValues'); +const assertAriaLabelledby = require('../util/assertAriaLabelledby'); +const assertAriaRoles = require('../util/assertAriaRoles'); + +const exampleFile = 'slider/slider-valuetext.html'; + +const ex = { + railRects: '#ex1 rect.rail', + labelG: '#ex1 g.value-label', + sliderSelector: '#ex1 [role="slider"]', + tempSelector: '#id-temp-slider', + tempValueSelector: '#id-temp-slider .value', + tempMax: '38.0', + tempMin: '10.0', + tempDefault: '25.0', + tempInc: '.1', + tempPageInc: '2.0', + tempSuffix: '°C', + + seekSelector: '#id-seek', + seekValueSelector: '#id-seek-slider .value', + seekMax: '300', + seekMin: '0', + seekDefault: '90', + seekDefaultValue: '1 Minute 30 Seconds', + seekInc: 1, + seekPageInc: 10, +}; + +const sendAllSlidersToEnd = async function (t) { + const sliders = await t.context.queryElements(t, ex.sliderSelector); + + for (let slider of sliders) { + await slider.sendKeys(Key.END); + } +}; + +const getValueAndText = async function (t, selector) { + const slider = await t.context.session.findElement(By.css(selector)); + const value = await slider.getAttribute('aria-valuenow'); + const text = await slider.getAttribute('aria-valuetext'); + return [value, text]; +}; + +const getSeekValueAndText = function (v, change) { + let minutesLabel = ' Minutes '; + let secondsLabel = ' Seconds'; + v = parseInt(v) + change; + if (v > parseInt(ex.seekMax)) { + v = parseInt(ex.seekMax); + } + if (v < parseInt(ex.seekMin)) { + v = parseInt(ex.seekMin); + } + const value = v.toString(); + + let minutes = parseInt(v / 60); + if (minutes === 1) { + minutesLabel = ' Minute '; + } + + let seconds = v % 60; + if (seconds === 1) { + secondsLabel = ' Second'; + } + if (seconds < 10) { + seconds = '0' + seconds; + } + + const text = minutes + minutesLabel + seconds + secondsLabel; + return [value, text]; +}; + +// Attributes + +ariaTest('role="none" on SVG element', exampleFile, 'svg-none', async (t) => { + await assertAriaRoles(t, 'ex1', 'none', '2', 'svg'); +}); + +ariaTest( + 'SVG rects used for the rail have aria-hidden', + exampleFile, + 'aria-hidden-rect', + async (t) => { + await assertAttributeValues(t, ex.railRects, 'aria-hidden', 'true'); + } +); + +ariaTest( + 'role="slider" on SVG g element', + exampleFile, + 'slider-role', + async (t) => { + await assertAriaRoles(t, 'ex1', 'slider', '2', 'g'); + } +); + +ariaTest( + '"tabindex" set to "0" on sliders', + exampleFile, + 'slider-tabindex', + async (t) => { + await assertAttributeValues(t, ex.sliderSelector, 'tabindex', '0'); + } +); + +ariaTest( + '"aria-orientation" set on sliders', + exampleFile, + 'aria-orientation', + async (t) => { + await assertAttributeValues( + t, + ex.tempSelector, + 'aria-orientation', + 'vertical' + ); + await assertAttributeValues( + t, + ex.seekSelector, + 'aria-orientation', + 'horizontal' + ); + } +); + +ariaTest( + '"aria-valuemax" set on sliders', + exampleFile, + 'aria-valuemax', + async (t) => { + await assertAttributeValues( + t, + ex.tempSelector, + 'aria-valuemax', + ex.tempMax + ); + await assertAttributeValues( + t, + ex.seekSelector, + 'aria-valuemax', + ex.seekMax + ); + } +); + +ariaTest( + '"aria-valuemin" set on sliders', + exampleFile, + 'aria-valuemin', + async (t) => { + await assertAttributeValues( + t, + ex.tempSelector, + 'aria-valuemin', + ex.tempMin + ); + await assertAttributeValues( + t, + ex.seekSelector, + 'aria-valuemin', + ex.seekMin + ); + } +); + +ariaTest( + '"aria-valuenow" reflects slider value', + exampleFile, + 'aria-valuenow', + async (t) => { + await assertAttributeValues( + t, + ex.tempSelector, + 'aria-valuenow', + ex.tempDefault + ); + await assertAttributeValues( + t, + ex.seekSelector, + 'aria-valuenow', + ex.seekDefault + ); + } +); + +ariaTest( + '"aria-valuetext" reflects slider value', + exampleFile, + 'aria-valuetext', + async (t) => { + await assertAttributeValues( + t, + ex.seekSelector, + 'aria-valuetext', + ex.seekDefaultValue + ); + } +); + +ariaTest( + '"aria-labelledby" set on sliders', + exampleFile, + 'aria-labelledby', + async (t) => { + await assertAriaLabelledby(t, ex.sliderSelector); + } +); + +// Keys + +ariaTest( + 'Right arrow increases slider value by 1', + exampleFile, + 'key-right-arrow', + async (t) => { + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.ARROW_RIGHT); + + let sliderVal = parseFloat(ex.tempDefault) + ex.tempInc; + t.is( + await tempSlider.getAttribute('aria-valuenow'), + sliderVal.toString(), + 'After sending 1 arrow right key to the temp slider, "aria-valuenow": ' + + sliderVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + sliderVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + sliderVal + ); + + // Send 200 more keys to temp slider + for (let i = 0; i < 200; i++) { + await tempSlider.sendKeys(Key.ARROW_RIGHT); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMax, + 'After sending 200 arrow right key, the value of the temp slider should be: ' + + ex.tempMax + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMax + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMax + ); + + // Send 1 key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.ARROW_RIGHT); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekDefault, 1); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 arrow right key to the seek slider, aria-valuenow should be " + value + " and aria-value-text should be: ' + + text + ); + + // Send more than 5 keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.ARROW_RIGHT); + } + + [value, text] = getSeekValueAndText(value, 5); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 5 arrow right key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'up arrow increases slider value by 1', + exampleFile, + 'key-up-arrow', + async (t) => { + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.ARROW_UP); + + let sliderVal = parseFloat(ex.tempDefault) + ex.tempInc; + t.is( + await tempSlider.getAttribute('aria-valuenow'), + sliderVal.toString(), + 'After sending 1 arrow up key to the temp slider, "aria-valuenow": ' + + sliderVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + sliderVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + sliderVal + ); + + // Send 200 more keys to temp slider + for (let i = 0; i < 200; i++) { + await tempSlider.sendKeys(Key.ARROW_UP); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMax, + 'After sending 200 arrow up key, the value of the temp slider should be: ' + + ex.tempMax + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMax + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMax + ); + + // Send 1 key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.ARROW_UP); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekDefault, ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 arrow up key to the seek slider, aria-valuenow should be ' + + value + + ' and aria-value-text should be: ' + + text + ); + + // Send more than 5 keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.ARROW_UP); + } + + [value, text] = getSeekValueAndText(value, 5 * ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 6 arrow up key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'page up increases slider value by big step', + exampleFile, + 'key-page-up', + async (t) => { + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.PAGE_UP); + + let sliderVal = ( + parseFloat(ex.tempDefault) + parseFloat(ex.tempPageInc) + ).toFixed(1); + t.is( + await tempSlider.getAttribute('aria-valuenow'), + sliderVal.toString(), + 'After sending 1 page up key to the temp slider, the value of the temp slider should be: ' + + sliderVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + sliderVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + sliderVal + ); + + // Send more than 10 keys to temp slider + for (let i = 0; i < 10; i++) { + await tempSlider.sendKeys(Key.PAGE_UP); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMax, + 'After sending 10 page up key, the value of the temp slider should be: ' + + ex.tempMax + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMax + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMax + ); + + // Send 1 Page Up key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.PAGE_UP); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekDefault, ex.seekPageInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 page up key to the seek slider, aria-valuenow should be ' + + value + + ' and aria-value-text should be: ' + + text + ); + + // Send 5 more page up keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.PAGE_UP); + } + + [value, text] = getSeekValueAndText(value, 5 * ex.seekPageInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 6 arrow page up keys to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'key end set slider at max value', + exampleFile, + 'key-end', + async (t) => { + // Send key end to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.END); + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMax, + 'After sending key END, the value of the temp slider should be: ' + + ex.tempMax + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMax + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMax + ); + + // Send key end to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.END); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekMax, 0); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending key end to the heat slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'left arrow decreases slider value by 1', + exampleFile, + 'key-left-arrow', + async (t) => { + await sendAllSlidersToEnd(t); + + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.ARROW_LEFT); + + let tempVal = (parseFloat(ex.tempMax) - parseFloat(ex.tempInc)).toFixed(1); + t.is( + await tempSlider.getAttribute('aria-valuenow'), + tempVal.toString(), + 'After sending 1 arrow left key, the value of the temp slider should be: ' + + tempVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + tempVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + tempVal + ); + + // Send 300 more keys to temp slider + for (let i = 0; i < 300; i++) { + await tempSlider.sendKeys(Key.ARROW_LEFT); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMin.toString(), + 'After sending 300 arrow left key to the temp slider, "aria-valuenow": ' + + ex.tempMin + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMin.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMin + ); + + // Send 1 key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.ARROW_LEFT); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekMax, -1 * ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 arrow left key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + + // Send more than 5 keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.ARROW_LEFT); + } + + [value, text] = getSeekValueAndText(value, -5 * ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 6 arrow left key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'down arrow decreases slider value by 1', + exampleFile, + 'key-down-arrow', + async (t) => { + await sendAllSlidersToEnd(t); + + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.ARROW_DOWN); + + let tempVal = (parseFloat(ex.tempMax) - parseFloat(ex.tempInc)).toFixed(1); + t.is( + await tempSlider.getAttribute('aria-valuenow'), + tempVal.toString(), + 'After sending 1 arrow down key, the value of the temp slider should be: ' + + tempVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + tempVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + tempVal + ); + + // Send 300 more keys to temp slider + for (let i = 0; i < 300; i++) { + await tempSlider.sendKeys(Key.ARROW_DOWN); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMin.toString(), + 'After sending 300 arrow down key to the temp slider, "aria-valuenow": ' + + ex.tempMin + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMin.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMin + ); + + // Send 1 key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.ARROW_DOWN); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekMax, -1 * ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 down arrow key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + + // Send more than 5 keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.ARROW_DOWN); + } + + [value, text] = getSeekValueAndText(value, -5 * ex.seekInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 6 page arrow key to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'page down decreases slider value by big step', + exampleFile, + 'key-page-down', + async (t) => { + // Send 1 key to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.PAGE_DOWN); + + let sliderVal = ( + parseFloat(ex.tempDefault) - parseFloat(ex.tempPageInc) + ).toFixed(1); + t.is( + await tempSlider.getAttribute('aria-valuenow'), + sliderVal.toString(), + 'After sending 1 page down key to the temp slider, the value of the temp slider should be: ' + + sliderVal + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + sliderVal.toString() + ex.tempSuffix, + 'Temp display should match value of slider: ' + sliderVal + ); + + // Send more than 20 keys to temp slider + for (let i = 0; i < 20; i++) { + await tempSlider.sendKeys(Key.PAGE_DOWN); + } + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMin, + 'After sending 20 page down key, the value of the temp slider should be: ' + + ex.tempMin + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMin + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMin + ); + + // Send 1 Page Down key to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.PAGE_DOWN); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekDefault, -1 * ex.seekPageInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 1 page down key to the seek slider, aria-valuenow should be ' + + value + + ' and aria-value-text should be: ' + + text + ); + + // Send 5 more page up keys to seek slider + for (let i = 0; i < 5; i++) { + await seekSlider.sendKeys(Key.PAGE_DOWN); + } + + [value, text] = getSeekValueAndText(value, -5 * ex.seekPageInc); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending 6 arrow page down keys to the seek slider, aria-valuenow should be "' + + value + + '" and aria-value-text should be: ' + + text + ); + } +); + +ariaTest( + 'home set slider value to minimum', + exampleFile, + 'key-home', + async (t) => { + // Send key home to temp slider + const tempSlider = await t.context.session.findElement( + By.css(ex.tempSelector) + ); + await tempSlider.sendKeys(Key.HOME); + + t.is( + await tempSlider.getAttribute('aria-valuenow'), + ex.tempMin, + 'After sending key HOME, the value of the temp slider should be: ' + + ex.tempMin + ); + t.is( + await t.context.session + .findElement(By.css(ex.tempValueSelector)) + .getText(), + ex.tempMin + ex.tempSuffix, + 'Temp display should match value of slider: ' + ex.tempMin + ); + + // Send key home to seek slider + const seekSlider = await t.context.session.findElement( + By.css(ex.seekSelector) + ); + await seekSlider.sendKeys(Key.HOME); + + let value, text; + [value, text] = getSeekValueAndText(ex.seekMin, 0); + + t.deepEqual( + await getValueAndText(t, ex.seekSelector), + [value, text], + 'After sending key home to the heat slider, aria-valuenow should be "' + + ex.seekMin + + '" and aria-value-text should be: ' + + text + ); + } +); From 3a4823f6698ada4be051ce47a16511fa800c5c50 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 13 Apr 2021 16:54:46 -0500 Subject: [PATCH 2/3] fixed vnu error message --- .vnurc | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.vnurc b/.vnurc index 460f3625dc..01d8027396 100644 --- a/.vnurc +++ b/.vnurc @@ -20,3 +20,6 @@ The “row” role is unnecessary for element “tr”. Attribute “aria-activedescendant” value should either refer to a descendant element, or should be accompanied by attribute “aria-owns”. # https://github.com/w3c/aria-practices/issues/1678 Section lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all sections. +# https://github.com/validator/validator/issues/1096 +Bad value “none” for attribute “role” on element “svg”. +Bad value “presentation” for attribute “role” on element “svg”. From e55e0193b543fb3d03c4348422f9e62a501d8f4b Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 15 Apr 2021 21:14:50 -0500 Subject: [PATCH 3/3] updated valuetext calculation --- examples/slider/js/slider-valuetext.js | 54 +++++++++++++++++++------- test/tests/slider_slider-valuetext.js | 28 ++++++++----- 2 files changed, 58 insertions(+), 24 deletions(-) diff --git a/examples/slider/js/slider-valuetext.js b/examples/slider/js/slider-valuetext.js index 6e41b6deee..c2b70eed45 100644 --- a/examples/slider/js/slider-valuetext.js +++ b/examples/slider/js/slider-valuetext.js @@ -397,10 +397,42 @@ class SliderSeek { return value <= valueMax && value >= valueMin; } + getValueMinutesSeconds(minutes, seconds) { + if (seconds < 10) { + seconds = '0' + seconds; + } + return minutes + ':' + seconds; + } + + getValueTextMinutesSeconds(minutes, seconds) { + let valuetext = ''; + let minutesLabel = 'Minutes'; + let secondsLabel = 'Seconds'; + + if (minutes === 1) { + minutesLabel = 'Minute'; + } + + if (minutes > 0) { + valuetext += minutes + ' ' + minutesLabel; + } + + if (seconds === 1) { + secondsLabel = 'Second'; + } + + if (seconds > 0) { + if (minutes > 0) { + valuetext += ' '; + } + valuetext += seconds + ' ' + secondsLabel; + } + + return valuetext; + } + moveSliderTo(value) { let valueMax, valueMin, pos, minutes, seconds, width; - let minutesLabel = ' Minutes '; - let secondsLabel = ' Seconds'; valueMin = this.getValueMin(); valueMax = this.getValueMax(); @@ -411,24 +443,16 @@ class SliderSeek { minutes = parseInt(value / 60); seconds = value % 60; - if (seconds < 10) { - seconds = '0' + seconds; - } - this.sliderValueNode.textContent = minutes + ':' + seconds; + this.sliderValueNode.textContent = this.getValueMinutesSeconds( + minutes, + seconds + ); width = this.sliderValueNode.getBoundingClientRect().width; - if (minutes === 1) { - minutesLabel = ' Minute '; - } - - if (seconds === 1) { - secondsLabel = ' Second'; - } - this.sliderNode.setAttribute( 'aria-valuetext', - minutes + minutesLabel + seconds + secondsLabel + this.getValueTextMinutesSeconds(minutes, seconds) ); pos = diff --git a/test/tests/slider_slider-valuetext.js b/test/tests/slider_slider-valuetext.js index c4f9d7b389..a8ecc11721 100644 --- a/test/tests/slider_slider-valuetext.js +++ b/test/tests/slider_slider-valuetext.js @@ -45,8 +45,10 @@ const getValueAndText = async function (t, selector) { }; const getSeekValueAndText = function (v, change) { - let minutesLabel = ' Minutes '; - let secondsLabel = ' Seconds'; + let minutesLabel = 'Minutes'; + let secondsLabel = 'Seconds'; + let valuetext = ''; + v = parseInt(v) + change; if (v > parseInt(ex.seekMax)) { v = parseInt(ex.seekMax); @@ -57,20 +59,28 @@ const getSeekValueAndText = function (v, change) { const value = v.toString(); let minutes = parseInt(v / 60); + let seconds = v % 60; + if (minutes === 1) { - minutesLabel = ' Minute '; + minutesLabel = 'Minute'; + } + + if (minutes > 0) { + valuetext += minutes + ' ' + minutesLabel; } - let seconds = v % 60; if (seconds === 1) { - secondsLabel = ' Second'; + secondsLabel = 'Second'; } - if (seconds < 10) { - seconds = '0' + seconds; + + if (seconds > 0) { + if (minutes > 0) { + valuetext += ' '; + } + valuetext += seconds + ' ' + secondsLabel; } - const text = minutes + minutesLabel + seconds + secondsLabel; - return [value, text]; + return [value, valuetext]; }; // Attributes