Pattern Pages: Show link to "Read This First" just after the H1 on each pattern page (pull #3320)

howard-e · web-flow · commit 457f47a33e27 · 2025-09-02T09:41:49.000-07:00
Resolves issue #3293 by including a link to the "Read This First" practice page at the top of every pattern page, immediately following the H1. Includes an infrastructure update to move control of the read this first content display to the aria-practices content repository from the wai-aria-practices build repo.
diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/dialog-modal/dialog-modal-pattern.html b/content/patterns/dialog-modal/dialog-modal-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/grid/grid-pattern.html b/content/patterns/grid/grid-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/menu-button/menu-button-pattern.html b/content/patterns/menu-button/menu-button-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/menubar/menu-and-menubar-pattern.html b/content/patterns/menubar/menu-and-menubar-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/meter/meter-pattern.html b/content/patterns/meter/meter-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
@@ -13,6 +13,7 @@
     <script src="../shared/js/app.js"></script>
     <script src="../shared/js/filterBySearch.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:true" src="../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <h1>Patterns</h1>
diff --git a/content/patterns/radio/radio-group-pattern.html b/content/patterns/radio/radio-group-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/slider-multithumb/slider-multithumb-pattern.html b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/slider/slider-pattern.html b/content/patterns/slider/slider-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/spinbutton/spinbutton-pattern.html b/content/patterns/spinbutton/spinbutton-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/switch/switch-pattern.html b/content/patterns/switch/switch-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/table/table-pattern.html b/content/patterns/table/table-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/tabs/tabs-pattern.html b/content/patterns/tabs/tabs-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/toolbar/toolbar-pattern.html b/content/patterns/toolbar/toolbar-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/tooltip/tooltip-pattern.html b/content/patterns/tooltip/tooltip-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/treeview/treeview-pattern.html b/content/patterns/treeview/treeview-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/windowsplitter/windowsplitter-pattern.html b/content/patterns/windowsplitter/windowsplitter-pattern.html
@@ -11,6 +11,7 @@
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:false" src="../../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/practices.html b/content/practices/practices.html
@@ -12,6 +12,7 @@
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
+    <script data-read-this-first="showImage:true" src="../shared/js/read-this-first.js"></script>
   </head>
   <body>
     <h1>Practices</h1>
diff --git a/content/shared/js/read-this-first.js b/content/shared/js/read-this-first.js
diff --git a/content/shared/templates/read-this-first.html b/content/shared/templates/read-this-first.html
