From 9933f7a6c5c1838ceedf8c5306a46c44ed631dda Mon Sep 17 00:00:00 2001
From: w3cgruntbot <w3cgruntbot@users.noreply.github.com>
Date: Sun, 3 Nov 2024 03:41:52 +0000
Subject: [PATCH 1/3] Commit changes

---
 ARIA/apg/patterns/feed/examples/feed.md                         | 2 +-
 _external/aria-practices                                        | 2 +-
 _external/data                                                  | 2 +-
 .../patterns/feed/examples/css/feedDisplay.css                  | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/136'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/136'>View issues related to this example</a></p>        <p>Page last updated: 3 November 2024</p>      </div>    "
 
 # 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..ebb4476e4 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 265f4081295cf04c916094601c1dd558fab5ee3c
+Subproject commit ebb4476e4560f22ec9e0146acd5bb5b59e171a2a
diff --git a/_external/data b/_external/data
index 9abe60c24..51ffb9f32 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 9abe60c247651ab1cc20c67e96756673aa3acb1f
+Subproject commit 51ffb9f3262d5388e75fa6e1d9edb992f7fbdbed
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 {

From f337b391d0df8e7a1e0e7e5b451703c07f95063a Mon Sep 17 00:00:00 2001
From: w3cgruntbot <w3cgruntbot@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:46:45 +0000
Subject: [PATCH 2/3] Commit changes

---
 ARIA/apg/patterns/listbox/examples/listbox-collapsible.md   | 3 ++-
 ARIA/apg/patterns/listbox/examples/listbox-grouped.md       | 2 +-
 ARIA/apg/patterns/listbox/examples/listbox-rearrangeable.md | 2 +-
 ARIA/apg/patterns/listbox/examples/listbox-scrollable.md    | 6 +++++-
 _external/aria-practices                                    | 2 +-
 _external/data                                              | 2 +-
 .../patterns/listbox/examples/js/listbox-collapsible.js     | 1 -
 .../patterns/listbox/examples/js/listbox.js                 | 2 ++
 8 files changed, 13 insertions(+), 7 deletions(-)

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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 19 November 2024</p>      </div>    "
 
 # 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');
               <div id="exp_wrapper">
                 <button type="button" aria-haspopup="listbox" aria-labelledby="exp_elem exp_button" id="exp_button">Neptunium</button>
                 <ul id="exp_elem_list" tabindex="-1" role="listbox" aria-labelledby="exp_elem" class="hidden">
+                  <li id="exp_elem_None" role="option">None</li>
                   <li id="exp_elem_Np" role="option">Neptunium</li>
                   <li id="exp_elem_Pu" role="option">Plutonium</li>
                   <li id="exp_elem_Am" role="option">Americium</li>
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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 19 November 2024</p>      </div>    "
 
 # 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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 19 November 2024</p>      </div>    "
 
 # 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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/131'>View issues related to this example</a></p>        <p>Page last updated: 19 November 2024</p>      </div>    "
 
 # 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');
             <div>
               <span id="ss_elem" class="listbox-label">Transuranium elements:</span>
               <ul id="ss_elem_list" tabindex="0" role="listbox" aria-labelledby="ss_elem">
+                <li id="ss_elem_None" role="option">
+                  <span class="checkmark" aria-hidden="true"></span>
+                  None
+                </li>
                 <li id="ss_elem_Np" role="option">
                   <span class="checkmark" aria-hidden="true"></span>
                   Neptunium
diff --git a/_external/aria-practices b/_external/aria-practices
index ebb4476e4..b0c04c4bf 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit ebb4476e4560f22ec9e0146acd5bb5b59e171a2a
+Subproject commit b0c04c4bf4bae3d2de4b1fed893d250ec27f5de8
diff --git a/_external/data b/_external/data
index 51ffb9f32..66a4b03eb 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 51ffb9f3262d5388e75fa6e1d9edb992f7fbdbed
+Subproject commit 66a4b03ebcc76101c774f3092524c9808d281457
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();
     }
   }
 

From 9343eccb17bcf620276b564d906d9d913aed4b36 Mon Sep 17 00:00:00 2001
From: w3cgruntbot <w3cgruntbot@users.noreply.github.com>
Date: Thu, 12 Dec 2024 00:28:48 +0000
Subject: [PATCH 3/3] Commit changes

---
 .../examples/slider-multithumb.md             |  2 +-
 _external/aria-practices                      |  2 +-
 _external/data                                |  2 +-
 .../examples/css/slider-multithumb.css        |  1 +
 .../examples/js/slider-multithumb.js          | 85 +++++++++++++------
 5 files changed, 64 insertions(+), 28 deletions(-)

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: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/124'>View issues related to this example</a></p>        <p>Page last updated: 22 October 2024</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/orgs/w3c/projects/124'>View issues related to this example</a></p>        <p>Page last updated: 12 December 2024</p>      </div>    "
 
 # 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 b0c04c4bf..d93a99acc 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit b0c04c4bf4bae3d2de4b1fed893d250ec27f5de8
+Subproject commit d93a99accd3d2677e3a1c53216421f8409433a3d
diff --git a/_external/data b/_external/data
index 66a4b03eb..b9d6043d6 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 66a4b03ebcc76101c774f3092524c9808d281457
+Subproject commit b9d6043d68e2b81ee4fbb0abc72a0e25f974c272
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]);