diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md
index 194789ac6..7a5cba1a9 100644
--- a/ARIA/apg/patterns/feed/examples/feed.md
+++ b/ARIA/apg/patterns/feed/examples/feed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/feed/examples/feed/
sidebar: true
-footer: "
"
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
index 6d7e58fec..b6431c98d 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-collapsible/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -129,6 +129,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
+ - None
- Neptunium
- Plutonium
- Americium
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
index 57a1891bb..8c17ba178 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-grouped/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
index eea5cbded..581abe1a9 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-rearrangeable/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
index b78fb94c1..709192a54 100644
--- a/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
+++ b/ARIA/apg/patterns/listbox/examples/listbox-scrollable.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/listbox/examples/listbox-scrollable/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
@@ -116,6 +116,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
Transuranium elements:
+ -
+
+ None
+
-
Neptunium
diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
index 928fd7ad4..558b06b0a 100644
--- a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
+++ b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/
sidebar: true
-footer: " "
+footer: " "
# Context here: https://github.com/w3c/wai-aria-practices/issues/31
type_of_guidance: APG
diff --git a/_external/aria-practices b/_external/aria-practices
index 265f40812..d93a99acc 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 265f4081295cf04c916094601c1dd558fab5ee3c
+Subproject commit d93a99accd3d2677e3a1c53216421f8409433a3d
diff --git a/_external/data b/_external/data
index 9abe60c24..b9d6043d6 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 9abe60c247651ab1cc20c67e96756673aa3acb1f
+Subproject commit b9d6043d68e2b81ee4fbb0abc72a0e25f974c272
diff --git a/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css b/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
index eaa13a963..dfaeffe59 100644
--- a/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
+++ b/content-assets/wai-aria-practices/patterns/feed/examples/css/feedDisplay.css
@@ -1,6 +1,7 @@
body {
background: #fafafa;
font-family: Helvetica, Arial, sans-serif;
+ color: #000;
}
#side-panel {
diff --git a/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-collapsible.js b/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-collapsible.js
index 4beaae9f5..4002d17a4 100644
--- a/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-collapsible.js
+++ b/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox-collapsible.js
@@ -53,7 +53,6 @@ class ListboxButton {
case 'ArrowDown':
evt.preventDefault();
this.showListbox();
- this.listbox.checkKeyPress(evt);
break;
}
}
diff --git a/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js b/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js
index 632063f25..647593305 100644
--- a/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js
+++ b/content-assets/wai-aria-practices/patterns/listbox/examples/js/listbox.js
@@ -59,6 +59,8 @@ aria.Listbox = class Listbox {
if (this.activeDescendant) {
const listitem = document.getElementById(this.activeDescendant);
listitem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+ } else {
+ this.focusFirstItem();
}
}
diff --git a/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/css/slider-multithumb.css b/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/css/slider-multithumb.css
index deb555ba4..5c384f6fe 100644
--- a/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/css/slider-multithumb.css
+++ b/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/css/slider-multithumb.css
@@ -29,6 +29,7 @@
.slider-multithumb .slider-group .range {
fill: currentcolor;
opacity: 0.4;
+ pointer-events: none;
}
.slider-multithumb .slider-group .thumb {
diff --git a/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/js/slider-multithumb.js b/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/js/slider-multithumb.js
index fcb2ae628..dbbb73538 100644
--- a/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/js/slider-multithumb.js
+++ b/content-assets/wai-aria-practices/patterns/slider-multithumb/examples/js/slider-multithumb.js
@@ -8,6 +8,7 @@
*/
'use strict';
+
class SliderMultithumb {
constructor(domNode) {
this.isMoving = false;
@@ -21,6 +22,9 @@ class SliderMultithumb {
this.railNode = domNode.querySelector('.rail rect');
this.rangeNode = domNode.querySelector('.range rect');
+ this.minSliderPosition = 0;
+ this.maxSliderPosition = 0;
+
this.minSliderNode = domNode.querySelector('[role=slider].minimum');
this.maxSliderNode = domNode.querySelector('[role=slider].maximum');
@@ -36,7 +40,7 @@ class SliderMultithumb {
// Dimensions of the slider focus ring, thumb and rail
this.svgWidth = 360;
- this.svgHeight = 80;
+ this.svgHeight = 100;
this.valueTop = 24;
this.valueHeight = this.minSliderValueNode.getBoundingClientRect().height;
@@ -122,6 +126,8 @@ class SliderMultithumb {
this.maxSliderNode.addEventListener('focus', this.onSliderFocus.bind(this));
this.maxSliderNode.addEventListener('blur', this.onSliderBlur.bind(this));
+ this.railNode.addEventListener('click', this.onRailClick.bind(this));
+
this.moveSliderTo(this.minSliderNode, this.getValue(this.minSliderNode));
this.moveSliderTo(this.maxSliderNode, this.getValue(this.maxSliderNode));
}
@@ -149,30 +155,29 @@ class SliderMultithumb {
}
isInRange(sliderNode, value) {
- let valueMin = this.getValueMin(sliderNode);
- let valueMax = this.getValueMax(sliderNode);
+ const valueMin = this.getValueMin(sliderNode);
+ const valueMax = this.getValueMax(sliderNode);
return value <= valueMax && value >= valueMin;
}
isOutOfRange(value) {
- let valueMin = this.getValueMin(this.minSliderNode);
- let valueMax = this.getValueMax(this.maxSliderNode);
+ const valueMin = this.getValueMin(this.minSliderNode);
+ const valueMax = this.getValueMax(this.maxSliderNode);
return value > valueMax || value < valueMin;
}
getXFromThumb(node) {
- var points = node.getAttribute('points').split(',');
+ const points = node.getAttribute('points').split(',');
return parseInt(points[0]);
}
moveSliderTo(sliderNode, value) {
- var valueMax,
- valueMin,
- pos,
- x,
- points = '',
- width,
- dollarValue;
+ let valueMax;
+ let valueMin;
+ let pos;
+ let points = '';
+ let x;
+ let width;
if (this.isMinSlider(sliderNode)) {
valueMin = this.getValueMin(this.minSliderNode);
@@ -185,7 +190,7 @@ class SliderMultithumb {
value = Math.min(Math.max(value, valueMin), valueMax);
sliderNode.setAttribute('aria-valuenow', value);
- dollarValue = '$' + value;
+ const dollarValue = `$${value}`;
pos = this.railX;
pos += Math.round(
@@ -194,6 +199,8 @@ class SliderMultithumb {
);
if (this.isMinSlider(sliderNode)) {
+ this.minSliderPosition = pos;
+
// update ARIA attributes
this.minSliderValueNode.textContent = dollarValue;
this.maxSliderNode.setAttribute('aria-valuemin', value);
@@ -209,7 +216,7 @@ class SliderMultithumb {
// Position value
width = this.minSliderValueNode.getBoundingClientRect().width;
- pos = pos + (this.thumbWidth - width) / 2;
+ pos += (this.thumbWidth - width) / 2;
if (pos + width > this.maxSliderLeft - 2) {
pos = this.maxSliderLeft - width - 2;
}
@@ -217,6 +224,8 @@ class SliderMultithumb {
this.minSliderRight = pos;
} else {
// update label and ARIA attributes
+ this.maxSliderPosition = pos;
+
this.maxSliderValueNode.textContent = dollarValue;
this.minSliderNode.setAttribute('aria-valuemax', value);
@@ -229,7 +238,10 @@ class SliderMultithumb {
points += ` ${pos + this.thumb2Width},${this.thumbBottom}`;
this.maxSliderThumbNode.setAttribute('points', points);
- width = this.maxSliderValueNode.getBoundingClientRect().width;
+ width = Math.max(
+ 0,
+ this.maxSliderValueNode.getBoundingClientRect().width
+ );
pos = pos + this.thumbWidth + (this.thumbWidth - width) / 2;
if (pos - width < this.minSliderRight + 2) {
pos = this.minSliderRight + width + 2;
@@ -249,11 +261,11 @@ class SliderMultithumb {
}
onSliderKeydown(event) {
- var flag = false;
- var sliderNode = event.currentTarget;
- var value = this.getValue(sliderNode);
- var valueMin = this.getValueMin(sliderNode);
- var valueMax = this.getValueMax(sliderNode);
+ let flag = false;
+ const sliderNode = event.currentTarget;
+ const value = this.getValue(sliderNode);
+ const valueMin = this.getValueMin(sliderNode);
+ const valueMax = this.getValueMax(sliderNode);
switch (event.key) {
case 'ArrowLeft':
@@ -326,14 +338,14 @@ class SliderMultithumb {
this.movingSliderNode &&
this.domNode.contains(event.target)
) {
- var x = this.getSVGPoint(event).x - this.railX;
+ let x = this.getSVGPoint(event).x - this.railX;
if (this.isMinSliderMoving) {
x = Math.max(0, x - this.thumbWidth / 3);
} else {
x = Math.max(0, x - (5 * this.thumbWidth) / 3);
}
x = Math.min(x, this.railWidth - this.thumbWidth);
- var value = Math.round(
+ const value = Math.round(
(x * this.sliderDiffValue) / (this.railWidth - this.thumbWidth)
);
this.moveSliderTo(this.movingSliderNode, value);
@@ -347,11 +359,34 @@ class SliderMultithumb {
this.isMoving = false;
this.movingSliderNode = false;
}
+
+ // handle click event on the rail
+ onRailClick(event) {
+ const x = this.getSVGPoint(event).x - this.railX;
+ const diffMin = x - this.minSliderPosition - (3 * this.thumbWidth) / 2;
+ const diffMax = this.maxSliderPosition - x;
+ const sliderNode =
+ (x < this.minSliderPosition || diffMin < diffMax) &&
+ x < this.maxSliderPosition
+ ? this.minSliderNode
+ : this.maxSliderNode;
+
+ let p = Math.max(0, x - this.thumbWidth);
+ p = Math.min(p, this.railWidth - this.thumbWidth);
+ const value = Math.round(
+ (p * this.sliderDiffValue) / (this.railWidth - this.thumbWidth)
+ );
+
+ this.moveSliderTo(sliderNode, value);
+
+ event.preventDefault();
+ event.stopPropagation();
+ }
}
// Initialize Multithumb Slider widgets on the page
-window.addEventListener('load', function () {
- var slidersMultithumb = document.querySelectorAll('.slider-multithumb');
+window.addEventListener('load', () => {
+ const slidersMultithumb = document.querySelectorAll('.slider-multithumb');
for (let i = 0; i < slidersMultithumb.length; i++) {
new SliderMultithumb(slidersMultithumb[i]);