From 560e27cd760f0b3001d4ebc588d25ea883c75725 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Fri, 6 Oct 2023 22:09:54 +0000
Subject: [PATCH 01/41] Commit changed files and submodule updates

---
 .../patterns/accordion/examples/accordion.md  |   2 +-
 ARIA/apg/patterns/alert/examples/alert.md     |   2 +-
 .../alertdialog/examples/alertdialog.md       |   2 +-
 .../breadcrumb/examples/breadcrumb.md         |   2 +-
 ARIA/apg/patterns/button/examples/button.md   |   2 +-
 .../patterns/button/examples/button_idl.md    |   2 +-
 .../carousel/examples/carousel-1-prev-next.md |   2 +-
 .../carousel/examples/carousel-2-tablist.md   |   2 +-
 .../checkbox/examples/checkbox-mixed.md       |   2 +-
 .../patterns/checkbox/examples/checkbox.md    |   2 +-
 .../examples/combobox-autocomplete-both.md    |   2 +-
 .../examples/combobox-autocomplete-list.md    |   2 +-
 .../examples/combobox-autocomplete-none.md    |   2 +-
 .../combobox/examples/combobox-datepicker.md  |   2 +-
 .../combobox/examples/combobox-select-only.md |   2 +-
 .../patterns/combobox/examples/grid-combo.md  |   2 +-
 .../examples/datepicker-dialog.md             |   2 +-
 .../patterns/dialog-modal/examples/dialog.md  |   2 +-
 .../disclosure/examples/disclosure-faq.md     |   2 +-
 .../examples/disclosure-image-description.md  |   2 +-
 .../examples/disclosure-navigation-hybrid.md  |   2 +-
 .../examples/disclosure-navigation.md         |   2 +-
 ARIA/apg/patterns/feed/examples/feed.md       |   2 +-
 .../grid/examples/advanced-data-grid.md       |   2 +-
 ARIA/apg/patterns/grid/examples/data-grids.md |   2 +-
 .../patterns/grid/examples/layout-grids.md    |   2 +-
 ARIA/apg/patterns/link/examples/link.md       |   2 +-
 .../listbox/examples/listbox-collapsible.md   |   2 +-
 .../listbox/examples/listbox-grouped.md       |   2 +-
 .../listbox/examples/listbox-rearrangeable.md |   2 +-
 .../listbox/examples/listbox-scrollable.md    |   2 +-
 .../menu-button-actions-active-descendant.md  |   2 +-
 .../examples/menu-button-actions.md           |   2 +-
 .../menu-button/examples/menu-button-links.md |   2 +-
 .../menubar/examples/menubar-editor.md        |   2 +-
 .../menubar/examples/menubar-navigation.md    |   2 +-
 ARIA/apg/patterns/meter/examples/meter.md     |   2 +-
 .../radio/examples/radio-activedescendant.md  |   2 +-
 .../patterns/radio/examples/radio-rating.md   |   2 +-
 ARIA/apg/patterns/radio/examples/radio.md     |   2 +-
 .../examples/slider-multithumb.md             |   2 +-
 .../slider/examples/slider-color-viewer.md    |   2 +-
 .../patterns/slider/examples/slider-rating.md |  82 ++++++----
 .../patterns/slider/examples/slider-seek.md   |   2 +-
 .../slider/examples/slider-temperature.md     |   2 +-
 .../examples/datepicker-spinbuttons.md        |   2 +-
 .../patterns/switch/examples/switch-button.md |   2 +-
 .../switch/examples/switch-checkbox.md        |   2 +-
 ARIA/apg/patterns/switch/examples/switch.md   |   2 +-
 .../patterns/table/examples/sortable-table.md |   2 +-
 ARIA/apg/patterns/table/examples/table.md     |   2 +-
 .../patterns/tabs/examples/tabs-automatic.md  |   2 +-
 .../apg/patterns/tabs/examples/tabs-manual.md |   2 +-
 ARIA/apg/patterns/toolbar/examples/toolbar.md |   2 +-
 .../patterns/treegrid/examples/treegrid-1.md  |   2 +-
 .../patterns/treeview/examples/treeview-1a.md |   2 +-
 .../patterns/treeview/examples/treeview-1b.md |   2 +-
 .../treeview/examples/treeview-navigation.md  |   2 +-
 _external/aria-practices                      |   2 +-
 .../slider/examples/css/slider-rating.css     |  85 +++++++---
 .../slider/examples/js/slider-rating.js       | 154 +++++++++---------
 61 files changed, 252 insertions(+), 185 deletions(-)

diff --git a/ARIA/apg/patterns/accordion/examples/accordion.md b/ARIA/apg/patterns/accordion/examples/accordion.md
index beb4e6d37..c978cb86a 100644
--- a/ARIA/apg/patterns/accordion/examples/accordion.md
+++ b/ARIA/apg/patterns/accordion/examples/accordion.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/accordion/examples/accordion/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/8'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/alert/examples/alert.md b/ARIA/apg/patterns/alert/examples/alert.md
index d2e78d523..8039169d9 100644
--- a/ARIA/apg/patterns/alert/examples/alert.md
+++ b/ARIA/apg/patterns/alert/examples/alert.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alert/examples/alert/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
index a69b9ebf8..6f07cc1a5 100644
--- a/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
+++ b/ARIA/apg/patterns/alertdialog/examples/alertdialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/alertdialog/examples/alertdialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/20'>View issues related to this example</a></p>        <p>Page last updated: 7 December 2022</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
index c99aeb3a9..e79e5b85e 100644
--- a/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
+++ b/ARIA/apg/patterns/breadcrumb/examples/breadcrumb.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/button/examples/button.md b/ARIA/apg/patterns/button/examples/button.md
index 7ad3a0ff9..72348e514 100644
--- a/ARIA/apg/patterns/button/examples/button.md
+++ b/ARIA/apg/patterns/button/examples/button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/button/examples/button_idl.md b/ARIA/apg/patterns/button/examples/button_idl.md
index 490736efc..b38ef306a 100644
--- a/ARIA/apg/patterns/button/examples/button_idl.md
+++ b/ARIA/apg/patterns/button/examples/button_idl.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/button/examples/button_idl/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
index 27c883a51..17e1316cc 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
index 7dffc906d..d70dd3cca 100644
--- a/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
+++ b/ARIA/apg/patterns/carousel/examples/carousel-2-tablist.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/carousel/examples/carousel-2-tablist/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/10'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
index 217051e7e..b4a87a011 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox-mixed.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/checkbox/examples/checkbox.md b/ARIA/apg/patterns/checkbox/examples/checkbox.md
index f9682aff1..1b6c7c995 100644
--- a/ARIA/apg/patterns/checkbox/examples/checkbox.md
+++ b/ARIA/apg/patterns/checkbox/examples/checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/checkbox/examples/checkbox/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/9'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
index 6b763323f..ed70bedd2 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
index c0872733f..98d5434a3 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
index 47409e19d..6754a5bad 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
index 491116275..b21b1e08f 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-datepicker.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-datepicker/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
index f3213e345..22fe6f236 100644
--- a/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
+++ b/ARIA/apg/patterns/combobox/examples/combobox-select-only.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/combobox-select-only/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/combobox/examples/grid-combo.md b/ARIA/apg/patterns/combobox/examples/grid-combo.md
index 7e6377520..5f2327a64 100644
--- a/ARIA/apg/patterns/combobox/examples/grid-combo.md
+++ b/ARIA/apg/patterns/combobox/examples/grid-combo.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/combobox/examples/grid-combo/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/7'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
index 7c38f70f9..2d7c6d38a 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/27'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/27'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/dialog-modal/examples/dialog.md b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
index aee446fcc..45c0dfd3c 100644
--- a/ARIA/apg/patterns/dialog-modal/examples/dialog.md
+++ b/ARIA/apg/patterns/dialog-modal/examples/dialog.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/dialog-modal/examples/dialog/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/6'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/6'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
index 5f201761d..95d78fc34 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-faq.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-faq/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
index fee070ceb..e53721b8e 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-image-description.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-image-description/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
index 41ce85325..ade6b5ac8 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
index 64283cbc7..610146177 100644
--- a/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
+++ b/ARIA/apg/patterns/disclosure/examples/disclosure-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/feed/examples/feed.md b/ARIA/apg/patterns/feed/examples/feed.md
index 82a8776d1..7c68498f2 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/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/19'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
index 6b282ddaf..7735fd5a6 100644
--- a/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
+++ b/ARIA/apg/patterns/grid/examples/advanced-data-grid.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/advanced-data-grid/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/grid/examples/data-grids.md b/ARIA/apg/patterns/grid/examples/data-grids.md
index 3dc9a8ab9..4320a7a6b 100644
--- a/ARIA/apg/patterns/grid/examples/data-grids.md
+++ b/ARIA/apg/patterns/grid/examples/data-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/data-grids/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/grid/examples/layout-grids.md b/ARIA/apg/patterns/grid/examples/layout-grids.md
index 94bbbc738..97d551c71 100644
--- a/ARIA/apg/patterns/grid/examples/layout-grids.md
+++ b/ARIA/apg/patterns/grid/examples/layout-grids.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/grid/examples/layout-grids/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/15'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/link/examples/link.md b/ARIA/apg/patterns/link/examples/link.md
index 5a55c20a1..9b72fd7cc 100644
--- a/ARIA/apg/patterns/link/examples/link.md
+++ b/ARIA/apg/patterns/link/examples/link.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/link/examples/link/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/21'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</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-collapsible.md b/ARIA/apg/patterns/listbox/examples/listbox-collapsible.md
index 1df9cb988..3bff123c2 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/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 19 September 2023</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-grouped.md b/ARIA/apg/patterns/listbox/examples/listbox-grouped.md
index 41e0e5c17..7efc47c73 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/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 19 September 2023</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 c219ca4f0..89a3e6500 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/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 19 September 2023</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 4890e5c9f..d1d72af52 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/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/13'>View issues related to this example</a></p>        <p>Page last updated: 19 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
index 91331573a..0b7ffd04e 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-de
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
index efc2bd7b0..6f74e1627 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-actions.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-actions/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
index d926553f2..e936372df 100644
--- a/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
+++ b/ARIA/apg/patterns/menu-button/examples/menu-button-links.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menu-button/examples/menu-button-links/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-editor.md b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
index 6c16eaec5..b2f622cbf 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-editor.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-editor.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-editor/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
index 60084d2e3..53831d52b 100644
--- a/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
+++ b/ARIA/apg/patterns/menubar/examples/menubar-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/menubar/examples/menubar-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/5'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/meter/examples/meter.md b/ARIA/apg/patterns/meter/examples/meter.md
index aabc8a12f..190350a4b 100644
--- a/ARIA/apg/patterns/meter/examples/meter.md
+++ b/ARIA/apg/patterns/meter/examples/meter.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/meter/examples/meter/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/30'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/30'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
index 7db074684..b81bfda00 100644
--- a/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
+++ b/ARIA/apg/patterns/radio/examples/radio-activedescendant.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-activedescendant/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index fbdbb6401..a2c7f7087 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/radio/examples/radio.md b/ARIA/apg/patterns/radio/examples/radio.md
index 490ee72ff..eef9a9851 100644
--- a/ARIA/apg/patterns/radio/examples/radio.md
+++ b/ARIA/apg/patterns/radio/examples/radio.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md b/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb.md
index de36a5482..0a56048dc 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/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 86604f6a9..866711104 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index a9cfa7fc4..01136866f 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 6 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -130,41 +130,67 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
-          <div id="id-rating-label" class="label">Rating</div>
+          <div id="id-rating-label" class="label">On a scale of 0-10, rate your satisfaction with the service you received?</div>
 
-          <div id="id-rating" class="rating-slider" role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="5" aria-valuetext="no stars" aria-labelledby="id-rating-label">
+          <div id="id-rating"
+               class="rating-slider"
+               role="slider"
+               tabindex="0"
+               aria-valuemin="-1"
+               aria-valuenow="-1"
+               aria-valuemax="10"
+               aria-valuetext="no rating on the 11 point rating scale selected"
+              aria-labelledby="id-rating-label">
             
 
-            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="224" height="48">
-              <defs>
-                <g id="star">
-                  <polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 27.4,31.9 23.7,20.5 33.4,13.4 21.4,13.4 17.7,2.0 14.0,13.4" ></polygon>
-                </g>
-                <g id="fill-left">
-                  <polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 17.7,2.0 14.0,13.4" ></polygon>
-                </g>
-              </defs>
-              <rect class="focus-ring" x="2" y="2" width="212" height="44" rx="5" ></rect>
-              <g class="star-1 star-2 star-3 star-4 star-5">
-                <use class="star" xlink:href="#star" x="10" y="7" ></use>
-                <use class="fill-left" xlink:href="#fill-left" x="10" y="7" ></use>
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="342" height="48">
+              <rect class="focus-ring" x="2" y="2" width="338" height="36" rx="5" ></rect>
+              <g class="rating-0">
+                <circle class="value" cx="20" cy="20" r="10"></circle>
+                <circle class="focus" cx="20" cy="20" r="14"></circle>
+                <text x="15" y="48">0</text>
               </g>
-              <g class="star-2 star-3 star-4 star-5">
-                <use class="star" xlink:href="#star" x="50" y="7" ></use>
-                <use class="fill-left" xlink:href="#fill-left" x="50" y="7" ></use>
+              <g class="rating-1">
+                <circle class="value" cx="50" cy="20" r="10"></circle>
+                <circle class="focus" cx="50" cy="20" r="14"></circle>
+                <text x="45" y="48">1</text>
               </g>
-              <g class="star-3 star-4 star-5">
-                <use class="star" xlink:href="#star" x="90" y="7" ></use>
-                <use class="fill-left" xlink:href="#fill-left" x="90" y="7" ></use>
+              <g class="rating-2">
+                <circle class="value" cx="80" cy="20" r="10"></circle>
+                <circle class="focus" cx="80" cy="20" r="14"></circle>
               </g>
-              <g class="star-4 star-5">
-                <use class="star" xlink:href="#star" x="130" y="7" ></use>
-                <use class="fill-left" xlink:href="#fill-left" x="130" y="7" ></use>
+              <g class="rating-3">
+                <circle class="value" cx="110" cy="20" r="10"></circle>
+                <circle class="focus" cx="110" cy="20" r="14"></circle>
               </g>
-              <g class="star-5">
-                <use class="star" xlink:href="#star" x="170" y="7" ></use>
-                <use class="fill-left" xlink:href="#fill-left" x="170" y="7" ></use>
+              <g class="rating-4">
+                <circle class="value" cx="140" cy="20" r="10"></circle>
+                <circle class="focus" cx="140" cy="20" r="14"></circle>
               </g>
+              <g class="rating-5">
+                <circle class="value" cx="170" cy="20" r="10"></circle>
+                <circle class="focus" cx="170" cy="20" r="14"></circle>
+              </g>
+              <g class="rating-6">
+                <circle class="value" cx="200" cy="20" r="10"></circle>
+                <circle class="focus" cx="200" cy="20" r="14"></circle>
+              </g>
+              <g class="rating-7">
+                <circle class="value" cx="230" cy="20" r="10"></circle>
+                <circle class="focus" cx="230" cy="20" r="14"></circle>
+              </g>
+              <g class="rating-8">
+                <circle class="value" cx="260" cy="20" r="10"></circle>
+                <circle class="focus" cx="260" cy="20" r="14"></circle>
+              </g>
+              <g class="rating-9">
+                <circle class="value" cx="290" cy="20" r="10"></circle>
+                <circle class="focus" cx="290" cy="20" r="14"></circle>
+               </g>
+              <g class="rating-10">
+                <circle class="value" cx="320" cy="20" r="10"></circle>
+                <circle class="focus" cx="320" cy="20" r="14"></circle>
+               </g>
             </svg>
           </div>
         </div>
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index 3adb552a5..a14b09b39 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 47126250b..6c7870f3c 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
index a96857dd3..01678bd62 100644
--- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
+++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/14'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/switch/examples/switch-button.md b/ARIA/apg/patterns/switch/examples/switch-button.md
index 9adbd68b9..8e7cfda48 100644
--- a/ARIA/apg/patterns/switch/examples/switch-button.md
+++ b/ARIA/apg/patterns/switch/examples/switch-button.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-button/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/switch/examples/switch-checkbox.md b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
index 66539b97e..afc3b15d1 100644
--- a/ARIA/apg/patterns/switch/examples/switch-checkbox.md
+++ b/ARIA/apg/patterns/switch/examples/switch-checkbox.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch-checkbox/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/switch/examples/switch.md b/ARIA/apg/patterns/switch/examples/switch.md
index 2ba338b1e..4f0295c54 100644
--- a/ARIA/apg/patterns/switch/examples/switch.md
+++ b/ARIA/apg/patterns/switch/examples/switch.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/switch/examples/switch/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/2'>View issues related to this example</a></p>        <p>Page last updated: 20 September 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/table/examples/sortable-table.md b/ARIA/apg/patterns/table/examples/sortable-table.md
index 8d9439509..1d58d07af 100644
--- a/ARIA/apg/patterns/table/examples/sortable-table.md
+++ b/ARIA/apg/patterns/table/examples/sortable-table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/sortable-table/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/table/examples/table.md b/ARIA/apg/patterns/table/examples/table.md
index 845291ee2..86cecaa68 100644
--- a/ARIA/apg/patterns/table/examples/table.md
+++ b/ARIA/apg/patterns/table/examples/table.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/table/examples/table/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/16'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
index 93dbeb76e..dbfb8849b 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-automatic.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-automatic/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/tabs/examples/tabs-manual.md b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
index a0bfe3e7e..ff021a61e 100644
--- a/ARIA/apg/patterns/tabs/examples/tabs-manual.md
+++ b/ARIA/apg/patterns/tabs/examples/tabs-manual.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/tabs/examples/tabs-manual/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/11'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/toolbar/examples/toolbar.md b/ARIA/apg/patterns/toolbar/examples/toolbar.md
index c0f716546..adbfd92ce 100644
--- a/ARIA/apg/patterns/toolbar/examples/toolbar.md
+++ b/ARIA/apg/patterns/toolbar/examples/toolbar.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/toolbar/examples/toolbar/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/18'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/18'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
index f901e0979..8e09cfc35 100644
--- a/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
+++ b/ARIA/apg/patterns/treegrid/examples/treegrid-1.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treegrid/examples/treegrid-1/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1a.md b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
index ce2334664..0379c366a 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1a.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1a.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1a/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-1b.md b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
index f94cf4475..eb839a35d 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-1b.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-1b.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-1b/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
diff --git a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
index e9672c598..b741b2ebb 100644
--- a/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
+++ b/ARIA/apg/patterns/treeview/examples/treeview-navigation.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/treeview/examples/treeview-navigation/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 2 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/17'>View issues related to this example</a></p>        <p>Page last updated: 19 September 2023</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 7fb7c8e28..452abe0ce 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 7fb7c8e28b55a2804bda682c36945a1154d1096a
+Subproject commit 452abe0ce361e9f9d2a36a860a2e08b8e1911c94
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index a5474d5bd..182d1e7b6 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -19,68 +19,63 @@
   fill-opacity: 0;
 }
 
-.rating-slider svg .star {
+.rating-slider svg .value {
   stroke-width: 2px;
   stroke: currentcolor;
   fill-opacity: 0;
 }
 
-.rating-slider svg .fill-left,
-.rating-slider svg .fill-right {
-  stroke-width: 0;
-  fill-opacity: 0;
+.rating-slider[aria-valuenow="0"] svg .rating-0 .value {
+  fill: currentcolor;
+  fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="5"] svg .star {
+.rating-slider[aria-valuenow="1"] svg .rating-1 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="0.5"] svg .star-1 .fill-left {
+.rating-slider[aria-valuenow="2"] svg .rating-2 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="1"] svg .star-1 .star {
+.rating-slider[aria-valuenow="3"] svg .rating-3 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="1.5"] svg .star-1 .star,
-.rating-slider[aria-valuenow="1.5"] svg .star-2 .fill-left {
+.rating-slider[aria-valuenow="4"] svg .rating-4 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="2"] svg .star-2 .star {
+.rating-slider[aria-valuenow="5"] svg .rating-5 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="2.5"] svg .star-2 .star,
-.rating-slider[aria-valuenow="2.5"] svg .star-3 .fill-left {
+.rating-slider[aria-valuenow="6"] svg .rating-6 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="3"] svg .star-3 .star {
+.rating-slider[aria-valuenow="7"] svg .rating-7 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="3.5"] svg .star-3 .star,
-.rating-slider[aria-valuenow="3.5"] svg .star-4 .fill-left {
+.rating-slider[aria-valuenow="8"] svg .rating-8 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="4"] svg .star-4 .star {
+.rating-slider[aria-valuenow="9"] svg .rating-9 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="4.5"] svg .star-4 .star,
-.rating-slider[aria-valuenow="4.5"] svg .star-5 .fill-left {
+.rating-slider[aria-valuenow="10"] svg .rating-10 .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
@@ -91,7 +86,57 @@
   outline: none;
 }
 
-.rating-slider:focus svg .focus-ring {
+.rating-slider svg .focus {
+  stroke-width: 0;
+  stroke: currentcolor;
+  fill-opacity: 0;
+}
+
+.rating-slider[aria-valuenow="-1"]:focus svg .focus-ring {
   stroke-width: 2px;
   stroke: currentcolor;
 }
+
+.rating-slider[aria-valuenow="0"]:focus svg .rating-0 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="1"]:focus svg .rating-1 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="2"]:focus svg .rating-2 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="3"]:focus svg .rating-3 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="4"]:focus svg .rating-4 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="5"]:focus svg .rating-5 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="6"]:focus svg .rating-6 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="7"]:focus svg .rating-7 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="8"]:focus svg .rating-8 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="9"]:focus svg .rating-9 .focus {
+  stroke-width: 2px;
+}
+
+.rating-slider[aria-valuenow="10"]:focus svg .rating-10 .focus {
+  stroke-width: 2px;
+}
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 589616031..d332e2c44 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -20,8 +20,11 @@ class RatingSlider {
     //    var  color = getComputedStyle(this.sliderNode).color;
     //    this.svgNode.setAttribute('color', color);
 
-    this.starsWidth = 198;
-    this.starsX = 0;
+    this.railWidth = 360;
+    this.railOffset = 20;
+
+    this.valueMin = this.getValueMin();
+    this.valueMax = this.getValueMax();
 
     this.svgPoint = this.svgNode.createSVGPoint();
 
@@ -44,10 +47,10 @@ class RatingSlider {
     // bind a pointerup event handler to stop tracking pointer movements
     document.addEventListener('pointerup', this.onPointerUp.bind(this));
 
-    this.addTotalStarsToRatingLabel();
+    this.addTotalCirclesToRatingLabel();
     this.sliderNode.addEventListener(
       'blur',
-      this.addTotalStarsToRatingLabel.bind(this)
+      this.addTotalCirclesToRatingLabel.bind(this)
     );
   }
 
@@ -70,46 +73,43 @@ class RatingSlider {
     return parseFloat(this.sliderNode.getAttribute('aria-valuemax'));
   }
 
-  isInRange(value) {
-    let valueMin = this.getValueMin();
-    let valueMax = this.getValueMax();
-    return value <= valueMax && value >= valueMin;
-  }
-
   getValueText(value) {
     switch (value) {
+      case -1:
+        return 'no rating selected';
+
       case 0:
-        return 'zero stars';
+        return 'Unacceptable service';
 
-      case 0.5:
-        return 'one half star';
+      case 1:
+        return 'Extremely dissatisfied';
 
-      case 1.0:
-        return 'one star';
+      case 2:
+        return 'Strongly dissatisfied';
 
-      case 1.5:
-        return 'one and a half stars';
+      case 3:
+        return 'dissatisfied';
 
-      case 2.0:
-        return 'two stars';
+      case 4:
+        return 'Slightly dissatisfied';
 
-      case 2.5:
-        return 'two and a half stars';
+      case 5:
+        return 'Neither satisfied or dissatisfied';
 
-      case 3.0:
-        return 'three stars';
+      case 6:
+        return 'Slightly satisfied';
 
-      case 3.5:
-        return 'three and a half stars';
+      case 7:
+        return 'Satisfied';
 
-      case 4.0:
-        return 'four stars';
+      case 8:
+        return 'Strongly satisfied';
 
-      case 4.5:
-        return 'four and a half stars';
+      case 9:
+        return 'Extremely satisfied';
 
-      case 5.0:
-        return 'five stars';
+      case 10:
+        return 'Completely satisfied';
 
       default:
         break;
@@ -120,38 +120,41 @@ class RatingSlider {
 
   getValueTextWithMax(value) {
     switch (value) {
+      case -1:
+        return 'no rating on the 11 point rating scale selected';
+
       case 0:
-        return 'zero of five stars';
+        return 'Unacceptable service, first of eleven point rating scale';
 
-      case 0.5:
-        return 'one half of five stars';
+      case 1:
+        return 'Extremely dissatisfied, second of eleven point rating scale';
 
-      case 1.0:
-        return 'one of five stars';
+      case 2:
+        return 'Strongly dissatisfied, third of eleven point rating scale';
 
-      case 1.5:
-        return 'one and a half of five stars';
+      case 3:
+        return 'dissatisfied, fourth of eleven point rating scale';
 
-      case 2.0:
-        return 'two of five stars';
+      case 4:
+        return 'Slightly dissatisfied, fifth of eleven point rating scale';
 
-      case 2.5:
-        return 'two and a half of five stars';
+      case 5:
+        return 'Neither satisfied or dissatisfied, sixth of eleven point rating scale';
 
-      case 3.0:
-        return 'three of five stars';
+      case 6:
+        return 'Slightly satisfied, seventh of eleven point rating scale';
 
-      case 3.5:
-        return 'three and a half of five stars';
+      case 7:
+        return 'Satisfied, eighth of eleven point rating scale';
 
-      case 4.0:
-        return 'four of five stars';
+      case 8:
+        return 'Strongly satisfied, ninth of eleven point rating scale';
 
-      case 4.5:
-        return 'four and a half of five stars';
+      case 9:
+        return 'Extremely satisfied, tenth of eleven point rating scale';
 
-      case 5.0:
-        return 'five of five stars';
+      case 10:
+        return 'Completely satisfied, eleventh of eleven point rating scale';
 
       default:
         break;
@@ -161,54 +164,45 @@ class RatingSlider {
   }
 
   moveSliderTo(value) {
-    let valueMax, valueMin;
-
-    valueMin = this.getValueMin();
-    valueMax = this.getValueMax();
-
-    value = Math.min(Math.max(value, valueMin), valueMax);
-
+    value = Math.min(Math.max(value, this.valueMin + 1), this.valueMax);
     this.sliderNode.setAttribute('aria-valuenow', value);
-
     this.sliderNode.setAttribute('aria-valuetext', this.getValueText(value));
   }
 
   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 - 0.5);
+        this.moveSliderTo(value - 1);
         flag = true;
         break;
 
       case 'ArrowRight':
       case 'ArrowUp':
-        this.moveSliderTo(value + 0.5);
+        this.moveSliderTo(value + 1);
         flag = true;
         break;
 
       case 'PageDown':
-        this.moveSliderTo(value - 1);
+        this.moveSliderTo(value - 2);
         flag = true;
         break;
 
       case 'PageUp':
-        this.moveSliderTo(value + 1);
+        this.moveSliderTo(value + 2);
         flag = true;
         break;
 
       case 'Home':
-        this.moveSliderTo(valueMin);
+        this.moveSliderTo(this.valueMin + 1);
         flag = true;
         break;
 
       case 'End':
-        this.moveSliderTo(valueMax);
+        this.moveSliderTo(this.valueMax);
         flag = true;
         break;
 
@@ -222,17 +216,18 @@ class RatingSlider {
     }
   }
 
-  addTotalStarsToRatingLabel() {
+  addTotalCirclesToRatingLabel() {
     let valuetext = this.getValueTextWithMax(this.getValue());
     this.sliderNode.setAttribute('aria-valuetext', valuetext);
   }
 
   onRailClick(event) {
-    var x = this.getSVGPoint(event).x;
-    var min = this.getValueMin();
-    var max = this.getValueMax();
-    var diffX = x - this.starsX;
-    var value = Math.round((2 * (diffX * (max - min))) / this.starsWidth) / 2;
+    const x = this.getSVGPoint(event).x;
+    const diffX = x - this.railOffset;
+    const fract =
+      0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
+    const value = Math.round(fract);
+
     this.moveSliderTo(value);
 
     event.preventDefault();
@@ -254,11 +249,12 @@ class RatingSlider {
 
   onPointerMove(event) {
     if (this.isMoving) {
-      var x = this.getSVGPoint(event).x;
-      var min = this.getValueMin();
-      var max = this.getValueMax();
-      var diffX = x - this.starsX;
-      var value = Math.round((2 * (diffX * (max - min))) / this.starsWidth) / 2;
+      const x = this.getSVGPoint(event).x;
+      const diffX = x - this.railOffset;
+      const fract =
+        0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
+      const value = Math.round(fract);
+
       this.moveSliderTo(value);
 
       event.preventDefault();

From 90f2ce2f575f4b3ba5e337fba438753374027873 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sat, 7 Oct 2023 13:39:56 +0000
Subject: [PATCH 02/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md | 42 +++++++++----------
 _external/aria-practices                      |  2 +-
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 01136866f..ba34c1498 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 6 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 7 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -110,13 +110,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   >
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
-          This rating widget employs a slider because the slider pattern supports step values of any size.
-          This particular input enables half-star steps.
-          A typical five-star rating widget that allows only five possible values could instead be implemented as a <a href="../../../radio/">radio group.</a>
+          This rating widget employs a slider because number of rating values.
+          
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a eleve point rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -204,11 +203,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             To ensure assistive technology users correctly perceive the maximum slider value, this example uses the <code>aria-valuetext</code> property to communicate both the current and maximum values.
             However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in <code>aria-valuetext</code> only when the slider is initialized and when the thumb loses keyboard focus.
           </li>
-          <li>To highlight the interactive nature of the rating stars, a focus ring appears around the group of stars when the thumb has focus.</li>
+          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the thumb has focus and no rating value has been selected.</li>
           <li>
-            To ensure the borders of the stars and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the star borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>polygon</code> element.
-            To enable the high contrast background color to be the used as the contrasting color when a star is not fully or partially filled, the <code>fill-opacity</code> attribute of the <code>polygon</code> is set to zero.
+            To ensure the borders of the circles and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
+            For example, the color of the circle borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>polygon</code> element.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
@@ -227,41 +225,41 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <tbody>
             <tr data-test-id="key-right-arrow">
               <th><kbd>Right Arrow</kbd></th>
-              <td>Increases slider one half star.</td>
+              <td>Increases slider by one rating step.</td>
             </tr>
             <tr data-test-id="key-up-arrow">
               <th><kbd>Up Arrow</kbd></th>
-              <td>Increases slider one half star.</td>
+              <td>Increases slider by one rating step.</td>
             </tr>
             <tr data-test-id="key-left-arrow">
               <th><kbd>Left Arrow</kbd></th>
-              <td>Decreases slider one half star.</td>
+              <td>Decreases slider by one rating step.</td>
             </tr>
             <tr data-test-id="key-down-arrow">
               <th><kbd>Down Arrow</kbd></th>
-              <td>Decreases slider one half star.</td>
+              <td>Decreases slider by one rating step.</td>
             </tr>
             <tr data-test-id="key-page-up">
               <th><kbd>Page Up</kbd></th>
               <td>
                 Increases slider value multiple steps.
-                In this slider, jumps one star.
+                In this slider, by two rating step.
               </td>
             </tr>
             <tr data-test-id="key-page-down">
               <th><kbd>Page Down</kbd></th>
               <td>
                 Decreases slider value multiple steps.
-                In this slider, jumps one star.
+                In this slider, by two rating step.
               </td>
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value, no stars.</td>
+              <td>Sets slider to its minimum value, unaccpetable.</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value, five stars.</td>
+              <td>Sets slider to its maximum value, completely satisified.</td>
             </tr>
           </tbody>
         </table></div>
@@ -307,7 +305,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <tr data-test-id="aria-valuemax">
               <td></td>
               <th scope="row">
-                <code>aria-valuemax="5"</code>
+                <code>aria-valuemax="10"</code>
               </th>
               <td>
                 <code>div</code>
@@ -317,12 +315,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <tr data-test-id="aria-valuemin">
               <td></td>
               <th scope="row">
-                <code>aria-valuemin="0"</code>
+                <code>aria-valuemin="-1"</code>
               </th>
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.</td>
+              <td>Specifies the minimum value of the slider.  NOTE: -1 means no rating value has been selected.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
@@ -344,8 +342,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </td>
               <td>
                 <ul>
-                  <li>A string value that provides a user-friendly name for the current value of the slider -- the number of stars and half stars.</li>
-                  <li>When initialized, and when the slider loses focus, the string also includes the maximum value of five stars, e.g., <q>3 of 5 stars</q>.</li>
+                  <li>A string value that provides a user-friendly name for the current value of the slider -- the level of satisfaction.</li>
+                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seventh of eleven point rating scale</q>.</li>
                 </ul>
               </td>
             </tr>
diff --git a/_external/aria-practices b/_external/aria-practices
index 452abe0ce..a93b18286 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 452abe0ce361e9f9d2a36a860a2e08b8e1911c94
+Subproject commit a93b182865ec2b66ccea56df84967e39a64bd832

From d6fb6537bff0656bfcc2a2fa14896c49ed7f853f Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sat, 7 Oct 2023 13:48:55 +0000
Subject: [PATCH 03/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 2 +-
 _external/aria-practices                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index ba34c1498..3e1604936 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -320,7 +320,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  NOTE: -1 means no rating value has been selected.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: -1 means no rating value has been selected.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
diff --git a/_external/aria-practices b/_external/aria-practices
index a93b18286..578f97ffe 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit a93b182865ec2b66ccea56df84967e39a64bd832
+Subproject commit 578f97ffefa533c4facf7f55b57c332247d356d8

From cc727a855b6c4dad737a504623a8a57fb24f47be Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:19:07 +0000
Subject: [PATCH 04/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md | 64 +++++++++++--------
 _external/aria-practices                      |  2 +-
 .../slider/examples/css/slider-rating.css     |  8 +++
 .../slider/examples/js/slider-rating.js       |  4 +-
 4 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 3e1604936..0579d22f4 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -142,53 +142,65 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               aria-labelledby="id-rating-label">
             
 
-            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="342" height="48">
-              <rect class="focus-ring" x="2" y="2" width="338" height="36" rx="5" ></rect>
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="382" height="92">
+              <rect class="focus-ring" x="2" y="2" width="378" height="90" rx="5" ></rect>
               <g class="rating-0">
-                <circle class="value" cx="20" cy="20" r="10"></circle>
-                <circle class="focus" cx="20" cy="20" r="14"></circle>
-                <text x="15" y="48">0</text>
+                <circle class="value" cx="40" cy="20" r="10"></circle>
+                <circle class="focus" cx="40" cy="20" r="14"></circle>
+                <text class="label" x="36" y="50">0</text>
+                <text class="description"  x="0" y="65">Unacceptable</text>
               </g>
               <g class="rating-1">
-                <circle class="value" cx="50" cy="20" r="10"></circle>
-                <circle class="focus" cx="50" cy="20" r="14"></circle>
-                <text x="45" y="48">1</text>
+                <circle class="value" cx="70" cy="20" r="10"></circle>
+                <circle class="focus" cx="70" cy="20" r="14"></circle>
+                <text class="label" x="66" y="50">1</text>
               </g>
               <g class="rating-2">
-                <circle class="value" cx="80" cy="20" r="10"></circle>
-                <circle class="focus" cx="80" cy="20" r="14"></circle>
+                <circle class="value" cx="100" cy="20" r="10"></circle>
+                <circle class="focus" cx="100" cy="20" r="14"></circle>
+                <text class="label" x="96" y="50">2</text>
               </g>
               <g class="rating-3">
-                <circle class="value" cx="110" cy="20" r="10"></circle>
-                <circle class="focus" cx="110" cy="20" r="14"></circle>
+                <circle class="value" cx="130" cy="20" r="10"></circle>
+                <circle class="focus" cx="130" cy="20" r="14"></circle>
+                <text class="label" x="126" y="50">3</text>
               </g>
               <g class="rating-4">
-                <circle class="value" cx="140" cy="20" r="10"></circle>
-                <circle class="focus" cx="140" cy="20" r="14"></circle>
+                <circle class="value" cx="160" cy="20" r="10"></circle>
+                <circle class="focus" cx="160" cy="20" r="14"></circle>
+                <text class="label" x="156" y="50">4</text>
               </g>
               <g class="rating-5">
-                <circle class="value" cx="170" cy="20" r="10"></circle>
-                <circle class="focus" cx="170" cy="20" r="14"></circle>
+                <circle class="value" cx="190" cy="20" r="10"></circle>
+                <circle class="focus" cx="190" cy="20" r="14"></circle>
+                <text class="label" x="186" y="50">5</text>
               </g>
               <g class="rating-6">
-                <circle class="value" cx="200" cy="20" r="10"></circle>
-                <circle class="focus" cx="200" cy="20" r="14"></circle>
+                <circle class="value" cx="220" cy="20" r="10"></circle>
+                <circle class="focus" cx="220" cy="20" r="14"></circle>
+                <text class="label" x="216" y="50">6</text>
               </g>
               <g class="rating-7">
-                <circle class="value" cx="230" cy="20" r="10"></circle>
-                <circle class="focus" cx="230" cy="20" r="14"></circle>
+                <circle class="value" cx="250" cy="20" r="10"></circle>
+                <circle class="focus" cx="250" cy="20" r="14"></circle>
+                <text class="label" x="246" y="50">7</text>
               </g>
               <g class="rating-8">
-                <circle class="value" cx="260" cy="20" r="10"></circle>
-                <circle class="focus" cx="260" cy="20" r="14"></circle>
+                <circle class="value" cx="280" cy="20" r="10"></circle>
+                <circle class="focus" cx="280" cy="20" r="14"></circle>
+                <text class="label" x="276" y="50">8</text>
               </g>
               <g class="rating-9">
-                <circle class="value" cx="290" cy="20" r="10"></circle>
-                <circle class="focus" cx="290" cy="20" r="14"></circle>
+                <circle class="value" cx="310" cy="20" r="10"></circle>
+                <circle class="focus" cx="310" cy="20" r="14"></circle>
+                <text class="label" x="306" y="50">9</text>
                </g>
               <g class="rating-10">
-                <circle class="value" cx="320" cy="20" r="10"></circle>
-                <circle class="focus" cx="320" cy="20" r="14"></circle>
+                <circle class="value" cx="340" cy="20" r="10"></circle>
+                <circle class="focus" cx="340" cy="20" r="14"></circle>
+                <text class="label" x="332" y="50">10</text>
+                <text class="description"  x="310" y="65">Completely</text>
+                <text class="description"  x="315" y="80">Satisified</text>
                </g>
             </svg>
           </div>
diff --git a/_external/aria-practices b/_external/aria-practices
index 578f97ffe..fe20292fd 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 578f97ffefa533c4facf7f55b57c332247d356d8
+Subproject commit fe20292fddcf0d58913f7024bde4dcfb2ef057e2
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 182d1e7b6..0ffb12627 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -25,6 +25,14 @@
   fill-opacity: 0;
 }
 
+.rating-slider svg .label {
+  font-size: 90%;
+}
+
+.rating-slider svg .description {
+  font-size: 90%;
+}
+
 .rating-slider[aria-valuenow="0"] svg .rating-0 .value {
   fill: currentcolor;
   fill-opacity: 1;
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index d332e2c44..d108a2f30 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -170,8 +170,8 @@ class RatingSlider {
   }
 
   onSliderKeydown(event) {
-    var flag = false;
-    var value = this.getValue();
+    let flag = false;
+    let value = this.getValue();
 
     switch (event.key) {
       case 'ArrowLeft':

From 94f429f172f5c11468eec791c6703aaa5dffde1c Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:29:03 +0000
Subject: [PATCH 05/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 14 +++++++-------
 _external/aria-practices                           |  2 +-
 .../patterns/slider/examples/js/slider-rating.js   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 0579d22f4..f6c25634e 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 7 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 8 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -218,7 +218,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the thumb has focus and no rating value has been selected.</li>
           <li>
             To ensure the borders of the circles and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the circle borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>polygon</code> element.
+            For example, the color of the circle borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>circle</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
@@ -255,23 +255,23 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <th><kbd>Page Up</kbd></th>
               <td>
                 Increases slider value multiple steps.
-                In this slider, by two rating step.
+                In this slider, by two rating steps.
               </td>
             </tr>
             <tr data-test-id="key-page-down">
               <th><kbd>Page Down</kbd></th>
               <td>
                 Decreases slider value multiple steps.
-                In this slider, by two rating step.
+                In this slider, by two rating steps.
               </td>
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value, unaccpetable.</td>
+              <td>Sets slider to its minimum value, unacceptable.</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value, completely satisified.</td>
+              <td>Sets slider to its maximum value, completely satisfied.</td>
             </tr>
           </tbody>
         </table></div>
@@ -332,7 +332,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  <br>NOTE: -1 means no rating value has been selected.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: -1 identifies the slider as having no rating value selected.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
diff --git a/_external/aria-practices b/_external/aria-practices
index fe20292fd..85dae4682 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit fe20292fddcf0d58913f7024bde4dcfb2ef057e2
+Subproject commit 85dae4682cbadbefcb7fc8c902f5590fb482d790
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index d108a2f30..afa1b2fce 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -79,7 +79,7 @@ class RatingSlider {
         return 'no rating selected';
 
       case 0:
-        return 'Unacceptable service';
+        return 'Unacceptable';
 
       case 1:
         return 'Extremely dissatisfied';
@@ -124,7 +124,7 @@ class RatingSlider {
         return 'no rating on the 11 point rating scale selected';
 
       case 0:
-        return 'Unacceptable service, first of eleven point rating scale';
+        return 'Unacceptable, first of eleven point rating scale';
 
       case 1:
         return 'Extremely dissatisfied, second of eleven point rating scale';

From adb30da4476db9664cc826b2bdc57cb029342d58 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:35:26 +0000
Subject: [PATCH 06/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 3 +--
 _external/aria-practices                           | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index f6c25634e..9626707cc 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -110,8 +110,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   >
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
-          This rating widget employs a slider because number of rating values.
-          
+          This rating widget employs a slider because number of rating values, in general when there are more than seven choices consider using the slider pattern.
         </p>
         <p>Similar examples include:</p>
         <ul>
diff --git a/_external/aria-practices b/_external/aria-practices
index 85dae4682..bf46ad4ce 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 85dae4682cbadbefcb7fc8c902f5590fb482d790
+Subproject commit bf46ad4ce9fc03cd6e560ead91a337388d5ff8d3

From 6f0350762c9175be7ee36dde4f1b05c8495bd513 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Sun, 8 Oct 2023 23:51:22 +0000
Subject: [PATCH 07/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md            | 4 ++--
 _external/aria-practices                                      | 2 +-
 .../patterns/slider/examples/js/slider-rating.js              | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 9626707cc..6de77c9d3 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -114,7 +114,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a eleve point rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a eleven point rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -199,7 +199,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                 <circle class="focus" cx="340" cy="20" r="14"></circle>
                 <text class="label" x="332" y="50">10</text>
                 <text class="description"  x="310" y="65">Completely</text>
-                <text class="description"  x="315" y="80">Satisified</text>
+                <text class="description"  x="315" y="80">Satisfied</text>
                </g>
             </svg>
           </div>
diff --git a/_external/aria-practices b/_external/aria-practices
index bf46ad4ce..cf6754012 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit bf46ad4ce9fc03cd6e560ead91a337388d5ff8d3
+Subproject commit cf6754012dbcbb169a579d16413e539a5c9df121
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index afa1b2fce..de36c781b 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -224,9 +224,9 @@ class RatingSlider {
   onRailClick(event) {
     const x = this.getSVGPoint(event).x;
     const diffX = x - this.railOffset;
-    const fract =
+    const rating =
       0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
-    const value = Math.round(fract);
+    const value = Math.round(rating);
 
     this.moveSliderTo(value);
 

From edc63517a88929b0cbedd33d0bf94779193afb93 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Mon, 9 Oct 2023 00:23:42 +0000
Subject: [PATCH 08/41] Commit changed files and submodule updates

---
 _external/aria-practices                                      | 2 +-
 .../patterns/slider/examples/js/slider-rating.js              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index cf6754012..4efd6719c 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit cf6754012dbcbb169a579d16413e539a5c9df121
+Subproject commit 4efd6719c73fa0ad3b68222906681c759afd404e
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index de36c781b..eda168f08 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -251,9 +251,9 @@ class RatingSlider {
     if (this.isMoving) {
       const x = this.getSVGPoint(event).x;
       const diffX = x - this.railOffset;
-      const fract =
+      const rating =
         0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
-      const value = Math.round(fract);
+      const value = Math.round(rating);
 
       this.moveSliderTo(value);
 

From 46943bd280454330949a9e0ade667c8d1dd53cbe Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Mon, 9 Oct 2023 01:17:30 +0000
Subject: [PATCH 09/41] Commit changed files and submodule updates

---
 _external/aria-practices                           |  2 +-
 .../patterns/slider/examples/js/slider-rating.js   | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 4efd6719c..e9ed9a1ce 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 4efd6719c73fa0ad3b68222906681c759afd404e
+Subproject commit e9ed9a1cec0fb250007595a6bcc19d0b673a7611
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index eda168f08..0a1f83587 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -20,8 +20,8 @@ class RatingSlider {
     //    var  color = getComputedStyle(this.sliderNode).color;
     //    this.svgNode.setAttribute('color', color);
 
-    this.railWidth = 360;
-    this.railOffset = 20;
+    this.railWidth = 300;
+    this.railOffset = 30;
 
     this.valueMin = this.getValueMin();
     this.valueMax = this.getValueMax();
@@ -224,9 +224,8 @@ class RatingSlider {
   onRailClick(event) {
     const x = this.getSVGPoint(event).x;
     const diffX = x - this.railOffset;
-    const rating =
-      0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
-    const value = Math.round(rating);
+    const rating = (diffX * this.valueMax) / this.railWidth;
+    const value = Math.floor(rating);
 
     this.moveSliderTo(value);
 
@@ -251,9 +250,8 @@ class RatingSlider {
     if (this.isMoving) {
       const x = this.getSVGPoint(event).x;
       const diffX = x - this.railOffset;
-      const rating =
-        0.5 + (diffX * (this.valueMax - this.valueMin)) / this.railWidth;
-      const value = Math.round(rating);
+      const rating = (diffX * this.valueMax) / this.railWidth;
+      const value = Math.floor(rating);
 
       this.moveSliderTo(value);
 

From 95415ccae165fe8238d46496b54cda88e75ad11f Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:03:31 +0000
Subject: [PATCH 10/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md | 86 +++++++++----------
 _external/aria-practices                      |  2 +-
 .../slider/examples/css/slider-rating.css     | 11 +--
 .../slider/examples/js/slider-rating.js       | 50 +++++------
 4 files changed, 65 insertions(+), 84 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 6de77c9d3..210790261 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 8 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 10 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -128,78 +128,74 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
-          <div id="id-rating-label" class="label">On a scale of 0-10, rate your satisfaction with the service you received?</div>
+          <div id="id-rating-label" class="label">Rate your satisfaction with the service you received?</div>
 
           <div id="id-rating"
                class="rating-slider"
                role="slider"
                tabindex="0"
-               aria-valuemin="-1"
-               aria-valuenow="-1"
+               aria-valuemin="0"
+               aria-valuenow="0"
                aria-valuemax="10"
-               aria-valuetext="no rating on the 11 point rating scale selected"
+               aria-valuetext="no rating on the 10 point satisfaction scale selected"
               aria-labelledby="id-rating-label">
             
 
-            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="382" height="92">
-              <rect class="focus-ring" x="2" y="2" width="378" height="90" rx="5" ></rect>
-              <g class="rating-0">
-                <circle class="value" cx="40" cy="20" r="10"></circle>
-                <circle class="focus" cx="40" cy="20" r="14"></circle>
-                <text class="label" x="36" y="50">0</text>
-                <text class="description"  x="0" y="65">Unacceptable</text>
-              </g>
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="386" height="96">
+              <rect class="focus-ring" x="23" y="2" width="358" height="90" rx="5" ></rect>
               <g class="rating-1">
-                <circle class="value" cx="70" cy="20" r="10"></circle>
-                <circle class="focus" cx="70" cy="20" r="14"></circle>
-                <text class="label" x="66" y="50">1</text>
+                <circle class="value" cx="66" cy="20" r="10"></circle>
+                <circle class="focus" cx="66" cy="20" r="14"></circle>
+                <text class="label" x="62" y="50">1</text>
+                <text class="description"  x="34" y="65">Extremely</text>
+                <text class="description"  x="31" y="80">Unsatisfied</text>
               </g>
               <g class="rating-2">
-                <circle class="value" cx="100" cy="20" r="10"></circle>
-                <circle class="focus" cx="100" cy="20" r="14"></circle>
-                <text class="label" x="96" y="50">2</text>
+                <circle class="value" cx="96" cy="20" r="10"></circle>
+                <circle class="focus" cx="96" cy="20" r="14"></circle>
+                <text class="label" x="92" y="50">2</text>
               </g>
               <g class="rating-3">
-                <circle class="value" cx="130" cy="20" r="10"></circle>
-                <circle class="focus" cx="130" cy="20" r="14"></circle>
-                <text class="label" x="126" y="50">3</text>
+                <circle class="value" cx="126" cy="20" r="10"></circle>
+                <circle class="focus" cx="126" cy="20" r="14"></circle>
+                <text class="label" x="120" y="50">3</text>
               </g>
               <g class="rating-4">
-                <circle class="value" cx="160" cy="20" r="10"></circle>
-                <circle class="focus" cx="160" cy="20" r="14"></circle>
-                <text class="label" x="156" y="50">4</text>
+                <circle class="value" cx="156" cy="20" r="10"></circle>
+                <circle class="focus" cx="156" cy="20" r="14"></circle>
+                <text class="label" x="152" y="50">4</text>
               </g>
               <g class="rating-5">
-                <circle class="value" cx="190" cy="20" r="10"></circle>
-                <circle class="focus" cx="190" cy="20" r="14"></circle>
-                <text class="label" x="186" y="50">5</text>
+                <circle class="value" cx="186" cy="20" r="10"></circle>
+                <circle class="focus" cx="186" cy="20" r="14"></circle>
+                <text class="label" x="182" y="50">5</text>
               </g>
               <g class="rating-6">
-                <circle class="value" cx="220" cy="20" r="10"></circle>
-                <circle class="focus" cx="220" cy="20" r="14"></circle>
-                <text class="label" x="216" y="50">6</text>
+                <circle class="value" cx="216" cy="20" r="10"></circle>
+                <circle class="focus" cx="216" cy="20" r="14"></circle>
+                <text class="label" x="212" y="50">6</text>
               </g>
               <g class="rating-7">
-                <circle class="value" cx="250" cy="20" r="10"></circle>
-                <circle class="focus" cx="250" cy="20" r="14"></circle>
-                <text class="label" x="246" y="50">7</text>
+                <circle class="value" cx="246" cy="20" r="10"></circle>
+                <circle class="focus" cx="246" cy="20" r="14"></circle>
+                <text class="label" x="242" y="50">7</text>
               </g>
               <g class="rating-8">
-                <circle class="value" cx="280" cy="20" r="10"></circle>
-                <circle class="focus" cx="280" cy="20" r="14"></circle>
-                <text class="label" x="276" y="50">8</text>
+                <circle class="value" cx="276" cy="20" r="10"></circle>
+                <circle class="focus" cx="276" cy="20" r="14"></circle>
+                <text class="label" x="272" y="50">8</text>
               </g>
               <g class="rating-9">
-                <circle class="value" cx="310" cy="20" r="10"></circle>
-                <circle class="focus" cx="310" cy="20" r="14"></circle>
-                <text class="label" x="306" y="50">9</text>
+                <circle class="value" cx="306" cy="20" r="10"></circle>
+                <circle class="focus" cx="306" cy="20" r="14"></circle>
+                <text class="label" x="302" y="50">9</text>
                </g>
               <g class="rating-10">
-                <circle class="value" cx="340" cy="20" r="10"></circle>
-                <circle class="focus" cx="340" cy="20" r="14"></circle>
-                <text class="label" x="332" y="50">10</text>
-                <text class="description"  x="310" y="65">Completely</text>
-                <text class="description"  x="315" y="80">Satisfied</text>
+                <circle class="value" cx="336" cy="20" r="10"></circle>
+                <circle class="focus" cx="336" cy="20" r="14"></circle>
+                <text class="label" x="328" y="50">10</text>
+                <text class="description"  x="306" y="65">Extremely</text>
+                <text class="description"  x="311" y="80">Satisfied</text>
                </g>
             </svg>
           </div>
diff --git a/_external/aria-practices b/_external/aria-practices
index e9ed9a1ce..88d127750 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit e9ed9a1cec0fb250007595a6bcc19d0b673a7611
+Subproject commit 88d127750614d719c667d57933daab8a1edcd80b
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 0ffb12627..990c4d061 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -33,11 +33,6 @@
   font-size: 90%;
 }
 
-.rating-slider[aria-valuenow="0"] svg .rating-0 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
 .rating-slider[aria-valuenow="1"] svg .rating-1 .value {
   fill: currentcolor;
   fill-opacity: 1;
@@ -100,15 +95,11 @@
   fill-opacity: 0;
 }
 
-.rating-slider[aria-valuenow="-1"]:focus svg .focus-ring {
+.rating-slider[aria-valuenow="0"]:focus svg .focus-ring {
   stroke-width: 2px;
   stroke: currentcolor;
 }
 
-.rating-slider[aria-valuenow="0"]:focus svg .rating-0 .focus {
-  stroke-width: 2px;
-}
-
 .rating-slider[aria-valuenow="1"]:focus svg .rating-1 .focus {
   stroke-width: 2px;
 }
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 0a1f83587..61c6a1f7e 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -75,41 +75,38 @@ class RatingSlider {
 
   getValueText(value) {
     switch (value) {
-      case -1:
-        return 'no rating selected';
-
       case 0:
-        return 'Unacceptable';
+        return 'no satisfaction rating selected';
 
       case 1:
-        return 'Extremely dissatisfied';
+        return 'one, extremely dissatisfied';
 
       case 2:
-        return 'Strongly dissatisfied';
+        return 'two';
 
       case 3:
-        return 'dissatisfied';
+        return 'three';
 
       case 4:
-        return 'Slightly dissatisfied';
+        return 'four';
 
       case 5:
-        return 'Neither satisfied or dissatisfied';
+        return 'five';
 
       case 6:
-        return 'Slightly satisfied';
+        return 'six';
 
       case 7:
-        return 'Satisfied';
+        return 'seven';
 
       case 8:
-        return 'Strongly satisfied';
+        return 'eight';
 
       case 9:
-        return 'Extremely satisfied';
+        return 'nine';
 
       case 10:
-        return 'Completely satisfied';
+        return 'ten, extremely satisfied';
 
       default:
         break;
@@ -120,41 +117,38 @@ class RatingSlider {
 
   getValueTextWithMax(value) {
     switch (value) {
-      case -1:
-        return 'no rating on the 11 point rating scale selected';
-
       case 0:
-        return 'Unacceptable, first of eleven point rating scale';
+        return 'no rating on the 10 point satisfaction scale selected';
 
       case 1:
-        return 'Extremely dissatisfied, second of eleven point rating scale';
+        return 'one, extremely unsatisfied, first value on ten point satisfaction scale';
 
       case 2:
-        return 'Strongly dissatisfied, third of eleven point rating scale';
+        return 'two, second value on ten point satisfaction scale';
 
       case 3:
-        return 'dissatisfied, fourth of eleven point rating scale';
+        return 'three, third value on ten point satisfaction scale';
 
       case 4:
-        return 'Slightly dissatisfied, fifth of eleven point rating scale';
+        return 'four, fourth value on ten point satisfaction scale';
 
       case 5:
-        return 'Neither satisfied or dissatisfied, sixth of eleven point rating scale';
+        return 'five, fifth value on ten point satisfaction scale';
 
       case 6:
-        return 'Slightly satisfied, seventh of eleven point rating scale';
+        return 'six, sixth value on ten point satisfaction scale';
 
       case 7:
-        return 'Satisfied, eighth of eleven point rating scale';
+        return 'seven, seventh value on ten point satisfaction scale';
 
       case 8:
-        return 'Strongly satisfied, ninth of eleven point rating scale';
+        return 'eight, eighth value on ten point satisfaction scale';
 
       case 9:
-        return 'Extremely satisfied, tenth of eleven point rating scale';
+        return 'nine, ninth value on ten point satisfaction scale';
 
       case 10:
-        return 'Completely satisfied, eleventh of eleven point rating scale';
+        return 'ten, extremely satisfied, tenth value on ten point satisfaction scale';
 
       default:
         break;

From 984f9b0c6ae67755d37a0858e717b29892b15218 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:29:42 +0000
Subject: [PATCH 11/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 6 +++---
 _external/aria-practices                           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 210790261..2348f84a2 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -114,7 +114,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a eleven point rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a ten point satisfaction rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -327,7 +327,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  <br>NOTE: -1 identifies the slider as having no rating value selected.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 identifies the slider as having no rating value selected.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
@@ -350,7 +350,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <ul>
                   <li>A string value that provides a user-friendly name for the current value of the slider -- the level of satisfaction.</li>
-                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seventh of eleven point rating scale</q>.</li>
+                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seven, seventh value on ten point satisfaction scale</q>.</li>
                 </ul>
               </td>
             </tr>
diff --git a/_external/aria-practices b/_external/aria-practices
index 88d127750..bf97468b9 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 88d127750614d719c667d57933daab8a1edcd80b
+Subproject commit bf97468b99bcb841105bc4eda941529f65df86f8

From 430c525034b0ce8c8f0854620495d4ec324965ad Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:44:48 +0000
Subject: [PATCH 12/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 2 +-
 _external/aria-practices                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 2348f84a2..38ec82c0c 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -322,7 +322,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <tr data-test-id="aria-valuemin">
               <td></td>
               <th scope="row">
-                <code>aria-valuemin="-1"</code>
+                <code>aria-valuemin="0"</code>
               </th>
               <td>
                 <code>div</code>
diff --git a/_external/aria-practices b/_external/aria-practices
index bf97468b9..81989a505 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit bf97468b99bcb841105bc4eda941529f65df86f8
+Subproject commit 81989a505f21a21f262ddd46f0265b3e31413149

From ef3a22f16d4868cbfccc922cf59a55c173945987 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 11 Oct 2023 19:57:08 +0000
Subject: [PATCH 13/41] Commit changed files and submodule updates

---
 _external/aria-practices                                     | 2 +-
 .../patterns/slider/examples/css/slider-rating.css           | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 81989a505..c3ad48c9d 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 81989a505f21a21f262ddd46f0265b3e31413149
+Subproject commit c3ad48c9dcef2fcdd12efd92c947fcde62dc8bd2
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 990c4d061..2d31883d2 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -85,8 +85,9 @@
 
 /* focus styling */
 
-.rating-slider:focus {
-  outline: none;
+.rating-slider:focus,
+.rating-slider:focus-visible {
+  outline: none !important;
 }
 
 .rating-slider svg .focus {

From 00fba112630ab0d4173b4b2d65929c17b9444c42 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Thu, 19 Oct 2023 20:14:50 +0000
Subject: [PATCH 14/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md |  88 ++++++-------
 _external/aria-practices                      |   2 +-
 .../slider/examples/css/slider-rating.css     |  91 +------------
 .../slider/examples/js/slider-rating.js       | 121 ++++++++++++++++--
 4 files changed, 158 insertions(+), 144 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 38ec82c0c..ce0d843a5 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 10 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -141,61 +141,49 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               aria-labelledby="id-rating-label">
             
 
-            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="386" height="96">
-              <rect class="focus-ring" x="23" y="2" width="358" height="90" rx="5" ></rect>
-              <g class="rating-1">
-                <circle class="value" cx="66" cy="20" r="10"></circle>
-                <circle class="focus" cx="66" cy="20" r="14"></circle>
-                <text class="label" x="62" y="50">1</text>
-                <text class="description"  x="34" y="65">Extremely</text>
-                <text class="description"  x="31" y="80">Unsatisfied</text>
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="520" height="96">
+              <rect class="focus-ring" x="23" y="2" width="54" height="90" rx="5" ></rect>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="13" y="30"></rect>
+                <text class="label" x="32" y="47">1</text>
+                <text class="description"  x="13" y="20">Extremely Unsatisfied</text>
               </g>
-              <g class="rating-2">
-                <circle class="value" cx="96" cy="20" r="10"></circle>
-                <circle class="focus" cx="96" cy="20" r="14"></circle>
-                <text class="label" x="92" y="50">2</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="61" y="30"></rect>
+                <text class="label" x="80" y="47">2</text>
               </g>
-              <g class="rating-3">
-                <circle class="value" cx="126" cy="20" r="10"></circle>
-                <circle class="focus" cx="126" cy="20" r="14"></circle>
-                <text class="label" x="120" y="50">3</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="109" y="30"></rect>
+                <text class="label" x="128" y="47">3</text>
               </g>
-              <g class="rating-4">
-                <circle class="value" cx="156" cy="20" r="10"></circle>
-                <circle class="focus" cx="156" cy="20" r="14"></circle>
-                <text class="label" x="152" y="50">4</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="157" y="30"></rect>
+                <text class="label" x="176" y="47">4</text>
               </g>
-              <g class="rating-5">
-                <circle class="value" cx="186" cy="20" r="10"></circle>
-                <circle class="focus" cx="186" cy="20" r="14"></circle>
-                <text class="label" x="182" y="50">5</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="205" y="30"></rect>
+                <text class="label" x="224" y="47">5</text>
               </g>
-              <g class="rating-6">
-                <circle class="value" cx="216" cy="20" r="10"></circle>
-                <circle class="focus" cx="216" cy="20" r="14"></circle>
-                <text class="label" x="212" y="50">6</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="253" y="30"></rect>
+                <text class="label" x="272" y="47">6</text>
               </g>
-              <g class="rating-7">
-                <circle class="value" cx="246" cy="20" r="10"></circle>
-                <circle class="focus" cx="246" cy="20" r="14"></circle>
-                <text class="label" x="242" y="50">7</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="301" y="30"></rect>
+                <text class="label" x="320" y="47">7</text>
               </g>
-              <g class="rating-8">
-                <circle class="value" cx="276" cy="20" r="10"></circle>
-                <circle class="focus" cx="276" cy="20" r="14"></circle>
-                <text class="label" x="272" y="50">8</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="349" y="30"></rect>
+                <text class="label" x="368" y="47">8</text>
               </g>
-              <g class="rating-9">
-                <circle class="value" cx="306" cy="20" r="10"></circle>
-                <circle class="focus" cx="306" cy="20" r="14"></circle>
-                <text class="label" x="302" y="50">9</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="397" y="30"></rect>
+                <text class="label" x="416" y="47">9</text>
                </g>
-              <g class="rating-10">
-                <circle class="value" cx="336" cy="20" r="10"></circle>
-                <circle class="focus" cx="336" cy="20" r="14"></circle>
-                <text class="label" x="328" y="50">10</text>
-                <text class="description"  x="306" y="65">Extremely</text>
-                <text class="description"  x="311" y="80">Satisfied</text>
+              <g class="rating">
+                <rect class="value" height="24" width="48" x="445" y="30"></rect>
+                <text class="label" x="458" y="47">10</text>
+                <text class="description"  x="369" y="20">Extremely Satisfied</text>
                </g>
             </svg>
           </div>
@@ -210,10 +198,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             To ensure assistive technology users correctly perceive the maximum slider value, this example uses the <code>aria-valuetext</code> property to communicate both the current and maximum values.
             However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in <code>aria-valuetext</code> only when the slider is initialized and when the thumb loses keyboard focus.
           </li>
-          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the thumb has focus and no rating value has been selected.</li>
+          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
           <li>
-            To ensure the borders of the circles and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the circle borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>circle</code> and <code>text</code> elements.
+            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
+            For example, the color of the rating value borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>rect</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
diff --git a/_external/aria-practices b/_external/aria-practices
index c3ad48c9d..34b491d5d 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit c3ad48c9dcef2fcdd12efd92c947fcde62dc8bd2
+Subproject commit 34b491d5dfb976c51ecb8a8ffde5466a798e74ac
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 2d31883d2..6f9063ea1 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -27,60 +27,21 @@
 
 .rating-slider svg .label {
   font-size: 90%;
+  color: white;
 }
 
 .rating-slider svg .description {
   font-size: 90%;
 }
 
-.rating-slider[aria-valuenow="1"] svg .rating-1 .value {
+.rating-slider svg .current .value {
   fill: currentcolor;
   fill-opacity: 1;
 }
 
-.rating-slider[aria-valuenow="2"] svg .rating-2 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="3"] svg .rating-3 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="4"] svg .rating-4 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="5"] svg .rating-5 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="6"] svg .rating-6 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="7"] svg .rating-7 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="8"] svg .rating-8 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="9"] svg .rating-9 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
-}
-
-.rating-slider[aria-valuenow="10"] svg .rating-10 .value {
-  fill: currentcolor;
-  fill-opacity: 1;
+.rating-slider svg .current .label {
+  fill: white;
+  font-weight: bold;
 }
 
 /* focus styling */
@@ -96,47 +57,7 @@
   fill-opacity: 0;
 }
 
-.rating-slider[aria-valuenow="0"]:focus svg .focus-ring {
+.rating-slider:focus svg .focus-ring {
   stroke-width: 2px;
   stroke: currentcolor;
 }
-
-.rating-slider[aria-valuenow="1"]:focus svg .rating-1 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="2"]:focus svg .rating-2 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="3"]:focus svg .rating-3 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="4"]:focus svg .rating-4 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="5"]:focus svg .rating-5 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="6"]:focus svg .rating-6 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="7"]:focus svg .rating-7 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="8"]:focus svg .rating-8 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="9"]:focus svg .rating-9 .focus {
-  stroke-width: 2px;
-}
-
-.rating-slider[aria-valuenow="10"]:focus svg .rating-10 .focus {
-  stroke-width: 2px;
-}
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 61c6a1f7e..6b157164e 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -8,6 +8,8 @@
  *   Desc:   RatingSlider widget that implements ARIA Authoring Practices
  */
 
+const OFFSET_SIZE = 4;
+
 class RatingSlider {
   constructor(domNode) {
     this.sliderNode = domNode;
@@ -16,12 +18,37 @@ class RatingSlider {
 
     this.svgNode = domNode.querySelector('svg');
 
-    // Inherit system text colors
-    //    var  color = getComputedStyle(this.sliderNode).color;
-    //    this.svgNode.setAttribute('color', color);
-
-    this.railWidth = 300;
-    this.railOffset = 30;
+    this.ratingRects = Array.from(
+      domNode.querySelectorAll('g.rating rect.value')
+    );
+    this.infoRatingRects = [];
+
+    this.ratingRects.forEach((r) => {
+      const info = {
+        x: parseInt(r.getAttribute('x')),
+        y: parseInt(r.getAttribute('y')),
+        width: parseInt(r.getAttribute('width')),
+        height: parseInt(r.getAttribute('height')),
+        rx: 0,
+      };
+      this.infoRatingRects.push(info);
+    });
+
+    const infoFirstRect = this.infoRatingRects[0];
+    const infoLastRect = this.infoRatingRects[this.infoRatingRects.length - 1];
+
+    this.railOffset = infoFirstRect.x;
+    this.railWidth = infoLastRect.x + infoLastRect.width - infoFirstRect.x;
+
+    this.focusRect = domNode.querySelector('.focus-ring');
+
+    this.infoDefaultFocus = {
+      x: OFFSET_SIZE,
+      y: OFFSET_SIZE,
+      width: infoLastRect.x + infoLastRect.width + OFFSET_SIZE,
+      height: infoFirstRect.y + infoLastRect.height + OFFSET_SIZE,
+      rx: OFFSET_SIZE,
+    };
 
     this.valueMin = this.getValueMin();
     this.valueMax = this.getValueMax();
@@ -52,6 +79,8 @@ class RatingSlider {
       'blur',
       this.addTotalCirclesToRatingLabel.bind(this)
     );
+
+    this.setFocusRing(0);
   }
 
   // Get point in global SVG space
@@ -157,10 +186,86 @@ class RatingSlider {
     return 'Unexpected value: ' + value;
   }
 
+  resetRects() {
+    for (let i = 0; i < this.ratingRects.length; i += 1) {
+      const rect = this.ratingRects[i];
+      const info = this.infoRatingRects[i];
+
+      rect.setAttribute('x', info.x);
+      rect.setAttribute('y', info.y);
+      rect.setAttribute('width', info.width);
+      rect.setAttribute('height', info.height);
+      rect.setAttribute('rx', info.rx);
+
+      rect.parentNode.classList.remove('current');
+    }
+  }
+
+  setSelectedRating(value) {
+    let rect, info;
+
+    const leftValue = value - 1;
+    const rightValue = value + 1;
+
+    if (value > 0) {
+      rect = this.ratingRects[value - 1];
+      info = this.infoRatingRects[value - 1];
+
+      rect.setAttribute('x', info.x - OFFSET_SIZE);
+      rect.setAttribute('y', info.y - OFFSET_SIZE);
+      rect.setAttribute('width', info.width + 2 * OFFSET_SIZE);
+      rect.setAttribute('height', info.height + 2 * OFFSET_SIZE);
+      rect.setAttribute('rx', OFFSET_SIZE);
+
+      rect.parentNode.classList.add('current');
+    }
+
+    if (leftValue > 0) {
+      rect = this.ratingRects[leftValue - 1];
+      info = this.infoRatingRects[leftValue - 1];
+
+      rect.setAttribute('width', info.width - OFFSET_SIZE);
+    }
+
+    if (rightValue <= this.valueMax) {
+      rect = this.ratingRects[rightValue - 1];
+      info = this.infoRatingRects[rightValue - 1];
+
+      rect.setAttribute('x', info.x + OFFSET_SIZE);
+      rect.setAttribute('width', info.width - OFFSET_SIZE);
+    }
+  }
+
+  setFocusRing(value) {
+    const size = 2 * OFFSET_SIZE;
+
+    if (value > 0 && value <= this.valueMax) {
+      const info = this.infoRatingRects[value - 1];
+
+      this.focusRect.setAttribute('x', info.x - size);
+      this.focusRect.setAttribute('y', info.y - size);
+      this.focusRect.setAttribute('width', info.width + 2 * size);
+      this.focusRect.setAttribute('height', info.height + 2 * size);
+      this.focusRect.setAttribute('rx', size);
+    } else {
+      // Set ring around entire control
+
+      this.focusRect.setAttribute('x', this.infoDefaultFocus.x);
+      this.focusRect.setAttribute('y', this.infoDefaultFocus.y);
+      this.focusRect.setAttribute('width', this.infoDefaultFocus.width);
+      this.focusRect.setAttribute('height', this.infoDefaultFocus.height);
+      this.focusRect.setAttribute('rx', this.infoDefaultFocus.rx);
+    }
+  }
+
   moveSliderTo(value) {
     value = Math.min(Math.max(value, this.valueMin + 1), this.valueMax);
     this.sliderNode.setAttribute('aria-valuenow', value);
     this.sliderNode.setAttribute('aria-valuetext', this.getValueText(value));
+
+    this.resetRects();
+    this.setSelectedRating(value);
+    this.setFocusRing(value);
   }
 
   onSliderKeydown(event) {
@@ -219,7 +324,7 @@ class RatingSlider {
     const x = this.getSVGPoint(event).x;
     const diffX = x - this.railOffset;
     const rating = (diffX * this.valueMax) / this.railWidth;
-    const value = Math.floor(rating);
+    const value = Math.ceil(rating);
 
     this.moveSliderTo(value);
 
@@ -245,7 +350,7 @@ class RatingSlider {
       const x = this.getSVGPoint(event).x;
       const diffX = x - this.railOffset;
       const rating = (diffX * this.valueMax) / this.railWidth;
-      const value = Math.floor(rating);
+      const value = Math.ceil(rating);
 
       this.moveSliderTo(value);
 

From c7dd9300002c28f1b17e210671ecfa9b097bc1c1 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:57:50 +0000
Subject: [PATCH 15/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md | 46 +++++++++----------
 _external/aria-practices                      |  2 +-
 _external/data                                |  2 +-
 .../slider/examples/js/slider-rating.js       |  6 +--
 4 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index ce0d843a5..6a91cf300 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 31 October 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -144,46 +144,46 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="520" height="96">
               <rect class="focus-ring" x="23" y="2" width="54" height="90" rx="5" ></rect>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="13" y="30"></rect>
-                <text class="label" x="32" y="47">1</text>
-                <text class="description"  x="13" y="20">Extremely Unsatisfied</text>
+                <rect class="value" height="24" width="34" x="12" y="30"></rect>
+                <text class="label" x="24" y="47">1</text>
+                <text class="description"  x="10" y="20">Extremely Unsatisfied</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="61" y="30"></rect>
-                <text class="label" x="80" y="47">2</text>
+                <rect class="value" height="24" width="34" x="46" y="30"></rect>
+                <text class="label" x="58" y="47">2</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="109" y="30"></rect>
-                <text class="label" x="128" y="47">3</text>
+                <rect class="value" height="24" width="34" x="80" y="30"></rect>
+                <text class="label" x="92" y="47">3</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="157" y="30"></rect>
-                <text class="label" x="176" y="47">4</text>
+                <rect class="value" height="24" width="34" x="114" y="30"></rect>
+                <text class="label" x="126" y="47">4</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="205" y="30"></rect>
-                <text class="label" x="224" y="47">5</text>
+                <rect class="value" height="24" width="34" x="148" y="30"></rect>
+                <text class="label" x="160" y="47">5</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="253" y="30"></rect>
-                <text class="label" x="272" y="47">6</text>
+                <rect class="value" height="24" width="34" x="182" y="30"></rect>
+                <text class="label" x="194" y="47">6</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="301" y="30"></rect>
-                <text class="label" x="320" y="47">7</text>
+                <rect class="value" height="24" width="34" x="216" y="30"></rect>
+                <text class="label" x="228" y="47">7</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="349" y="30"></rect>
-                <text class="label" x="368" y="47">8</text>
+                <rect class="value" height="24" width="34" x="250" y="30"></rect>
+                <text class="label" x="262" y="47">8</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="397" y="30"></rect>
-                <text class="label" x="416" y="47">9</text>
+                <rect class="value" height="24" width="34" x="284" y="30"></rect>
+                <text class="label" x="296" y="47">9</text>
                </g>
               <g class="rating">
-                <rect class="value" height="24" width="48" x="445" y="30"></rect>
-                <text class="label" x="458" y="47">10</text>
-                <text class="description"  x="369" y="20">Extremely Satisfied</text>
+                <rect class="value" height="24" width="34" x="318" y="30"></rect>
+                <text class="label" x="326" y="47">10</text>
+                <text class="description"  x="228" y="20">Extremely Satisfied</text>
                </g>
             </svg>
           </div>
diff --git a/_external/aria-practices b/_external/aria-practices
index 34b491d5d..8e457859d 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 34b491d5dfb976c51ecb8a8ffde5466a798e74ac
+Subproject commit 8e457859d0f70f25c405d71c1d54c4e4af4ac9e4
diff --git a/_external/data b/_external/data
index 966876f60..e27af0986 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 966876f60a55bc3df0f19af41f30f62841da3aa3
+Subproject commit e27af0986b88cdd637ebe9eaca0fbb072a6d4a1e
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 6b157164e..1853f1c75 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -8,7 +8,7 @@
  *   Desc:   RatingSlider widget that implements ARIA Authoring Practices
  */
 
-const OFFSET_SIZE = 4;
+const OFFSET_SIZE = 6;
 
 class RatingSlider {
   constructor(domNode) {
@@ -43,8 +43,8 @@ class RatingSlider {
     this.focusRect = domNode.querySelector('.focus-ring');
 
     this.infoDefaultFocus = {
-      x: OFFSET_SIZE,
-      y: OFFSET_SIZE,
+      x: 2,
+      y: 2,
       width: infoLastRect.x + infoLastRect.width + OFFSET_SIZE,
       height: infoFirstRect.y + infoLastRect.height + OFFSET_SIZE,
       rx: OFFSET_SIZE,

From 460305d568e97cfc30ee27ab7934a2fd6d74b534 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 31 Oct 2023 21:05:26 +0000
Subject: [PATCH 16/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md | 40 +++++++++----------
 _external/aria-practices                      |  2 +-
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 6a91cf300..12269a836 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -144,46 +144,46 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="520" height="96">
               <rect class="focus-ring" x="23" y="2" width="54" height="90" rx="5" ></rect>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="12" y="30"></rect>
-                <text class="label" x="24" y="47">1</text>
+                <rect class="value" height="24" width="32" x="13" y="30"></rect>
+                <text class="label" x="25" y="47">1</text>
                 <text class="description"  x="10" y="20">Extremely Unsatisfied</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="46" y="30"></rect>
+                <rect class="value" height="24" width="32" x="45" y="30"></rect>
                 <text class="label" x="58" y="47">2</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="80" y="30"></rect>
-                <text class="label" x="92" y="47">3</text>
+                <rect class="value" height="24" width="32" x="77" y="30"></rect>
+                <text class="label" x="91" y="47">3</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="114" y="30"></rect>
-                <text class="label" x="126" y="47">4</text>
+                <rect class="value" height="24" width="32" x="109" y="30"></rect>
+                <text class="label" x="121" y="47">4</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="148" y="30"></rect>
-                <text class="label" x="160" y="47">5</text>
+                <rect class="value" height="24" width="32" x="141" y="30"></rect>
+                <text class="label" x="153" y="47">5</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="182" y="30"></rect>
-                <text class="label" x="194" y="47">6</text>
+                <rect class="value" height="24" width="32" x="173" y="30"></rect>
+                <text class="label" x="185" y="47">6</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="216" y="30"></rect>
-                <text class="label" x="228" y="47">7</text>
+                <rect class="value" height="24" width="32" x="205" y="30"></rect>
+                <text class="label" x="217" y="47">7</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="250" y="30"></rect>
-                <text class="label" x="262" y="47">8</text>
+                <rect class="value" height="24" width="32" x="237" y="30"></rect>
+                <text class="label" x="249" y="47">8</text>
               </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="284" y="30"></rect>
-                <text class="label" x="296" y="47">9</text>
+                <rect class="value" height="24" width="32" x="269" y="30"></rect>
+                <text class="label" x="281" y="47">9</text>
                </g>
               <g class="rating">
-                <rect class="value" height="24" width="34" x="318" y="30"></rect>
-                <text class="label" x="326" y="47">10</text>
-                <text class="description"  x="228" y="20">Extremely Satisfied</text>
+                <rect class="value" height="24" width="32" x="301" y="30"></rect>
+                <text class="label" x="310" y="47">10</text>
+                <text class="description"  x="208" y="20">Extremely Satisfied</text>
                </g>
             </svg>
           </div>
diff --git a/_external/aria-practices b/_external/aria-practices
index 8e457859d..8fc0b22a7 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 8e457859d0f70f25c405d71c1d54c4e4af4ac9e4
+Subproject commit 8fc0b22a7a831c7de662bb88af40ff77e59f64e7

From 9bc9bc04e2556c25254973873d101800167b177c Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 8 Nov 2023 23:19:30 +0000
Subject: [PATCH 17/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md |   6 +-
 _external/aria-practices                      |   2 +-
 _external/data                                |   2 +-
 .../slider/examples/js/slider-rating.js       | 166 ++++++++++++------
 4 files changed, 117 insertions(+), 59 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 12269a836..3c549c260 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 31 October 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 8 November 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -141,12 +141,12 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               aria-labelledby="id-rating-label">
             
 
-            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="520" height="96">
+            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="800" height="110">
               <rect class="focus-ring" x="23" y="2" width="54" height="90" rx="5" ></rect>
               <g class="rating">
                 <rect class="value" height="24" width="32" x="13" y="30"></rect>
                 <text class="label" x="25" y="47">1</text>
-                <text class="description"  x="10" y="20">Extremely Unsatisfied</text>
+                <text class="description"  x="13" y="20">Extremely Unsatisfied</text>
               </g>
               <g class="rating">
                 <rect class="value" height="24" width="32" x="45" y="30"></rect>
diff --git a/_external/aria-practices b/_external/aria-practices
index 8fc0b22a7..6cef06e4b 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 8fc0b22a7a831c7de662bb88af40ff77e59f64e7
+Subproject commit 6cef06e4b08bfeb7872c3ceff1062fbd89138f02
diff --git a/_external/data b/_external/data
index e27af0986..570174dd3 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit e27af0986b88cdd637ebe9eaca0fbb072a6d4a1e
+Subproject commit 570174dd30c12b7d56ee97346a5925f3a3b3b20a
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 1853f1c75..647064c19 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -8,7 +8,10 @@
  *   Desc:   RatingSlider widget that implements ARIA Authoring Practices
  */
 
-const OFFSET_SIZE = 6;
+const SELECTED_SIZE = 6;
+const RAIL_LEFT = 13;
+const RAIL_TOP = 35;
+const RAIL_HEIGHT = 24;
 
 class RatingSlider {
   constructor(domNode) {
@@ -17,38 +20,18 @@ class RatingSlider {
     this.isMoving = false;
 
     this.svgNode = domNode.querySelector('svg');
+    this.focusRect = domNode.querySelector('.focus-ring');
 
     this.ratingRects = Array.from(
       domNode.querySelectorAll('g.rating rect.value')
     );
-    this.infoRatingRects = [];
-
-    this.ratingRects.forEach((r) => {
-      const info = {
-        x: parseInt(r.getAttribute('x')),
-        y: parseInt(r.getAttribute('y')),
-        width: parseInt(r.getAttribute('width')),
-        height: parseInt(r.getAttribute('height')),
-        rx: 0,
-      };
-      this.infoRatingRects.push(info);
-    });
-
-    const infoFirstRect = this.infoRatingRects[0];
-    const infoLastRect = this.infoRatingRects[this.infoRatingRects.length - 1];
 
-    this.railOffset = infoFirstRect.x;
-    this.railWidth = infoLastRect.x + infoLastRect.width - infoFirstRect.x;
-
-    this.focusRect = domNode.querySelector('.focus-ring');
+    this.ratingRectLabels = Array.from(
+      domNode.querySelectorAll('g.rating text.label')
+    );
 
-    this.infoDefaultFocus = {
-      x: 2,
-      y: 2,
-      width: infoLastRect.x + infoLastRect.width + OFFSET_SIZE,
-      height: infoFirstRect.y + infoLastRect.height + OFFSET_SIZE,
-      rx: OFFSET_SIZE,
-    };
+    [this.infoRatingRects, this.railWidth] = this.calcRatingRects();
+    this.infoDefaultFocusRect = this.calcDefaultFocusRect();
 
     this.valueMin = this.getValueMin();
     this.valueMax = this.getValueMax();
@@ -74,12 +57,14 @@ class RatingSlider {
     // bind a pointerup event handler to stop tracking pointer movements
     document.addEventListener('pointerup', this.onPointerUp.bind(this));
 
-    this.addTotalCirclesToRatingLabel();
+    this.addTotalRectsToRatingLabel();
     this.sliderNode.addEventListener(
       'blur',
-      this.addTotalCirclesToRatingLabel.bind(this)
+      this.addTotalRectsToRatingLabel.bind(this)
     );
 
+    window.addEventListener('resize', this.onResize.bind(this));
+
     this.setFocusRing(0);
   }
 
@@ -186,22 +171,88 @@ class RatingSlider {
     return 'Unexpected value: ' + value;
   }
 
+  calcRatingRects() {
+    let infoRatingRects = [];
+
+    const railWidth = Math.min(
+      Math.max(24, this.sliderNode.getBoundingClientRect().width),
+      600
+    );
+    const rectWidth = (railWidth - RAIL_LEFT) / 10;
+
+    let left = RAIL_LEFT;
+
+    for (let i = 0; i < this.ratingRects.length; i += 1) {
+      const rect = this.ratingRects[i];
+      const label = this.ratingRectLabels[i];
+
+      rect.setAttribute('x', left);
+      rect.setAttribute('y', RAIL_TOP);
+      rect.setAttribute('width', rectWidth);
+      rect.setAttribute('height', RAIL_HEIGHT);
+      rect.removeAttribute('rx');
+
+      const labelWidth = label.getBoundingClientRect().width;
+      const labelHeight = label.getBoundingClientRect().height;
+
+      label.setAttribute('x', 2 + left + (rectWidth - labelWidth) / 2);
+      label.setAttribute(
+        'y',
+        -2 + RAIL_TOP + RAIL_HEIGHT - (RAIL_HEIGHT - labelHeight + 4) / 2
+      );
+
+      const info = {
+        x: left,
+        y: RAIL_TOP,
+        width: rectWidth,
+        height: RAIL_HEIGHT,
+        rx: 0,
+      };
+
+      infoRatingRects[i] = info;
+
+      rect.parentNode.classList.remove('current');
+
+      left += rectWidth;
+    }
+
+    // adjust extremely satisfied label position
+    const descNodes = this.sliderNode.querySelectorAll('g.rating .description');
+    let descX = RAIL_LEFT;
+    descNodes[0].setAttribute('x', descX);
+
+    descX = railWidth - descNodes[1].getBoundingClientRect().width + 5;
+    descNodes[1].setAttribute('x', descX);
+
+    return [infoRatingRects, railWidth];
+  }
+
+  calcDefaultFocusRect() {
+    return {
+      x: 2,
+      y: 2,
+      width: this.railWidth + SELECTED_SIZE,
+      height: RAIL_TOP + RAIL_HEIGHT + SELECTED_SIZE,
+      rx: SELECTED_SIZE,
+    };
+  }
+
   resetRects() {
     for (let i = 0; i < this.ratingRects.length; i += 1) {
       const rect = this.ratingRects[i];
-      const info = this.infoRatingRects[i];
+      const infoRect = this.infoRatingRects[i];
 
-      rect.setAttribute('x', info.x);
-      rect.setAttribute('y', info.y);
-      rect.setAttribute('width', info.width);
-      rect.setAttribute('height', info.height);
-      rect.setAttribute('rx', info.rx);
+      rect.setAttribute('x', infoRect.x);
+      rect.setAttribute('y', infoRect.y);
+      rect.setAttribute('width', infoRect.width);
+      rect.setAttribute('height', infoRect.height);
+      rect.removeAttribute('rx');
 
       rect.parentNode.classList.remove('current');
     }
   }
 
-  setSelectedRating(value) {
+  setSelectedRatingRect(value) {
     let rect, info;
 
     const leftValue = value - 1;
@@ -211,11 +262,11 @@ class RatingSlider {
       rect = this.ratingRects[value - 1];
       info = this.infoRatingRects[value - 1];
 
-      rect.setAttribute('x', info.x - OFFSET_SIZE);
-      rect.setAttribute('y', info.y - OFFSET_SIZE);
-      rect.setAttribute('width', info.width + 2 * OFFSET_SIZE);
-      rect.setAttribute('height', info.height + 2 * OFFSET_SIZE);
-      rect.setAttribute('rx', OFFSET_SIZE);
+      rect.setAttribute('x', info.x - SELECTED_SIZE);
+      rect.setAttribute('y', info.y - SELECTED_SIZE);
+      rect.setAttribute('width', info.width + 2 * SELECTED_SIZE);
+      rect.setAttribute('height', info.height + 2 * SELECTED_SIZE);
+      rect.setAttribute('rx', SELECTED_SIZE);
 
       rect.parentNode.classList.add('current');
     }
@@ -224,20 +275,20 @@ class RatingSlider {
       rect = this.ratingRects[leftValue - 1];
       info = this.infoRatingRects[leftValue - 1];
 
-      rect.setAttribute('width', info.width - OFFSET_SIZE);
+      rect.setAttribute('width', info.width - SELECTED_SIZE);
     }
 
     if (rightValue <= this.valueMax) {
       rect = this.ratingRects[rightValue - 1];
       info = this.infoRatingRects[rightValue - 1];
 
-      rect.setAttribute('x', info.x + OFFSET_SIZE);
-      rect.setAttribute('width', info.width - OFFSET_SIZE);
+      rect.setAttribute('x', info.x + SELECTED_SIZE);
+      rect.setAttribute('width', info.width - SELECTED_SIZE);
     }
   }
 
   setFocusRing(value) {
-    const size = 2 * OFFSET_SIZE;
+    const size = 2 * SELECTED_SIZE;
 
     if (value > 0 && value <= this.valueMax) {
       const info = this.infoRatingRects[value - 1];
@@ -250,11 +301,11 @@ class RatingSlider {
     } else {
       // Set ring around entire control
 
-      this.focusRect.setAttribute('x', this.infoDefaultFocus.x);
-      this.focusRect.setAttribute('y', this.infoDefaultFocus.y);
-      this.focusRect.setAttribute('width', this.infoDefaultFocus.width);
-      this.focusRect.setAttribute('height', this.infoDefaultFocus.height);
-      this.focusRect.setAttribute('rx', this.infoDefaultFocus.rx);
+      this.focusRect.setAttribute('x', this.infoDefaultFocusRect.x);
+      this.focusRect.setAttribute('y', this.infoDefaultFocusRect.y);
+      this.focusRect.setAttribute('width', this.infoDefaultFocusRect.width);
+      this.focusRect.setAttribute('height', this.infoDefaultFocusRect.height);
+      this.focusRect.setAttribute('rx', SELECTED_SIZE);
     }
   }
 
@@ -264,7 +315,7 @@ class RatingSlider {
     this.sliderNode.setAttribute('aria-valuetext', this.getValueText(value));
 
     this.resetRects();
-    this.setSelectedRating(value);
+    this.setSelectedRatingRect(value);
     this.setFocusRing(value);
   }
 
@@ -315,14 +366,14 @@ class RatingSlider {
     }
   }
 
-  addTotalCirclesToRatingLabel() {
+  addTotalRectsToRatingLabel() {
     let valuetext = this.getValueTextWithMax(this.getValue());
     this.sliderNode.setAttribute('aria-valuetext', valuetext);
   }
 
   onRailClick(event) {
     const x = this.getSVGPoint(event).x;
-    const diffX = x - this.railOffset;
+    const diffX = x - RAIL_LEFT;
     const rating = (diffX * this.valueMax) / this.railWidth;
     const value = Math.ceil(rating);
 
@@ -348,7 +399,7 @@ class RatingSlider {
   onPointerMove(event) {
     if (this.isMoving) {
       const x = this.getSVGPoint(event).x;
-      const diffX = x - this.railOffset;
+      const diffX = x - RAIL_LEFT;
       const rating = (diffX * this.valueMax) / this.railWidth;
       const value = Math.ceil(rating);
 
@@ -362,6 +413,13 @@ class RatingSlider {
   onPointerUp() {
     this.isMoving = false;
   }
+
+  onResize() {
+    [this.infoRatingRects, this.railWidth] = this.calcRatingRects();
+    this.infoDefaultFocusRect = this.calcDefaultFocusRect();
+    this.setSelectedRatingRect(this.getValue());
+    this.setFocusRing(this.getValue());
+  }
 }
 
 // Initialize RatingSliders on the page

From 6e79b6d4c428515442cfd80811f2f59d4e6f4155 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Thu, 9 Nov 2023 01:08:51 +0000
Subject: [PATCH 18/41] Commit changed files and submodule updates

---
 _external/aria-practices                                    | 2 +-
 .../patterns/slider/examples/js/slider-rating.js            | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 6cef06e4b..68305b149 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 6cef06e4b08bfeb7872c3ceff1062fbd89138f02
+Subproject commit 68305b14959396d30a70093769ca7e6817632e19
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 647064c19..454928690 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -175,7 +175,7 @@ class RatingSlider {
     let infoRatingRects = [];
 
     const railWidth = Math.min(
-      Math.max(24, this.sliderNode.getBoundingClientRect().width),
+      Math.max(260, this.sliderNode.getBoundingClientRect().width),
       600
     );
     const rectWidth = (railWidth - RAIL_LEFT) / 10;
@@ -221,7 +221,7 @@ class RatingSlider {
     let descX = RAIL_LEFT;
     descNodes[0].setAttribute('x', descX);
 
-    descX = railWidth - descNodes[1].getBoundingClientRect().width + 5;
+    descX = railWidth - descNodes[1].getBoundingClientRect().width + 2;
     descNodes[1].setAttribute('x', descX);
 
     return [infoRatingRects, railWidth];
@@ -278,7 +278,7 @@ class RatingSlider {
       rect.setAttribute('width', info.width - SELECTED_SIZE);
     }
 
-    if (rightValue <= this.valueMax) {
+    if (rightValue <= this.valueMax && value > 0) {
       rect = this.ratingRects[rightValue - 1];
       info = this.infoRatingRects[rightValue - 1];
 

From 4f54baa384a3176a5867ba2d97471d05a0773ab4 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Thu, 9 Nov 2023 01:18:51 +0000
Subject: [PATCH 19/41] Commit changed files and submodule updates

---
 _external/aria-practices                                  | 2 +-
 .../patterns/slider/examples/js/slider-rating.js          | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 68305b149..0093ef483 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 68305b14959396d30a70093769ca7e6817632e19
+Subproject commit 0093ef483be5a7e0ba6cd7e521339dbff4275307
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 454928690..8db001b21 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -178,7 +178,7 @@ class RatingSlider {
       Math.max(260, this.sliderNode.getBoundingClientRect().width),
       600
     );
-    const rectWidth = (railWidth - RAIL_LEFT) / 10;
+    const rectWidth = Math.round((railWidth - RAIL_LEFT) / 10);
 
     let left = RAIL_LEFT;
 
@@ -198,7 +198,7 @@ class RatingSlider {
       label.setAttribute('x', 2 + left + (rectWidth - labelWidth) / 2);
       label.setAttribute(
         'y',
-        -2 + RAIL_TOP + RAIL_HEIGHT - (RAIL_HEIGHT - labelHeight + 4) / 2
+        -1 + RAIL_TOP + RAIL_HEIGHT - (RAIL_HEIGHT - labelHeight + 4) / 2
       );
 
       const info = {
@@ -221,7 +221,9 @@ class RatingSlider {
     let descX = RAIL_LEFT;
     descNodes[0].setAttribute('x', descX);
 
-    descX = railWidth - descNodes[1].getBoundingClientRect().width + 2;
+    descX = Math.round(
+      railWidth - descNodes[1].getBoundingClientRect().width + 2
+    );
     descNodes[1].setAttribute('x', descX);
 
     return [infoRatingRects, railWidth];

From 6a37049bf535de38cf643566b7aff5f94a2ac043 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:48:10 +0000
Subject: [PATCH 20/41] Commit changed files and submodule updates

---
 _external/aria-practices                        |  2 +-
 _external/data                                  |  2 +-
 .../slider/examples/css/slider-rating.css       | 17 +++++++++--------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 0093ef483..ca9fb0ddc 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 0093ef483be5a7e0ba6cd7e521339dbff4275307
+Subproject commit ca9fb0ddcba7772be06c88ae7726233ecfc97b6d
diff --git a/_external/data b/_external/data
index 570174dd3..0e1b71f0b 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 570174dd30c12b7d56ee97346a5925f3a3b3b20a
+Subproject commit 0e1b71f0b8d93f9a5aee94a7fc266b606ff8faf6
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 6f9063ea1..81be219e2 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -5,7 +5,7 @@
 }
 
 .rating-slider {
-  color: #005a9c;
+  color: blue;
 }
 
 .rating-slider svg {
@@ -14,33 +14,34 @@
 }
 
 .rating-slider svg .focus-ring {
-  fill: #eee;
+  fill: linktext;
   stroke-width: 0;
   fill-opacity: 0;
 }
 
 .rating-slider svg .value {
   stroke-width: 2px;
-  stroke: currentcolor;
+  stroke: linktext;
   fill-opacity: 0;
 }
 
 .rating-slider svg .label {
   font-size: 90%;
-  color: white;
+  fill: linktext;
 }
 
 .rating-slider svg .description {
   font-size: 90%;
+  fill: linktext;
 }
 
 .rating-slider svg .current .value {
-  fill: currentcolor;
+  fill: linktext;
   fill-opacity: 1;
 }
 
 .rating-slider svg .current .label {
-  fill: white;
+  fill: canvas;
   font-weight: bold;
 }
 
@@ -53,11 +54,11 @@
 
 .rating-slider svg .focus {
   stroke-width: 0;
-  stroke: currentcolor;
+  stroke: linktext;
   fill-opacity: 0;
 }
 
 .rating-slider:focus svg .focus-ring {
   stroke-width: 2px;
-  stroke: currentcolor;
+  stroke: linktext;
 }

From 299cffe61850c9efac6baa2d80c5d70a486d7047 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 17:57:42 +0000
Subject: [PATCH 21/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 4 ++--
 _external/aria-practices                           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 3c549c260..72696e6ba 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 8 November 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 14 November 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -201,7 +201,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
           <li>
             To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the rating value borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> property of each inline SVG <code>rect</code> and <code>text</code> elements.
+            For example, the color of the rating value borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
diff --git a/_external/aria-practices b/_external/aria-practices
index ca9fb0ddc..0b079c977 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit ca9fb0ddcba7772be06c88ae7726233ecfc97b6d
+Subproject commit 0b079c977c4a00a21444b51c5d861988b491f9a4

From b189327c93cec9eca6a5b324697f2b266d615238 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 21:02:43 +0000
Subject: [PATCH 22/41] Commit changed files and submodule updates

---
 _external/aria-practices                      |  2 +-
 .../slider/examples/css/slider-rating.css     | 54 +++++++++++++++----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 0b079c977..802d6e966 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 0b079c977c4a00a21444b51c5d861988b491f9a4
+Subproject commit 802d6e966e3da8c41502ebb920495b981ae3327e
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 81be219e2..d57332ffa 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -5,7 +5,7 @@
 }
 
 .rating-slider {
-  color: blue;
+  color: #005a9c;
 }
 
 .rating-slider svg {
@@ -14,34 +14,34 @@
 }
 
 .rating-slider svg .focus-ring {
-  fill: linktext;
+  fill: currentcolor;
   stroke-width: 0;
   fill-opacity: 0;
 }
 
 .rating-slider svg .value {
   stroke-width: 2px;
-  stroke: linktext;
+  stroke: currentcolor;
   fill-opacity: 0;
 }
 
 .rating-slider svg .label {
   font-size: 90%;
-  fill: linktext;
+  fill: currentcolor;
 }
 
 .rating-slider svg .description {
   font-size: 90%;
-  fill: linktext;
+  fill: currentcolor;
 }
 
 .rating-slider svg .current .value {
-  fill: linktext;
+  fill: currentcolor;
   fill-opacity: 1;
 }
 
 .rating-slider svg .current .label {
-  fill: canvas;
+  fill: white;
   font-weight: bold;
 }
 
@@ -54,11 +54,47 @@
 
 .rating-slider svg .focus {
   stroke-width: 0;
-  stroke: linktext;
+  stroke: currentcolor;
   fill-opacity: 0;
 }
 
 .rating-slider:focus svg .focus-ring {
   stroke-width: 2px;
-  stroke: linktext;
+  stroke: currentcolor;
+}
+
+@media (forced-colors: active) {
+  .rating-slider svg .focus-ring {
+    fill: linktext;
+  }
+
+  .rating-slider svg .value {
+    stroke: linktext;
+  }
+
+  .rating-slider svg .label {
+    fill: linktext;
+  }
+
+  .rating-slider svg .description {
+    fill: linktext;
+  }
+
+  .rating-slider svg .current .value {
+    fill: linktext;
+  }
+
+  .rating-slider svg .current .label {
+    fill: canvas;
+  }
+
+  /* focus styling */
+
+  .rating-slider svg .focus {
+    stroke: linktext;
+  }
+
+  .rating-slider:focus svg .focus-ring {
+    stroke: linktext;
+  }
 }

From b5c5847bf1daff1f03d4f950279f404d1b1c4ccb Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 21:09:37 +0000
Subject: [PATCH 23/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 4 ++--
 _external/aria-practices                           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 72696e6ba..c6259e6ed 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -200,8 +200,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </li>
           <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
           <li>
-            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the rating value borders is set to match the foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
+            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
+            For example, the color of the rating value borders is set to match link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
diff --git a/_external/aria-practices b/_external/aria-practices
index 802d6e966..a7f4dd31a 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 802d6e966e3da8c41502ebb920495b981ae3327e
+Subproject commit a7f4dd31aa5d4b557c9fe8a05bd60c3e2d81f61f

From dcd6c243eb7a1dd4b4ba72bd3f8f9986054b1efb Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 23:35:39 +0000
Subject: [PATCH 24/41] Commit changed files and submodule updates

---
 _external/aria-practices                               |  2 +-
 .../patterns/slider/examples/js/slider-rating.js       | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index a7f4dd31a..1da4e84ce 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit a7f4dd31aa5d4b557c9fe8a05bd60c3e2d81f61f
+Subproject commit 1da4e84ce44ed863208b7de8a600d98808d364c4
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 8db001b21..3ae4a46f2 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -195,10 +195,16 @@ class RatingSlider {
       const labelWidth = label.getBoundingClientRect().width;
       const labelHeight = label.getBoundingClientRect().height;
 
-      label.setAttribute('x', 2 + left + (rectWidth - labelWidth) / 2);
+      label.setAttribute(
+        'x',
+        2 + left + Math.round((rectWidth - labelWidth) / 2)
+      );
       label.setAttribute(
         'y',
-        -1 + RAIL_TOP + RAIL_HEIGHT - (RAIL_HEIGHT - labelHeight + 4) / 2
+        -1 +
+          RAIL_TOP +
+          RAIL_HEIGHT -
+          Math.round((RAIL_HEIGHT - labelHeight + 4) / 2)
       );
 
       const info = {

From f1ecbee92690a0ab2d473e79f6384380f8830abf Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Tue, 14 Nov 2023 23:45:58 +0000
Subject: [PATCH 25/41] Commit changed files and submodule updates

---
 _external/aria-practices                                        | 2 +-
 .../patterns/slider/examples/css/slider-rating.css              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 1da4e84ce..7911cacc5 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 1da4e84ce44ed863208b7de8a600d98808d364c4
+Subproject commit 7911cacc5f55c2600f9e252e4ae26d8abd5381dc
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index d57332ffa..5d32cc5b6 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -32,7 +32,7 @@
 
 .rating-slider svg .description {
   font-size: 90%;
-  fill: currentcolor;
+  fill: canvasText;
 }
 
 .rating-slider svg .current .value {

From 82694314e616fb8a2603df87bf219c27afba7bda Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:56:58 +0000
Subject: [PATCH 26/41] Commit changed files and submodule updates

---
 _external/aria-practices                                  | 2 +-
 .../patterns/slider/examples/js/slider-rating.js          | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 7911cacc5..46cb2bbbd 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 7911cacc5f55c2600f9e252e4ae26d8abd5381dc
+Subproject commit 46cb2bbbd3201af6e6c52276763f02daeb14e0f1
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 3ae4a46f2..1a0446f9e 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -192,8 +192,8 @@ class RatingSlider {
       rect.setAttribute('height', RAIL_HEIGHT);
       rect.removeAttribute('rx');
 
-      const labelWidth = label.getBoundingClientRect().width;
-      const labelHeight = label.getBoundingClientRect().height;
+      const labelWidth = label.getBBox().width;
+      const labelHeight = label.getBBox().height;
 
       label.setAttribute(
         'x',
@@ -227,9 +227,7 @@ class RatingSlider {
     let descX = RAIL_LEFT;
     descNodes[0].setAttribute('x', descX);
 
-    descX = Math.round(
-      railWidth - descNodes[1].getBoundingClientRect().width + 2
-    );
+    descX = Math.round(railWidth - descNodes[1].getBBox().width + 2);
     descNodes[1].setAttribute('x', descX);
 
     return [infoRatingRects, railWidth];

From a43487f61bf962590657235484868b1199ed316c Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:29:32 +0000
Subject: [PATCH 27/41] Commit changed files and submodule updates

---
 _external/aria-practices                                   | 2 +-
 .../patterns/slider/examples/css/slider-rating.css         | 2 ++
 .../patterns/slider/examples/js/slider-rating.js           | 7 +++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 46cb2bbbd..240c65c79 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 46cb2bbbd3201af6e6c52276763f02daeb14e0f1
+Subproject commit 240c65c7916b13739f1350937e82c3d0b3bcd595
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 5d32cc5b6..cbc10e63f 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -27,11 +27,13 @@
 
 .rating-slider svg .label {
   font-size: 90%;
+  font-family: sans-serif;
   fill: currentcolor;
 }
 
 .rating-slider svg .description {
   font-size: 90%;
+  font-family: sans-serif;
   fill: canvasText;
 }
 
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 1a0446f9e..6cae4a4aa 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -192,8 +192,11 @@ class RatingSlider {
       rect.setAttribute('height', RAIL_HEIGHT);
       rect.removeAttribute('rx');
 
-      const labelWidth = label.getBBox().width;
-      const labelHeight = label.getBBox().height;
+      const labelWidth = Math.round(label.getBBox().width);
+      const labelHeight = Math.round(label.getBBox().height);
+
+      label.setAttribute('data-width', labelWidth);
+      label.setAttribute('data-height', labelHeight);
 
       label.setAttribute(
         'x',

From 0e955108811b42c3ee0ad46aa3cead0519760c03 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 20:46:12 +0000
Subject: [PATCH 28/41] Commit changed files and submodule updates

---
 _external/aria-practices                                       | 2 +-
 .../patterns/slider/examples/js/slider-rating.js               | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 240c65c79..7e65ec0c9 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 240c65c7916b13739f1350937e82c3d0b3bcd595
+Subproject commit 7e65ec0c90e1d27f51b1608bd03d326281900a66
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 6cae4a4aa..3491de8b6 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -195,9 +195,6 @@ class RatingSlider {
       const labelWidth = Math.round(label.getBBox().width);
       const labelHeight = Math.round(label.getBBox().height);
 
-      label.setAttribute('data-width', labelWidth);
-      label.setAttribute('data-height', labelHeight);
-
       label.setAttribute(
         'x',
         2 + left + Math.round((rectWidth - labelWidth) / 2)

From a7bc6efd86bbc4f7e86009a4ea296ee81067a1ac Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:38:31 +0000
Subject: [PATCH 29/41] Commit changed files and submodule updates

---
 _external/aria-practices                      |  2 +-
 .../slider/examples/css/slider-rating.css     |  1 -
 .../slider/examples/js/slider-rating.js       | 28 +++++++++++++++++--
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 7e65ec0c9..453b580ae 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 7e65ec0c90e1d27f51b1608bd03d326281900a66
+Subproject commit 453b580ae30166a4600b2f5c483b7d281252cacf
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index cbc10e63f..c142cc2ad 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -33,7 +33,6 @@
 
 .rating-slider svg .description {
   font-size: 90%;
-  font-family: sans-serif;
   fill: canvasText;
 }
 
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 3491de8b6..f7874d2d0 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -192,6 +192,8 @@ class RatingSlider {
       rect.setAttribute('height', RAIL_HEIGHT);
       rect.removeAttribute('rx');
 
+      label.setAttribute('style', 'font-size: 95%');
+
       const labelWidth = Math.round(label.getBBox().width);
       const labelHeight = Math.round(label.getBBox().height);
 
@@ -259,7 +261,7 @@ class RatingSlider {
   }
 
   setSelectedRatingRect(value) {
-    let rect, info;
+    let label, rect, info;
 
     const leftValue = value - 1;
     const rightValue = value + 1;
@@ -267,14 +269,34 @@ class RatingSlider {
     if (value > 0) {
       rect = this.ratingRects[value - 1];
       info = this.infoRatingRects[value - 1];
+      label = this.ratingRectLabels[value - 1];
+
+      rect.parentNode.classList.add('current');
+
+      const rectWidth = info.width + 2 * SELECTED_SIZE;
 
       rect.setAttribute('x', info.x - SELECTED_SIZE);
       rect.setAttribute('y', info.y - SELECTED_SIZE);
-      rect.setAttribute('width', info.width + 2 * SELECTED_SIZE);
+      rect.setAttribute('width', rectWidth);
       rect.setAttribute('height', info.height + 2 * SELECTED_SIZE);
       rect.setAttribute('rx', SELECTED_SIZE);
 
-      rect.parentNode.classList.add('current');
+      label.setAttribute('style', 'font-size: 120%');
+
+      const labelWidth = Math.round(label.getBBox().width);
+      const labelHeight = Math.round(label.getBBox().height);
+
+      label.setAttribute(
+        'x',
+        2 + info.x - SELECTED_SIZE + Math.round((rectWidth - labelWidth) / 2)
+      );
+      label.setAttribute(
+        'y',
+        -1 +
+          RAIL_TOP +
+          RAIL_HEIGHT -
+          Math.round((RAIL_HEIGHT - labelHeight + 4) / 2)
+      );
     }
 
     if (leftValue > 0) {

From b3ee39646d4735b549b99251175e69960da7f5a1 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 15 Nov 2023 22:41:45 +0000
Subject: [PATCH 30/41] Commit changed files and submodule updates

---
 _external/aria-practices                                        | 2 +-
 .../patterns/slider/examples/css/slider-rating.css              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 453b580ae..4fae83a44 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 453b580ae30166a4600b2f5c483b7d281252cacf
+Subproject commit 4fae83a4416a5a5c5e6a5139f805bcb96d0ef0d7
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index c142cc2ad..7b02d5a2f 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -33,7 +33,7 @@
 
 .rating-slider svg .description {
   font-size: 90%;
-  fill: canvasText;
+  fill: canvastext;
 }
 
 .rating-slider svg .current .value {

From eb640144385595d1206331f63fe9385f72ad8aed Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Thu, 16 Nov 2023 00:47:21 +0000
Subject: [PATCH 31/41] Commit changed files and submodule updates

---
 _external/aria-practices | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 4fae83a44..9c21e0472 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 4fae83a4416a5a5c5e6a5139f805bcb96d0ef0d7
+Subproject commit 9c21e04721e9d3ec610272d37171e698e29278ac

From 0104da802618795c70d04f64437e6160686e263e Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Thu, 16 Nov 2023 15:15:00 +0000
Subject: [PATCH 32/41] Commit changed files and submodule updates

---
 _external/aria-practices                      |   2 +-
 .../slider/examples/js/slider-rating.js       | 151 +++++++++---------
 2 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 9c21e0472..6729e7c05 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 9c21e04721e9d3ec610272d37171e698e29278ac
+Subproject commit 6729e7c05b7e5f431779569e7416e1ffe27d5749
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index f7874d2d0..4b79f91da 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -183,33 +183,18 @@ class RatingSlider {
     let left = RAIL_LEFT;
 
     for (let i = 0; i < this.ratingRects.length; i += 1) {
-      const rect = this.ratingRects[i];
-      const label = this.ratingRectLabels[i];
-
-      rect.setAttribute('x', left);
-      rect.setAttribute('y', RAIL_TOP);
-      rect.setAttribute('width', rectWidth);
-      rect.setAttribute('height', RAIL_HEIGHT);
-      rect.removeAttribute('rx');
-
-      label.setAttribute('style', 'font-size: 95%');
-
-      const labelWidth = Math.round(label.getBBox().width);
-      const labelHeight = Math.round(label.getBBox().height);
-
-      label.setAttribute(
-        'x',
-        2 + left + Math.round((rectWidth - labelWidth) / 2)
-      );
-      label.setAttribute(
-        'y',
-        -1 +
-          RAIL_TOP +
-          RAIL_HEIGHT -
-          Math.round((RAIL_HEIGHT - labelHeight + 4) / 2)
-      );
-
-      const info = {
+      const rectNode = this.ratingRects[i];
+      const labelNode = this.ratingRectLabels[i];
+
+      rectNode.setAttribute('x', left);
+      rectNode.setAttribute('y', RAIL_TOP);
+      rectNode.setAttribute('width', rectWidth);
+      rectNode.setAttribute('height', RAIL_HEIGHT);
+      rectNode.removeAttribute('rx');
+
+      this.setLabelPosition(labelNode, left, rectWidth);
+
+      const infoRect = {
         x: left,
         y: RAIL_TOP,
         width: rectWidth,
@@ -217,9 +202,9 @@ class RatingSlider {
         rx: 0,
       };
 
-      infoRatingRects[i] = info;
+      infoRatingRects[i] = infoRect;
 
-      rect.parentNode.classList.remove('current');
+      rectNode.parentNode.classList.remove('current');
 
       left += rectWidth;
     }
@@ -247,84 +232,92 @@ class RatingSlider {
 
   resetRects() {
     for (let i = 0; i < this.ratingRects.length; i += 1) {
-      const rect = this.ratingRects[i];
+      const rectNode = this.ratingRects[i];
       const infoRect = this.infoRatingRects[i];
+      const labelNode = this.ratingRectLabels[i];
+
+      rectNode.setAttribute('x', infoRect.x);
+      rectNode.setAttribute('y', infoRect.y);
+      rectNode.setAttribute('width', infoRect.width);
+      rectNode.setAttribute('height', infoRect.height);
+      rectNode.removeAttribute('rx');
 
-      rect.setAttribute('x', infoRect.x);
-      rect.setAttribute('y', infoRect.y);
-      rect.setAttribute('width', infoRect.width);
-      rect.setAttribute('height', infoRect.height);
-      rect.removeAttribute('rx');
+      this.setLabelPosition(labelNode, infoRect.x, infoRect.width);
 
-      rect.parentNode.classList.remove('current');
+      rectNode.parentNode.classList.remove('current');
     }
   }
 
   setSelectedRatingRect(value) {
-    let label, rect, info;
+    let labelNode, rectNode, infoRect;
 
     const leftValue = value - 1;
     const rightValue = value + 1;
 
     if (value > 0) {
-      rect = this.ratingRects[value - 1];
-      info = this.infoRatingRects[value - 1];
-      label = this.ratingRectLabels[value - 1];
-
-      rect.parentNode.classList.add('current');
-
-      const rectWidth = info.width + 2 * SELECTED_SIZE;
-
-      rect.setAttribute('x', info.x - SELECTED_SIZE);
-      rect.setAttribute('y', info.y - SELECTED_SIZE);
-      rect.setAttribute('width', rectWidth);
-      rect.setAttribute('height', info.height + 2 * SELECTED_SIZE);
-      rect.setAttribute('rx', SELECTED_SIZE);
-
-      label.setAttribute('style', 'font-size: 120%');
-
-      const labelWidth = Math.round(label.getBBox().width);
-      const labelHeight = Math.round(label.getBBox().height);
-
-      label.setAttribute(
-        'x',
-        2 + info.x - SELECTED_SIZE + Math.round((rectWidth - labelWidth) / 2)
-      );
-      label.setAttribute(
-        'y',
-        -1 +
-          RAIL_TOP +
-          RAIL_HEIGHT -
-          Math.round((RAIL_HEIGHT - labelHeight + 4) / 2)
-      );
+      rectNode = this.ratingRects[value - 1];
+      infoRect = this.infoRatingRects[value - 1];
+      labelNode = this.ratingRectLabels[value - 1];
+
+      rectNode.parentNode.classList.add('current');
+
+      const rectWidth = infoRect.width + 2 * SELECTED_SIZE;
+      const x = infoRect.x - SELECTED_SIZE;
+
+      rectNode.setAttribute('x', x);
+      rectNode.setAttribute('y', infoRect.y - SELECTED_SIZE);
+      rectNode.setAttribute('width', rectWidth);
+      rectNode.setAttribute('height', infoRect.height + 2 * SELECTED_SIZE);
+      rectNode.setAttribute('rx', SELECTED_SIZE);
+
+      this.setLabelPosition(labelNode, x, rectWidth, '120%');
     }
 
     if (leftValue > 0) {
-      rect = this.ratingRects[leftValue - 1];
-      info = this.infoRatingRects[leftValue - 1];
+      rectNode = this.ratingRects[leftValue - 1];
+      infoRect = this.infoRatingRects[leftValue - 1];
 
-      rect.setAttribute('width', info.width - SELECTED_SIZE);
+      rectNode.setAttribute('width', infoRect.width - SELECTED_SIZE);
     }
 
     if (rightValue <= this.valueMax && value > 0) {
-      rect = this.ratingRects[rightValue - 1];
-      info = this.infoRatingRects[rightValue - 1];
+      rectNode = this.ratingRects[rightValue - 1];
+      infoRect = this.infoRatingRects[rightValue - 1];
 
-      rect.setAttribute('x', info.x + SELECTED_SIZE);
-      rect.setAttribute('width', info.width - SELECTED_SIZE);
+      rectNode.setAttribute('x', infoRect.x + SELECTED_SIZE);
+      rectNode.setAttribute('width', infoRect.width - SELECTED_SIZE);
     }
   }
 
+  setLabelPosition(labelNode, x, rectWidth, fontSize = '95%') {
+    labelNode.setAttribute('style', `font-size: ${fontSize}`);
+
+    const labelWidth = Math.round(labelNode.getBBox().width);
+    const labelHeight = Math.round(labelNode.getBBox().height);
+
+    labelNode.setAttribute(
+      'x',
+      2 + x + Math.round((rectWidth - labelWidth) / 2)
+    );
+    labelNode.setAttribute(
+      'y',
+      -1 +
+        RAIL_TOP +
+        RAIL_HEIGHT -
+        Math.round((RAIL_HEIGHT - labelHeight + 4) / 2)
+    );
+  }
+
   setFocusRing(value) {
     const size = 2 * SELECTED_SIZE;
 
     if (value > 0 && value <= this.valueMax) {
-      const info = this.infoRatingRects[value - 1];
+      const infoRect = this.infoRatingRects[value - 1];
 
-      this.focusRect.setAttribute('x', info.x - size);
-      this.focusRect.setAttribute('y', info.y - size);
-      this.focusRect.setAttribute('width', info.width + 2 * size);
-      this.focusRect.setAttribute('height', info.height + 2 * size);
+      this.focusRect.setAttribute('x', infoRect.x - size);
+      this.focusRect.setAttribute('y', infoRect.y - size);
+      this.focusRect.setAttribute('width', infoRect.width + 2 * size);
+      this.focusRect.setAttribute('height', infoRect.height + 2 * size);
       this.focusRect.setAttribute('rx', size);
     } else {
       // Set ring around entire control

From fe844586317af4bcf05c25853a584b9adf575964 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 29 Nov 2023 17:38:09 +0000
Subject: [PATCH 33/41] Commit changed files and submodule updates

---
 .../patterns/slider/examples/slider-rating.md |  42 ++---
 _external/aria-practices                      |   2 +-
 _external/data                                |   2 +-
 .../slider/examples/css/slider-rating.css     |  14 +-
 .../slider/examples/js/slider-rating.js       | 163 ++++++++----------
 5 files changed, 107 insertions(+), 116 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index c6259e6ed..04b95617b 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 14 November 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 29 November 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -143,45 +143,45 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
 
             <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="800" height="110">
               <rect class="focus-ring" x="23" y="2" width="54" height="90" rx="5" ></rect>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="13" y="30"></rect>
+              <g class="rating" data-value="1">
+                <rect class="target" height="24" width="32" x="13" y="30"></rect>
                 <text class="label" x="25" y="47">1</text>
                 <text class="description"  x="13" y="20">Extremely Unsatisfied</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="45" y="30"></rect>
+              <g class="rating" data-value="2">
+                <rect class="target" height="24" width="32" x="45" y="30"></rect>
                 <text class="label" x="58" y="47">2</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="77" y="30"></rect>
+              <g class="rating" data-value="3">
+                <rect class="target" height="24" width="32" x="77" y="30"></rect>
                 <text class="label" x="91" y="47">3</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="109" y="30"></rect>
+              <g class="rating" data-value="4">
+                <rect class="target" height="24" width="32" x="109" y="30"></rect>
                 <text class="label" x="121" y="47">4</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="141" y="30"></rect>
+              <g class="rating" data-value="5">
+                <rect class="target" height="24" width="32" x="141" y="30"></rect>
                 <text class="label" x="153" y="47">5</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="173" y="30"></rect>
+              <g class="rating" data-value="6">
+                <rect class="target" height="24" width="32" x="173" y="30"></rect>
                 <text class="label" x="185" y="47">6</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="205" y="30"></rect>
+              <g class="rating" data-value="7">
+                <rect class="target" height="24" width="32" x="205" y="30"></rect>
                 <text class="label" x="217" y="47">7</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="237" y="30"></rect>
+              <g class="rating" data-value="8">
+                <rect class="target" height="24" width="32" x="237" y="30"></rect>
                 <text class="label" x="249" y="47">8</text>
               </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="269" y="30"></rect>
+              <g class="rating" data-value="9">
+                <rect class="target" height="24" width="32" x="269" y="30"></rect>
                 <text class="label" x="281" y="47">9</text>
                </g>
-              <g class="rating">
-                <rect class="value" height="24" width="32" x="301" y="30"></rect>
+              <g class="rating" data-value="10">
+                <rect class="target" height="24" width="32" x="301" y="30"></rect>
                 <text class="label" x="310" y="47">10</text>
                 <text class="description"  x="208" y="20">Extremely Satisfied</text>
                </g>
diff --git a/_external/aria-practices b/_external/aria-practices
index 6729e7c05..738387924 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 6729e7c05b7e5f431779569e7416e1ffe27d5749
+Subproject commit 73838792414b8d072c57993a05019ae014a089cb
diff --git a/_external/data b/_external/data
index 0e1b71f0b..f0f93db34 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit 0e1b71f0b8d93f9a5aee94a7fc266b606ff8faf6
+Subproject commit f0f93db3496380c6bf172806063ca668bd0767cd
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 7b02d5a2f..2d4326910 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -6,6 +6,12 @@
 
 .rating-slider {
   color: #005a9c;
+  -webkit-touch-callout: none;
+  user-select: none;
+  user-select: none;
+  user-select: none;
+  user-select: none;
+  user-select: none;
 }
 
 .rating-slider svg {
@@ -19,7 +25,7 @@
   fill-opacity: 0;
 }
 
-.rating-slider svg .value {
+.rating-slider svg .target {
   stroke-width: 2px;
   stroke: currentcolor;
   fill-opacity: 0;
@@ -36,7 +42,7 @@
   fill: canvastext;
 }
 
-.rating-slider svg .current .value {
+.rating-slider svg .current .target {
   fill: currentcolor;
   fill-opacity: 1;
 }
@@ -69,7 +75,7 @@
     fill: linktext;
   }
 
-  .rating-slider svg .value {
+  .rating-slider svg .target {
     stroke: linktext;
   }
 
@@ -81,7 +87,7 @@
     fill: linktext;
   }
 
-  .rating-slider svg .current .value {
+  .rating-slider svg .current .target {
     fill: linktext;
   }
 
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 4b79f91da..7c4612907 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -22,37 +22,34 @@ class RatingSlider {
     this.svgNode = domNode.querySelector('svg');
     this.focusRect = domNode.querySelector('.focus-ring');
 
-    this.ratingRects = Array.from(
-      domNode.querySelectorAll('g.rating rect.value')
+    this.targetRects = Array.from(
+      domNode.querySelectorAll('g.rating rect.target')
     );
 
-    this.ratingRectLabels = Array.from(
+    this.labelTexts = Array.from(
       domNode.querySelectorAll('g.rating text.label')
     );
 
-    [this.infoRatingRects, this.railWidth] = this.calcRatingRects();
+    [this.infoTargetRects, this.railWidth] = this.calcRatingRects();
     this.infoDefaultFocusRect = this.calcDefaultFocusRect();
 
     this.valueMin = this.getValueMin();
     this.valueMax = this.getValueMax();
 
-    this.svgPoint = this.svgNode.createSVGPoint();
-
-    // define possible slider positions
-
     this.sliderNode.addEventListener(
       'keydown',
       this.onSliderKeydown.bind(this)
     );
 
-    this.svgNode.addEventListener('click', this.onRailClick.bind(this));
-    this.svgNode.addEventListener(
-      'pointerdown',
-      this.onSliderPointerDown.bind(this)
-    );
+    this.labelTexts.forEach((lt) => {
+      lt.addEventListener('click', this.onTargetClick.bind(this));
+    });
 
-    // bind a pointermove event handler to move pointer
-    this.svgNode.addEventListener('pointermove', this.onPointerMove.bind(this));
+    this.targetRects.forEach((tr) => {
+      tr.addEventListener('click', this.onTargetClick.bind(this));
+      tr.addEventListener('pointerdown', this.onSliderPointerDown.bind(this));
+      tr.addEventListener('pointermove', this.onPointerMove.bind(this));
+    });
 
     // bind a pointerup event handler to stop tracking pointer movements
     document.addEventListener('pointerup', this.onPointerUp.bind(this));
@@ -68,13 +65,6 @@ class RatingSlider {
     this.setFocusRing(0);
   }
 
-  // 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'));
   }
@@ -182,19 +172,19 @@ class RatingSlider {
 
     let left = RAIL_LEFT;
 
-    for (let i = 0; i < this.ratingRects.length; i += 1) {
-      const rectNode = this.ratingRects[i];
-      const labelNode = this.ratingRectLabels[i];
+    for (let i = 0; i < this.targetRects.length; i += 1) {
+      const targetNode = this.targetRects[i];
+      const labelNode = this.labelTexts[i];
 
-      rectNode.setAttribute('x', left);
-      rectNode.setAttribute('y', RAIL_TOP);
-      rectNode.setAttribute('width', rectWidth);
-      rectNode.setAttribute('height', RAIL_HEIGHT);
-      rectNode.removeAttribute('rx');
+      targetNode.setAttribute('x', left);
+      targetNode.setAttribute('y', RAIL_TOP);
+      targetNode.setAttribute('width', rectWidth);
+      targetNode.setAttribute('height', RAIL_HEIGHT);
+      targetNode.removeAttribute('rx');
 
       this.setLabelPosition(labelNode, left, rectWidth);
 
-      const infoRect = {
+      const infoTarget = {
         x: left,
         y: RAIL_TOP,
         width: rectWidth,
@@ -202,9 +192,9 @@ class RatingSlider {
         rx: 0,
       };
 
-      infoRatingRects[i] = infoRect;
+      infoRatingRects[i] = infoTarget;
 
-      rectNode.parentNode.classList.remove('current');
+      targetNode.parentNode.classList.remove('current');
 
       left += rectWidth;
     }
@@ -231,61 +221,61 @@ class RatingSlider {
   }
 
   resetRects() {
-    for (let i = 0; i < this.ratingRects.length; i += 1) {
-      const rectNode = this.ratingRects[i];
-      const infoRect = this.infoRatingRects[i];
-      const labelNode = this.ratingRectLabels[i];
+    for (let i = 0; i < this.targetRects.length; i += 1) {
+      const targetNode = this.targetRects[i];
+      const infoTarget = this.infoTargetRects[i];
+      const labelNode = this.labelTexts[i];
 
-      rectNode.setAttribute('x', infoRect.x);
-      rectNode.setAttribute('y', infoRect.y);
-      rectNode.setAttribute('width', infoRect.width);
-      rectNode.setAttribute('height', infoRect.height);
-      rectNode.removeAttribute('rx');
+      targetNode.setAttribute('x', infoTarget.x);
+      targetNode.setAttribute('y', infoTarget.y);
+      targetNode.setAttribute('width', infoTarget.width);
+      targetNode.setAttribute('height', infoTarget.height);
+      targetNode.removeAttribute('rx');
 
-      this.setLabelPosition(labelNode, infoRect.x, infoRect.width);
+      this.setLabelPosition(labelNode, infoTarget.x, infoTarget.width);
 
-      rectNode.parentNode.classList.remove('current');
+      targetNode.parentNode.classList.remove('current');
     }
   }
 
   setSelectedRatingRect(value) {
-    let labelNode, rectNode, infoRect;
+    let labelNode, targetNode, infoTarget;
 
     const leftValue = value - 1;
     const rightValue = value + 1;
 
     if (value > 0) {
-      rectNode = this.ratingRects[value - 1];
-      infoRect = this.infoRatingRects[value - 1];
-      labelNode = this.ratingRectLabels[value - 1];
+      targetNode = this.targetRects[value - 1];
+      infoTarget = this.infoTargetRects[value - 1];
+      labelNode = this.labelTexts[value - 1];
 
-      rectNode.parentNode.classList.add('current');
+      targetNode.parentNode.classList.add('current');
 
-      const rectWidth = infoRect.width + 2 * SELECTED_SIZE;
-      const x = infoRect.x - SELECTED_SIZE;
+      const rectWidth = infoTarget.width + 2 * SELECTED_SIZE;
+      const x = infoTarget.x - SELECTED_SIZE;
 
-      rectNode.setAttribute('x', x);
-      rectNode.setAttribute('y', infoRect.y - SELECTED_SIZE);
-      rectNode.setAttribute('width', rectWidth);
-      rectNode.setAttribute('height', infoRect.height + 2 * SELECTED_SIZE);
-      rectNode.setAttribute('rx', SELECTED_SIZE);
+      targetNode.setAttribute('x', x);
+      targetNode.setAttribute('y', infoTarget.y - SELECTED_SIZE);
+      targetNode.setAttribute('width', rectWidth);
+      targetNode.setAttribute('height', infoTarget.height + 2 * SELECTED_SIZE);
+      targetNode.setAttribute('rx', SELECTED_SIZE);
 
       this.setLabelPosition(labelNode, x, rectWidth, '120%');
     }
 
     if (leftValue > 0) {
-      rectNode = this.ratingRects[leftValue - 1];
-      infoRect = this.infoRatingRects[leftValue - 1];
+      targetNode = this.targetRects[leftValue - 1];
+      infoTarget = this.infoTargetRects[leftValue - 1];
 
-      rectNode.setAttribute('width', infoRect.width - SELECTED_SIZE);
+      targetNode.setAttribute('width', infoTarget.width - SELECTED_SIZE);
     }
 
     if (rightValue <= this.valueMax && value > 0) {
-      rectNode = this.ratingRects[rightValue - 1];
-      infoRect = this.infoRatingRects[rightValue - 1];
+      targetNode = this.targetRects[rightValue - 1];
+      infoTarget = this.infoTargetRects[rightValue - 1];
 
-      rectNode.setAttribute('x', infoRect.x + SELECTED_SIZE);
-      rectNode.setAttribute('width', infoRect.width - SELECTED_SIZE);
+      targetNode.setAttribute('x', infoTarget.x + SELECTED_SIZE);
+      targetNode.setAttribute('width', infoTarget.width - SELECTED_SIZE);
     }
   }
 
@@ -312,12 +302,12 @@ class RatingSlider {
     const size = 2 * SELECTED_SIZE;
 
     if (value > 0 && value <= this.valueMax) {
-      const infoRect = this.infoRatingRects[value - 1];
+      const infoTarget = this.infoTargetRects[value - 1];
 
-      this.focusRect.setAttribute('x', infoRect.x - size);
-      this.focusRect.setAttribute('y', infoRect.y - size);
-      this.focusRect.setAttribute('width', infoRect.width + 2 * size);
-      this.focusRect.setAttribute('height', infoRect.height + 2 * size);
+      this.focusRect.setAttribute('x', infoTarget.x - size);
+      this.focusRect.setAttribute('y', infoTarget.y - size);
+      this.focusRect.setAttribute('width', infoTarget.width + 2 * size);
+      this.focusRect.setAttribute('height', infoTarget.height + 2 * size);
       this.focusRect.setAttribute('rx', size);
     } else {
       // Set ring around entire control
@@ -392,13 +382,10 @@ class RatingSlider {
     this.sliderNode.setAttribute('aria-valuetext', valuetext);
   }
 
-  onRailClick(event) {
-    const x = this.getSVGPoint(event).x;
-    const diffX = x - RAIL_LEFT;
-    const rating = (diffX * this.valueMax) / this.railWidth;
-    const value = Math.ceil(rating);
-
-    this.moveSliderTo(value);
+  onTargetClick(event) {
+    this.moveSliderTo(
+      event.currentTarget.parentNode.getAttribute('data-value')
+    );
 
     event.preventDefault();
     event.stopPropagation();
@@ -408,35 +395,33 @@ class RatingSlider {
   }
 
   onSliderPointerDown(event) {
-    this.isMoving = true;
-
+    if (!this.isMoving) {
+      this.isMoving = true;
+    }
     event.preventDefault();
     event.stopPropagation();
-
-    // Set focus to the clicked handle
-    this.sliderNode.focus();
   }
 
   onPointerMove(event) {
     if (this.isMoving) {
-      const x = this.getSVGPoint(event).x;
-      const diffX = x - RAIL_LEFT;
-      const rating = (diffX * this.valueMax) / this.railWidth;
-      const value = Math.ceil(rating);
-
-      this.moveSliderTo(value);
-
+      this.moveSliderTo(
+        event.currentTarget.parentNode.getAttribute('data-value')
+      );
       event.preventDefault();
       event.stopPropagation();
     }
   }
 
   onPointerUp() {
-    this.isMoving = false;
+    if (this.isMoving) {
+      this.isMoving = false;
+      // Set focus to the clicked handle
+      this.sliderNode.focus();
+    }
   }
 
   onResize() {
-    [this.infoRatingRects, this.railWidth] = this.calcRatingRects();
+    [this.infoTargetRects, this.railWidth] = this.calcRatingRects();
     this.infoDefaultFocusRect = this.calcDefaultFocusRect();
     this.setSelectedRatingRect(this.getValue());
     this.setFocusRing(this.getValue());

From e01631c79b84f6edc10fd61c54d0a4d6cc120547 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 29 Nov 2023 17:43:12 +0000
Subject: [PATCH 34/41] Commit changed files and submodule updates

---
 _external/aria-practices                                     | 2 +-
 .../patterns/slider/examples/css/slider-rating.css           | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 738387924..a55cff5f5 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 73838792414b8d072c57993a05019ae014a089cb
+Subproject commit a55cff5f588ab8d54a352f9b491e11b611bbcf81
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
index 2d4326910..0dc3c3fc0 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/css/slider-rating.css
@@ -6,11 +6,6 @@
 
 .rating-slider {
   color: #005a9c;
-  -webkit-touch-callout: none;
-  user-select: none;
-  user-select: none;
-  user-select: none;
-  user-select: none;
   user-select: none;
 }
 

From 96634f58dd057bb7b55fd09b46f9a22b7dabf6c7 Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:04:41 +0000
Subject: [PATCH 35/41] Commit changed files and submodule updates

---
 _external/aria-practices | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index a55cff5f5..10da89658 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit a55cff5f588ab8d54a352f9b491e11b611bbcf81
+Subproject commit 10da8965831aa3f92b830fed6b7010829bafba65

From 2432c12b284e42c520cb7b922383706b8b15749e Mon Sep 17 00:00:00 2001
From: michael-n-cooper-bot <michael-n-cooper-bot@users.noreply.github.com>
Date: Fri, 1 Dec 2023 00:07:56 +0000
Subject: [PATCH 36/41] Commit changed files and submodule updates

---
 _external/aria-practices                      |  2 +-
 .../slider/examples/js/slider-rating.js       | 52 +++++++++----------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 10da89658..474dc01b8 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 10da8965831aa3f92b830fed6b7010829bafba65
+Subproject commit 474dc01b80726c4d90cade5e0565c8eda256a3ea
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index 7c4612907..dd4220265 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -30,7 +30,7 @@ class RatingSlider {
       domNode.querySelectorAll('g.rating text.label')
     );
 
-    [this.infoTargetRects, this.railWidth] = this.calcRatingRects();
+    [this.targetInfo, this.railWidth] = this.calcRatingRects();
     this.infoDefaultFocusRect = this.calcDefaultFocusRect();
 
     this.valueMin = this.getValueMin();
@@ -184,7 +184,7 @@ class RatingSlider {
 
       this.setLabelPosition(labelNode, left, rectWidth);
 
-      const infoTarget = {
+      const targetInfo = {
         x: left,
         y: RAIL_TOP,
         width: rectWidth,
@@ -192,7 +192,7 @@ class RatingSlider {
         rx: 0,
       };
 
-      infoRatingRects[i] = infoTarget;
+      infoRatingRects[i] = targetInfo;
 
       targetNode.parentNode.classList.remove('current');
 
@@ -223,41 +223,41 @@ class RatingSlider {
   resetRects() {
     for (let i = 0; i < this.targetRects.length; i += 1) {
       const targetNode = this.targetRects[i];
-      const infoTarget = this.infoTargetRects[i];
+      const targetInfo = this.targetInfo[i];
       const labelNode = this.labelTexts[i];
 
-      targetNode.setAttribute('x', infoTarget.x);
-      targetNode.setAttribute('y', infoTarget.y);
-      targetNode.setAttribute('width', infoTarget.width);
-      targetNode.setAttribute('height', infoTarget.height);
+      targetNode.setAttribute('x', targetInfo.x);
+      targetNode.setAttribute('y', targetInfo.y);
+      targetNode.setAttribute('width', targetInfo.width);
+      targetNode.setAttribute('height', targetInfo.height);
       targetNode.removeAttribute('rx');
 
-      this.setLabelPosition(labelNode, infoTarget.x, infoTarget.width);
+      this.setLabelPosition(labelNode, targetInfo.x, targetInfo.width);
 
       targetNode.parentNode.classList.remove('current');
     }
   }
 
   setSelectedRatingRect(value) {
-    let labelNode, targetNode, infoTarget;
+    let labelNode, targetNode, targetInfo;
 
     const leftValue = value - 1;
     const rightValue = value + 1;
 
     if (value > 0) {
       targetNode = this.targetRects[value - 1];
-      infoTarget = this.infoTargetRects[value - 1];
+      targetInfo = this.targetInfo[value - 1];
       labelNode = this.labelTexts[value - 1];
 
       targetNode.parentNode.classList.add('current');
 
-      const rectWidth = infoTarget.width + 2 * SELECTED_SIZE;
-      const x = infoTarget.x - SELECTED_SIZE;
+      const rectWidth = targetInfo.width + 2 * SELECTED_SIZE;
+      const x = targetInfo.x - SELECTED_SIZE;
 
       targetNode.setAttribute('x', x);
-      targetNode.setAttribute('y', infoTarget.y - SELECTED_SIZE);
+      targetNode.setAttribute('y', targetInfo.y - SELECTED_SIZE);
       targetNode.setAttribute('width', rectWidth);
-      targetNode.setAttribute('height', infoTarget.height + 2 * SELECTED_SIZE);
+      targetNode.setAttribute('height', targetInfo.height + 2 * SELECTED_SIZE);
       targetNode.setAttribute('rx', SELECTED_SIZE);
 
       this.setLabelPosition(labelNode, x, rectWidth, '120%');
@@ -265,17 +265,17 @@ class RatingSlider {
 
     if (leftValue > 0) {
       targetNode = this.targetRects[leftValue - 1];
-      infoTarget = this.infoTargetRects[leftValue - 1];
+      targetInfo = this.targetInfo[leftValue - 1];
 
-      targetNode.setAttribute('width', infoTarget.width - SELECTED_SIZE);
+      targetNode.setAttribute('width', targetInfo.width - SELECTED_SIZE);
     }
 
     if (rightValue <= this.valueMax && value > 0) {
       targetNode = this.targetRects[rightValue - 1];
-      infoTarget = this.infoTargetRects[rightValue - 1];
+      targetInfo = this.targetInfo[rightValue - 1];
 
-      targetNode.setAttribute('x', infoTarget.x + SELECTED_SIZE);
-      targetNode.setAttribute('width', infoTarget.width - SELECTED_SIZE);
+      targetNode.setAttribute('x', targetInfo.x + SELECTED_SIZE);
+      targetNode.setAttribute('width', targetInfo.width - SELECTED_SIZE);
     }
   }
 
@@ -302,12 +302,12 @@ class RatingSlider {
     const size = 2 * SELECTED_SIZE;
 
     if (value > 0 && value <= this.valueMax) {
-      const infoTarget = this.infoTargetRects[value - 1];
+      const targetInfo = this.targetInfo[value - 1];
 
-      this.focusRect.setAttribute('x', infoTarget.x - size);
-      this.focusRect.setAttribute('y', infoTarget.y - size);
-      this.focusRect.setAttribute('width', infoTarget.width + 2 * size);
-      this.focusRect.setAttribute('height', infoTarget.height + 2 * size);
+      this.focusRect.setAttribute('x', targetInfo.x - size);
+      this.focusRect.setAttribute('y', targetInfo.y - size);
+      this.focusRect.setAttribute('width', targetInfo.width + 2 * size);
+      this.focusRect.setAttribute('height', targetInfo.height + 2 * size);
       this.focusRect.setAttribute('rx', size);
     } else {
       // Set ring around entire control
@@ -421,7 +421,7 @@ class RatingSlider {
   }
 
   onResize() {
-    [this.infoTargetRects, this.railWidth] = this.calcRatingRects();
+    [this.targetInfo, this.railWidth] = this.calcRatingRects();
     this.infoDefaultFocusRect = this.calcDefaultFocusRect();
     this.setSelectedRatingRect(this.getValue());
     this.setFocusRing(this.getValue());

From 48a1c4f40339e689d90520a700b77a0988eb46a3 Mon Sep 17 00:00:00 2001
From: daniel-montalvo <daniel-montalvo@users.noreply.github.com>
Date: Tue, 5 Dec 2023 19:34:43 +0000
Subject: [PATCH 37/41] Commit changed files and submodule updates

---
 ARIA/apg/patterns/slider/examples/slider-rating.md | 6 +++---
 _external/aria-practices                           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 04b95617b..a647151c1 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 29 November 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 5 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -128,7 +128,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </div>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
-          <div id="id-rating-label" class="label">Rate your satisfaction with the service you received?</div>
+          <div id="id-rating-label" class="label">Rate your satisfaction with the service you received</div>
 
           <div id="id-rating"
                class="rating-slider"
@@ -201,7 +201,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
           <li>
             To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
-            For example, the color of the rating value borders is set to match link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
+            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
             Some browsers do not use <code>auto</code> for the default value.</li>
diff --git a/_external/aria-practices b/_external/aria-practices
index 474dc01b8..e2afde9a8 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 474dc01b80726c4d90cade5e0565c8eda256a3ea
+Subproject commit e2afde9a84b21b40bcbb716ed81c8ae702e6a341

From 724e09ff9990d1e9254115806ffd37346c60f4bd Mon Sep 17 00:00:00 2001
From: daniel-montalvo <daniel-montalvo@users.noreply.github.com>
Date: Mon, 11 Dec 2023 06:39:30 +0000
Subject: [PATCH 38/41] Commit changed files and submodule updates

---
 .../patterns/radio/examples/radio-rating.md   |  4 +-
 .../slider/examples/slider-color-viewer.md    |  5 +--
 .../patterns/slider/examples/slider-rating.md | 41 ++++++++++++-------
 .../patterns/slider/examples/slider-seek.md   |  5 +--
 .../slider/examples/slider-temperature.md     |  5 +--
 ARIA/apg/patterns/slider/slider-pattern.md    |  2 +-
 _external/aria-practices                      |  2 +-
 _external/data                                |  2 +-
 .../slider/examples/js/slider-rating.js       | 22 +++++-----
 9 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index a2c7f7087..d4bbfd5da 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -104,7 +104,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../radio-activedescendant/">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
           <li><a href="../radio/">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 866711104..4108b78d0 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -115,9 +115,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
-          <li><a href>Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index a647151c1..3520a8275 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 5 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -110,11 +110,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   >
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
-          This rating widget employs a slider because number of rating values, in general when there are more than seven choices consider using the slider pattern.
+          This rating widget employs a slider because of the relatively large number of values on its scale; it provides a ten-point scale.
+          For inputs with seven or fewer choices,another pattern that could be used is radio group as demonstrated by the
+          <a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>.
+          However, when there are more than seven choices, the radio group pattern is less friendly to keyboard and assistive technology users because it does not provide as many ways of easily navigating through choices as other input patterns, such as
+          <a href="../../">slider</a>,
+          <a href="../../../spinbutton/">spin button</a>,
+          <a href="../../../combobox/">combobox</a>,
+          and <a href="../../../listbox/">listbox</a>.
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a ten point satisfaction rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -137,7 +144,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                aria-valuemin="0"
                aria-valuenow="0"
                aria-valuemax="10"
-               aria-valuetext="no rating on the 10 point satisfaction scale selected"
+               aria-valuetext="Choose a rating from 1 to 10 where 10 is extremely satisfied"
               aria-labelledby="id-rating-label">
             
 
@@ -195,16 +202,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <h2>Accessibility Features</h2>
         <ul>
           <li>
-            To ensure assistive technology users correctly perceive the maximum slider value, this example uses the <code>aria-valuetext</code> property to communicate both the current and maximum values.
+            To ensure assistive technology users correctly understand the meaning of the current value, this example uses the
+            <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference">aria-valuetext</a>
+            property to communicate the current value, maximum value, and the meaning of the maximum value (<q>Extremely Satisfied</q>).
             However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in <code>aria-valuetext</code> only when the slider is initialized and when the thumb loses keyboard focus.
           </li>
-          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
+          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and a rating value has not yet been set.</li>
           <li>
-            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
-            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
+            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders is synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
+            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> element.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
-            Some browsers do not use <code>auto</code> for the default value.</li>
+            Some browsers do not use <code>auto</code> for the default value.
+          </li>
         </ul>
       </section>
 
@@ -250,11 +260,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value, unacceptable.</td>
+              <td>Sets slider to its minimum value, extremely dissatisfied.</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value, completely satisfied.</td>
+              <td>Sets slider to its maximum value, extremely satisfied.</td>
             </tr>
           </tbody>
         </table></div>
@@ -315,7 +325,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 identifies the slider as having no rating value selected.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 indicates a rating value has not yet been set.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
@@ -337,15 +347,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </td>
               <td>
                 <ul>
-                  <li>A string value that provides a user-friendly name for the current value of the slider -- the level of satisfaction.</li>
-                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seven, seventh value on ten point satisfaction scale</q>.</li>
+                  <li>A string that provides a user-friendly name for the current value.</li>
+                  <li>When the value is <code>0</code>, <code>1</code>, or <code>10</code>, provides the name of the value.</li>
+                  <li>When initialized and when the slider loses focus, the string also includes the number of rating values and the meaning of the maximum value, e.g., <q>seven out of 10 where 10 is extremely satisfied</q>.</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="aria-labelledby">
               <td></td>
               <th scope="row">
-                <code>aria-labelledby="IDREF"</code>
+                <code>aria-labelledby="ID_REFERENCE"</code>
               </th>
               <td>
                 <code>div</code>
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index a14b09b39..9ed8871aa 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -117,10 +117,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href>Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
       </section>
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 6c7870f3c..6ec96567f 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -113,9 +113,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
-          <li><a href>Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/slider-pattern.md b/ARIA/apg/patterns/slider/slider-pattern.md
index fc70b7d53..5972a3c2f 100644
--- a/ARIA/apg/patterns/slider/slider-pattern.md
+++ b/ARIA/apg/patterns/slider/slider-pattern.md
@@ -84,7 +84,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <ul>
           <li><a href="examples/slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="examples/slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="examples/slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
         </ul>
       </section>
diff --git a/_external/aria-practices b/_external/aria-practices
index e2afde9a8..742552260 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit e2afde9a84b21b40bcbb716ed81c8ae702e6a341
+Subproject commit 7425522607facbf79a3a2d5e04cbee0174faf343
diff --git a/_external/data b/_external/data
index f0f93db34..c43ba511e 160000
--- a/_external/data
+++ b/_external/data
@@ -1 +1 @@
-Subproject commit f0f93db3496380c6bf172806063ca668bd0767cd
+Subproject commit c43ba511e8e79326b7271016d9cde979ac65f0f1
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index dd4220265..e27af4393 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -122,37 +122,37 @@ class RatingSlider {
   getValueTextWithMax(value) {
     switch (value) {
       case 0:
-        return 'no rating on the 10 point satisfaction scale selected';
+        return 'Choose a rating from one to ten where 10 is extremely satisfied';
 
       case 1:
-        return 'one, extremely unsatisfied, first value on ten point satisfaction scale';
+        return 'one out of 10, extremely dissatisfied';
 
       case 2:
-        return 'two, second value on ten point satisfaction scale';
+        return 'two out of ten where ten is extremely satisfied';
 
       case 3:
-        return 'three, third value on ten point satisfaction scale';
+        return 'three  out of ten where ten is extremely satisfied';
 
       case 4:
-        return 'four, fourth value on ten point satisfaction scale';
+        return 'four  out of ten where ten is extremely satisfied';
 
       case 5:
-        return 'five, fifth value on ten point satisfaction scale';
+        return 'five  out of ten where ten is extremely satisfied';
 
       case 6:
-        return 'six, sixth value on ten point satisfaction scale';
+        return 'six  out of ten where ten is extremely satisfied';
 
       case 7:
-        return 'seven, seventh value on ten point satisfaction scale';
+        return 'seven  out of ten where ten is extremely satisfied';
 
       case 8:
-        return 'eight, eighth value on ten point satisfaction scale';
+        return 'eight  out of ten where ten is extremely satisfied';
 
       case 9:
-        return 'nine, ninth value on ten point satisfaction scale';
+        return 'nine  out of ten where ten is extremely satisfied';
 
       case 10:
-        return 'ten, extremely satisfied, tenth value on ten point satisfaction scale';
+        return 'ten  out of ten, extremely satisfied';
 
       default:
         break;

From a30ad20b65aaf3b6901f03433b11cff62b6c5058 Mon Sep 17 00:00:00 2001
From: daniel-montalvo <daniel-montalvo@users.noreply.github.com>
Date: Mon, 11 Dec 2023 15:40:15 +0000
Subject: [PATCH 39/41] Commit changed files and submodule updates

---
 .../patterns/radio/examples/radio-rating.md   |  4 +-
 .../slider/examples/slider-color-viewer.md    |  5 ++-
 .../patterns/slider/examples/slider-rating.md | 41 +++++++------------
 .../patterns/slider/examples/slider-seek.md   |  5 ++-
 .../slider/examples/slider-temperature.md     |  5 ++-
 ARIA/apg/patterns/slider/slider-pattern.md    |  2 +-
 _external/aria-practices                      |  2 +-
 .../slider/examples/js/slider-rating.js       | 22 +++++-----
 8 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index d4bbfd5da..a2c7f7087 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -104,7 +104,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
+          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
           <li><a href="../radio-activedescendant/">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
           <li><a href="../radio/">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 4108b78d0..866711104 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -115,8 +115,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
+          <li><a href>Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index 3520a8275..a647151c1 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 5 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -110,18 +110,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   >
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
-          This rating widget employs a slider because of the relatively large number of values on its scale; it provides a ten-point scale.
-          For inputs with seven or fewer choices,another pattern that could be used is radio group as demonstrated by the
-          <a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>.
-          However, when there are more than seven choices, the radio group pattern is less friendly to keyboard and assistive technology users because it does not provide as many ways of easily navigating through choices as other input patterns, such as
-          <a href="../../">slider</a>,
-          <a href="../../../spinbutton/">spin button</a>,
-          <a href="../../../combobox/">combobox</a>,
-          and <a href="../../../listbox/">listbox</a>.
+          This rating widget employs a slider because number of rating values, in general when there are more than seven choices consider using the slider pattern.
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five star rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a ten point satisfaction rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -144,7 +137,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                aria-valuemin="0"
                aria-valuenow="0"
                aria-valuemax="10"
-               aria-valuetext="Choose a rating from 1 to 10 where 10 is extremely satisfied"
+               aria-valuetext="no rating on the 10 point satisfaction scale selected"
               aria-labelledby="id-rating-label">
             
 
@@ -202,19 +195,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <h2>Accessibility Features</h2>
         <ul>
           <li>
-            To ensure assistive technology users correctly understand the meaning of the current value, this example uses the
-            <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference">aria-valuetext</a>
-            property to communicate the current value, maximum value, and the meaning of the maximum value (<q>Extremely Satisfied</q>).
+            To ensure assistive technology users correctly perceive the maximum slider value, this example uses the <code>aria-valuetext</code> property to communicate both the current and maximum values.
             However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in <code>aria-valuetext</code> only when the slider is initialized and when the thumb loses keyboard focus.
           </li>
-          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and a rating value has not yet been set.</li>
+          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
           <li>
-            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders is synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
-            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> element.
+            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
+            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
-            Some browsers do not use <code>auto</code> for the default value.
-          </li>
+            Some browsers do not use <code>auto</code> for the default value.</li>
         </ul>
       </section>
 
@@ -260,11 +250,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value, extremely dissatisfied.</td>
+              <td>Sets slider to its minimum value, unacceptable.</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value, extremely satisfied.</td>
+              <td>Sets slider to its maximum value, completely satisfied.</td>
             </tr>
           </tbody>
         </table></div>
@@ -325,7 +315,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 indicates a rating value has not yet been set.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 identifies the slider as having no rating value selected.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
@@ -347,16 +337,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </td>
               <td>
                 <ul>
-                  <li>A string that provides a user-friendly name for the current value.</li>
-                  <li>When the value is <code>0</code>, <code>1</code>, or <code>10</code>, provides the name of the value.</li>
-                  <li>When initialized and when the slider loses focus, the string also includes the number of rating values and the meaning of the maximum value, e.g., <q>seven out of 10 where 10 is extremely satisfied</q>.</li>
+                  <li>A string value that provides a user-friendly name for the current value of the slider -- the level of satisfaction.</li>
+                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seven, seventh value on ten point satisfaction scale</q>.</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="aria-labelledby">
               <td></td>
               <th scope="row">
-                <code>aria-labelledby="ID_REFERENCE"</code>
+                <code>aria-labelledby="IDREF"</code>
               </th>
               <td>
                 <code>div</code>
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index 9ed8871aa..a14b09b39 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -117,9 +117,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
+          <li><a href>Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
       </section>
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 6ec96567f..6c7870f3c 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -113,8 +113,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
-          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
+          <li><a href>Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/slider-pattern.md b/ARIA/apg/patterns/slider/slider-pattern.md
index 5972a3c2f..fc70b7d53 100644
--- a/ARIA/apg/patterns/slider/slider-pattern.md
+++ b/ARIA/apg/patterns/slider/slider-pattern.md
@@ -84,7 +84,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <ul>
           <li><a href="examples/slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="examples/slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
+          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
           <li><a href="examples/slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
         </ul>
       </section>
diff --git a/_external/aria-practices b/_external/aria-practices
index 742552260..e2afde9a8 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 7425522607facbf79a3a2d5e04cbee0174faf343
+Subproject commit e2afde9a84b21b40bcbb716ed81c8ae702e6a341
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index e27af4393..dd4220265 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -122,37 +122,37 @@ class RatingSlider {
   getValueTextWithMax(value) {
     switch (value) {
       case 0:
-        return 'Choose a rating from one to ten where 10 is extremely satisfied';
+        return 'no rating on the 10 point satisfaction scale selected';
 
       case 1:
-        return 'one out of 10, extremely dissatisfied';
+        return 'one, extremely unsatisfied, first value on ten point satisfaction scale';
 
       case 2:
-        return 'two out of ten where ten is extremely satisfied';
+        return 'two, second value on ten point satisfaction scale';
 
       case 3:
-        return 'three  out of ten where ten is extremely satisfied';
+        return 'three, third value on ten point satisfaction scale';
 
       case 4:
-        return 'four  out of ten where ten is extremely satisfied';
+        return 'four, fourth value on ten point satisfaction scale';
 
       case 5:
-        return 'five  out of ten where ten is extremely satisfied';
+        return 'five, fifth value on ten point satisfaction scale';
 
       case 6:
-        return 'six  out of ten where ten is extremely satisfied';
+        return 'six, sixth value on ten point satisfaction scale';
 
       case 7:
-        return 'seven  out of ten where ten is extremely satisfied';
+        return 'seven, seventh value on ten point satisfaction scale';
 
       case 8:
-        return 'eight  out of ten where ten is extremely satisfied';
+        return 'eight, eighth value on ten point satisfaction scale';
 
       case 9:
-        return 'nine  out of ten where ten is extremely satisfied';
+        return 'nine, ninth value on ten point satisfaction scale';
 
       case 10:
-        return 'ten  out of ten, extremely satisfied';
+        return 'ten, extremely satisfied, tenth value on ten point satisfaction scale';
 
       default:
         break;

From 8fc56067284a95071acee32fea46a5f12a9e92f7 Mon Sep 17 00:00:00 2001
From: daniel-montalvo <daniel-montalvo@users.noreply.github.com>
Date: Sun, 17 Dec 2023 22:00:03 +0000
Subject: [PATCH 40/41] Commit changed files and submodule updates

---
 .../patterns/radio/examples/radio-rating.md   |  4 +-
 .../slider/examples/slider-color-viewer.md    |  5 +--
 .../patterns/slider/examples/slider-rating.md | 42 ++++++++++++-------
 .../patterns/slider/examples/slider-seek.md   |  5 +--
 .../slider/examples/slider-temperature.md     |  5 +--
 ARIA/apg/patterns/slider/slider-pattern.md    |  2 +-
 _external/aria-practices                      |  2 +-
 .../slider/examples/js/slider-rating.js       | 22 +++++-----
 8 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/ARIA/apg/patterns/radio/examples/radio-rating.md b/ARIA/apg/patterns/radio/examples/radio-rating.md
index a2c7f7087..d4bbfd5da 100644
--- a/ARIA/apg/patterns/radio/examples/radio-rating.md
+++ b/ARIA/apg/patterns/radio/examples/radio-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/radio/examples/radio-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/22'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -104,7 +104,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+          <li><a href="../../../slider/examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../radio-activedescendant/">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
           <li><a href="../radio/">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
index 866711104..4108b78d0 100644
--- a/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
+++ b/ARIA/apg/patterns/slider/examples/slider-color-viewer.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-color-viewer/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 24 July 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -115,9 +115,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
-          <li><a href>Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/examples/slider-rating.md b/ARIA/apg/patterns/slider/examples/slider-rating.md
index a647151c1..1a26fe607 100644
--- a/ARIA/apg/patterns/slider/examples/slider-rating.md
+++ b/ARIA/apg/patterns/slider/examples/slider-rating.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-rating/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 5 December 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 17 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -110,11 +110,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   >
         <p>
           Following is an example of a rating input that demonstrates the <a href="../../">Slider Pattern</a>.
-          This rating widget employs a slider because number of rating values, in general when there are more than seven choices consider using the slider pattern.
+          This rating widget employs a slider because it enables users to choose from ten rating values, which is a relatively large number of choices for users to navigate.
+          For inputs with seven or fewer choices, another pattern that could be used is radio group as demonstrated by the
+          <a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>.
+          However, when there are more than seven choices, other patterns provide additional keyboard commands that significantly increase efficiency for users who rely on keyboard navigation to perceive options and make a selection.
+          These include
+          <a href="../../">slider</a>,
+          <a href="../../../spinbutton/">spin button</a>,
+          <a href="../../../combobox/">combobox</a>,
+          and <a href="../../../listbox/">listbox</a>.
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a ten point satisfaction rating scale.</li>
+          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
@@ -137,7 +145,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
                aria-valuemin="0"
                aria-valuenow="0"
                aria-valuemax="10"
-               aria-valuetext="no rating on the 10 point satisfaction scale selected"
+               aria-valuetext="Choose a rating from 1 to 10 where 10 is extremely satisfied"
               aria-labelledby="id-rating-label">
             
 
@@ -195,16 +203,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <h2>Accessibility Features</h2>
         <ul>
           <li>
-            To ensure assistive technology users correctly perceive the maximum slider value, this example uses the <code>aria-valuetext</code> property to communicate both the current and maximum values.
+            To ensure assistive technology users correctly understand the meaning of the current value, this example uses the
+            <a href="https://w3c.github.io/aria/#aria-valuetext" class="property-reference">aria-valuetext</a>
+            property to communicate the current value, maximum value, and the meaning of the maximum value (<q>Extremely Satisfied</q>).
             However, since repeating the maximum value every time the slider value changes is potentially distracting, the maximum value is included in <code>aria-valuetext</code> only when the slider is initialized and when the thumb loses keyboard focus.
           </li>
-          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and no rating value has been selected.</li>
+          <li>To highlight the interactive nature of the satisfaction rating, a focus ring appears around the group of rating options when the slider has focus and a rating value has not yet been set.</li>
           <li>
-            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
-            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> elements.
+            To ensure the borders of the rating values and focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders is synchronized with the color of the text content using a CSS media query selector  (e.g. <code>@media (forced-colors: active)</code>) .
+            For example, the color of the rating value borders is set to match the link foreground color of high contrast mode text by specifying the CSS <code>canvas</code> and <code>linkText</code> values for the <code>stroke</code> and <code>fill</code> properties of each inline SVG <code>rect</code> and <code>text</code> element.
             If specific colors were used to specify the <code>stroke</code> and <code>fill</code> properties, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.<br>
             Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to the value <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast modes.
-            Some browsers do not use <code>auto</code> for the default value.</li>
+            Some browsers do not use <code>auto</code> for the default value.
+          </li>
         </ul>
       </section>
 
@@ -250,11 +261,11 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
             </tr>
             <tr data-test-id="key-home">
               <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value, unacceptable.</td>
+              <td>Sets slider to its minimum value, extremely dissatisfied.</td>
             </tr>
             <tr data-test-id="key-end">
               <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value, completely satisfied.</td>
+              <td>Sets slider to its maximum value, extremely satisfied.</td>
             </tr>
           </tbody>
         </table></div>
@@ -315,7 +326,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               <td>
                 <code>div</code>
               </td>
-              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 identifies the slider as having no rating value selected.</td>
+              <td>Specifies the minimum value of the slider.  <br>NOTE: 0 indicates a rating value has not yet been set.</td>
             </tr>
             <tr data-test-id="aria-valuenow">
               <td></td>
@@ -337,15 +348,16 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
               </td>
               <td>
                 <ul>
-                  <li>A string value that provides a user-friendly name for the current value of the slider -- the level of satisfaction.</li>
-                  <li>When initialized, and when the slider loses focus, the string also includes the number of rating values e.g., <q>seven, seventh value on ten point satisfaction scale</q>.</li>
+                  <li>A string that provides a user-friendly name for the current value.</li>
+                  <li>When the value is <code>0</code>, <code>1</code>, or <code>10</code>, provides the name of the value.</li>
+                  <li>When initialized and when the slider loses focus, the string also includes the number of rating values and the meaning of the maximum value, e.g., <q>seven out of 10 where 10 is extremely satisfied</q>.</li>
                 </ul>
               </td>
             </tr>
             <tr data-test-id="aria-labelledby">
               <td></td>
               <th scope="row">
-                <code>aria-labelledby="IDREF"</code>
+                <code>aria-labelledby="ID_REFERENCE"</code>
               </th>
               <td>
                 <code>div</code>
diff --git a/ARIA/apg/patterns/slider/examples/slider-seek.md b/ARIA/apg/patterns/slider/examples/slider-seek.md
index a14b09b39..9ed8871aa 100644
--- a/ARIA/apg/patterns/slider/examples/slider-seek.md
+++ b/ARIA/apg/patterns/slider/examples/slider-seek.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-seek/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -117,10 +117,9 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="../slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href>Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
       </section>
diff --git a/ARIA/apg/patterns/slider/examples/slider-temperature.md b/ARIA/apg/patterns/slider/examples/slider-temperature.md
index 6c7870f3c..6ec96567f 100644
--- a/ARIA/apg/patterns/slider/examples/slider-temperature.md
+++ b/ARIA/apg/patterns/slider/examples/slider-temperature.md
@@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/slider/examples/slider-temperature/
 
 sidebar: true
 
-footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 19 June 2023</p>      </div>    "
+footer: "      <div class='example-page-footer'>        <p><a href='https://github.com/w3c/aria-practices/projects/3'>View issues related to this example</a></p>        <p>Page last updated: 11 December 2023</p>      </div>    "
 
 # Context here: https://github.com/w3c/wai-aria-practices/issues/31
 type_of_guidance: APG
@@ -113,9 +113,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         </p>
         <p>Similar examples include:</p>
         <ul>
-          <li><a href="../../../radio/examples/radio-rating/">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
           <li><a href="../slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
-          <li><a href>Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
+          <li><a href="../slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="../slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
           <li><a href="../../../slider-multithumb/examples/slider-multithumb/">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</li>
         </ul>
diff --git a/ARIA/apg/patterns/slider/slider-pattern.md b/ARIA/apg/patterns/slider/slider-pattern.md
index fc70b7d53..5972a3c2f 100644
--- a/ARIA/apg/patterns/slider/slider-pattern.md
+++ b/ARIA/apg/patterns/slider/slider-pattern.md
@@ -84,7 +84,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
         <ul>
           <li><a href="examples/slider-color-viewer/">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
           <li><a href="examples/slider-temperature/">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+          <li><a href="examples/slider-rating/">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
           <li><a href="examples/slider-seek/">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
         </ul>
       </section>
diff --git a/_external/aria-practices b/_external/aria-practices
index e2afde9a8..140510565 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit e2afde9a84b21b40bcbb716ed81c8ae702e6a341
+Subproject commit 140510565f2485c55493ef34ad86efc42ca68c0e
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index dd4220265..e27af4393 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -122,37 +122,37 @@ class RatingSlider {
   getValueTextWithMax(value) {
     switch (value) {
       case 0:
-        return 'no rating on the 10 point satisfaction scale selected';
+        return 'Choose a rating from one to ten where 10 is extremely satisfied';
 
       case 1:
-        return 'one, extremely unsatisfied, first value on ten point satisfaction scale';
+        return 'one out of 10, extremely dissatisfied';
 
       case 2:
-        return 'two, second value on ten point satisfaction scale';
+        return 'two out of ten where ten is extremely satisfied';
 
       case 3:
-        return 'three, third value on ten point satisfaction scale';
+        return 'three  out of ten where ten is extremely satisfied';
 
       case 4:
-        return 'four, fourth value on ten point satisfaction scale';
+        return 'four  out of ten where ten is extremely satisfied';
 
       case 5:
-        return 'five, fifth value on ten point satisfaction scale';
+        return 'five  out of ten where ten is extremely satisfied';
 
       case 6:
-        return 'six, sixth value on ten point satisfaction scale';
+        return 'six  out of ten where ten is extremely satisfied';
 
       case 7:
-        return 'seven, seventh value on ten point satisfaction scale';
+        return 'seven  out of ten where ten is extremely satisfied';
 
       case 8:
-        return 'eight, eighth value on ten point satisfaction scale';
+        return 'eight  out of ten where ten is extremely satisfied';
 
       case 9:
-        return 'nine, ninth value on ten point satisfaction scale';
+        return 'nine  out of ten where ten is extremely satisfied';
 
       case 10:
-        return 'ten, extremely satisfied, tenth value on ten point satisfaction scale';
+        return 'ten  out of ten, extremely satisfied';
 
       default:
         break;

From 638b3ba567fb3adde1549b54066214a45d4fdbff Mon Sep 17 00:00:00 2001
From: daniel-montalvo <daniel-montalvo@users.noreply.github.com>
Date: Mon, 18 Dec 2023 04:17:51 +0000
Subject: [PATCH 41/41] Commit changed files and submodule updates

---
 _external/aria-practices                                        | 2 +-
 .../patterns/slider/examples/js/slider-rating.js                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_external/aria-practices b/_external/aria-practices
index 140510565..71170a346 160000
--- a/_external/aria-practices
+++ b/_external/aria-practices
@@ -1 +1 @@
-Subproject commit 140510565f2485c55493ef34ad86efc42ca68c0e
+Subproject commit 71170a3465362ee2b31763016e6967bd892430b8
diff --git a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
index e27af4393..4eea74a72 100644
--- a/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
+++ b/content-assets/wai-aria-practices/patterns/slider/examples/js/slider-rating.js
@@ -80,7 +80,7 @@ class RatingSlider {
   getValueText(value) {
     switch (value) {
       case 0:
-        return 'no satisfaction rating selected';
+        return 'Choose a rating from one to ten where 10 is extremely satisfied';
 
       case 1:
         return 'one, extremely dissatisfied';