Radio Group Example Using Roving tabindex

diff --git a/examples/radio/radio-2/js/radioButtonActiveDescendant.js b/examples/radio/radio-2/js/radioButtonActiveDescendant.js index 7183f91fa6..c50e28c54d 100644 --- a/examples/radio/radio-2/js/radioButtonActiveDescendant.js +++ b/examples/radio/radio-2/js/radioButtonActiveDescendant.js @@ -1,17 +1,17 @@ /* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: RadioButtonActiveDescendant.js -* -* Desc: Radio widget using aria-activedescendant that implements ARIA Authoring Practices -*/ + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: RadioButtonActiveDescendant.js + * + * Desc: Radio widget using aria-activedescendant that implements ARIA Authoring Practices + */ /* -* @constructor RadioButtonActiveDescendantActiveDescendant -* -* -*/ + * @constructor RadioButtonActiveDescendantActiveDescendant + * + * + */ var RadioButtonActiveDescendant = function (domNode, groupObj) { this.domNode = domNode; diff --git a/examples/radio/radio-2/js/radioGroupActiveDescendant.js b/examples/radio/radio-2/js/radioGroupActiveDescendant.js index 96facfea8c..d20ac7d2bf 100644 --- a/examples/radio/radio-2/js/radioGroupActiveDescendant.js +++ b/examples/radio/radio-2/js/radioGroupActiveDescendant.js @@ -1,22 +1,22 @@ /* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: radioGroup.js -* -* Desc: Radio group widget using aria-activedescendant that implements ARIA Authoring Practices -*/ + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: radioGroup.js + * + * Desc: Radio group widget using aria-activedescendant that implements ARIA Authoring Practices + */ /* -* @constructor radioGroupActiveDescendent -* -* @desc -* Wrapper for ARIA radiogroup control using ARIA active-descendant. Any descendant -* element with role=radio will be included in this radiogroup as a radiobutton2. -* -* @param domNode -* The DOM element node that serves as the radiogroup container. -*/ + * @constructor radioGroupActiveDescendent + * + * @desc + * Wrapper for ARIA radiogroup control using ARIA active-descendant. Any descendant + * element with role=radio will be included in this radiogroup as a radiobutton2. + * + * @param domNode + * The DOM element node that serves as the radiogroup container. + */ var RadioGroup = function (domNode) { this.domNode = domNode; diff --git a/examples/radio/radio-2/radio-2.html b/examples/radio/radio-2/radio-2.html index bcfaf2b8cb..06459d2ef6 100644 --- a/examples/radio/radio-2/radio-2.html +++ b/examples/radio/radio-2/radio-2.html @@ -36,7 +36,7 @@

Radio Group Example Using aria-activedescendant

-
+

Example

diff --git a/examples/slider/images/max-arrow.paint b/examples/slider/images/max-arrow.paint index 232fa40aaa..17a9070fa6 100644 Binary files a/examples/slider/images/max-arrow.paint and b/examples/slider/images/max-arrow.paint differ diff --git a/examples/slider/js/multithumb-slider.js b/examples/slider/js/multithumb-slider.js index 8104972d9d..dde8de44a6 100644 --- a/examples/slider/js/multithumb-slider.js +++ b/examples/slider/js/multithumb-slider.js @@ -1,242 +1,242 @@ -/* -* 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 -*/ - -// 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 (event) { - this.domNode.classList.add('focus'); - this.railDomNode.classList.add('focus'); -}; - -Slider.prototype.handleBlur = function (event) { - 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 (event) { - - 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(); - -// }; - -// Initialise 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(); - } - -}); +/* + * 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 + */ + +// 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 (event) { + this.domNode.classList.add('focus'); + this.railDomNode.classList.add('focus'); +}; + +Slider.prototype.handleBlur = function (event) { + 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 (event) { + + 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(); + +// }; + +// Initialise 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.js b/examples/slider/js/slider.js index d7cc2826e3..189d26e7dd 100644 --- a/examples/slider/js/slider.js +++ b/examples/slider/js/slider.js @@ -1,11 +1,11 @@ /* -* 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 -*/ + * 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 + */ // Create Slider that contains value, valuemin, valuemax, and valuenow var Slider = function (domNode) { @@ -200,7 +200,7 @@ Slider.prototype.handleMouseDown = function (event) { }; - // bind a mousemove event handler to move pointer + // bind a mousemove event handler to move pointer document.addEventListener('mousemove', handleMouseMove); // bind a mouseup event handler to stop tracking mouse movements diff --git a/examples/slider/js/text-slider.js b/examples/slider/js/text-slider.js index 4f32dbadb9..d5a204ee5b 100644 --- a/examples/slider/js/text-slider.js +++ b/examples/slider/js/text-slider.js @@ -1,11 +1,11 @@ /* -* 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 -*/ + * 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 + */ // Create Text Slider that contains value, valuemin, valuemax, and valuenow @@ -179,7 +179,7 @@ TSlider.prototype.handleMouseDown = function (event) { }; - // bind a mousemove event handler to move pointer + // bind a mousemove event handler to move pointer document.addEventListener('mousemove', handleMouseMove); // bind a mouseup event handler to stop tracking mouse movements diff --git a/examples/slider/js/vertical-slider.js b/examples/slider/js/vertical-slider.js index 254b9e98a9..cda1055be3 100644 --- a/examples/slider/js/vertical-slider.js +++ b/examples/slider/js/vertical-slider.js @@ -1,11 +1,11 @@ /* -* 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 -*/ + * 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 + */ // Create Vertical Slider that contains value, valuemin, valuemax, and valuenow var VSlider = function (domNode) { @@ -189,7 +189,7 @@ VSlider.prototype.handleMouseDown = function (event) { }; - // bind a mousemove event handler to move pointer + // bind a mousemove event handler to move pointer document.addEventListener('mousemove', handleMouseMove); // bind a mouseup event handler to stop tracking mouse movements diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html index a861eb39fa..06475de94f 100644 --- a/examples/slider/multithumb-slider.html +++ b/examples/slider/multithumb-slider.html @@ -1,275 +1,275 @@ - - - - - Horizontal Multi-Thumb Slider Example | WAI-ARIA Authoring Practices 1.1 - - - - - - - - - - - - - - -
-

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

-