Sources "Read This First, No ARIA is better than Bad ARIA" banner from APG

.gitmodules

@@ -1,7 +1,7 @@
 [submodule "_external/aria-practices"]
 	path = _external/aria-practices
 	url = https://github.com/w3c/aria-practices.git
-	branch = main
+	branch = read-this-first-at-source
 [submodule "_external/data"]
 	path = _external/data
 	url = https://github.com/w3c/wai-website-data.git

ARIA/apg/patterns/accordion/accordion-pattern.md

@@ -146,4 +146,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/alert/alert-pattern.md

@@ -102,4 +102,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/alertdialog/alertdialog-pattern.md

@@ -108,4 +108,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md

@@ -97,4 +97,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/button/button-pattern.md

@@ -154,4 +154,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/carousel/carousel-pattern.md

@@ -233,4 +233,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/checkbox/checkbox-pattern.md

@@ -122,4 +122,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/combobox/combobox-pattern.md

@@ -509,4 +509,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md

@@ -209,4 +209,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/disclosure/disclosure-pattern.md

@@ -110,4 +110,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/feed/feed-pattern.md

@@ -180,4 +180,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/grid/grid-pattern.md

@@ -468,4 +468,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/landmarks/landmarks-pattern.md

@@ -113,4 +113,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/link/link-pattern.md

@@ -98,4 +98,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/listbox/listbox-pattern.md

@@ -316,4 +316,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/menu-button/menu-button-pattern.md

@@ -118,4 +118,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md

@@ -292,4 +292,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/meter/meter-pattern.md

@@ -113,4 +113,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/patterns.md

@@ -52,17 +52,6 @@ lang: en
 <div>
 
 
-    <div class="read-this-first">
-      <div class="text">
-        <img src="../../../content-images/wai-aria-practices/images/read-this-first.svg" width="178" alt="Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand">
-        <h2>Read This First</h2>
-        <p>
-          No ARIA is better than Bad ARIA. Before using any ARIA, <a href="../practices/read-me-first/" aria-label="Read this to understand why no ARIA is better than bad ARIA">read this to understand why</a>.
-        </p>
-      </div>
-    </div>
-
-
 
     <section class="pattern-filter-section">
       <h2>Filter Patterns</h2>
@@ -486,4 +475,8 @@ lang: en
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:true"
+></script>
 

ARIA/apg/patterns/radio/radio-group-pattern.md

@@ -181,4 +181,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md

@@ -129,4 +129,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/slider/slider-pattern.md

@@ -133,4 +133,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/spinbutton/spinbutton-pattern.md

@@ -150,4 +150,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/switch/switch-pattern.md

@@ -129,4 +129,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/table/table-pattern.md

@@ -140,4 +140,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/tabs/tabs-pattern.md

@@ -187,4 +187,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/toolbar/toolbar-pattern.md

@@ -168,4 +168,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/tooltip/tooltip-pattern.md

@@ -108,4 +108,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/treegrid/treegrid-pattern.md

@@ -370,4 +370,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/treeview/treeview-pattern.md

@@ -327,4 +327,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md

@@ -144,4 +144,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:false"
+></script>
 

ARIA/apg/practices/practices.md

@@ -51,17 +51,6 @@ lang: en
 <div>
 
 
-    <div class="read-this-first">
-      <div class="text">
-        <img src="../../../content-images/wai-aria-practices/images/read-this-first.svg" width="178" alt="Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand">
-        <h2>Read This First</h2>
-        <p>
-          No ARIA is better than Bad ARIA. Before using any ARIA, <a href="read-me-first/" aria-label="Read this to understand why no ARIA is better than bad ARIA">read this to understand why</a>.
-        </p>
-      </div>
-    </div>
-
-
 
     <ul class="tiles">
       <li class="tile">
@@ -148,4 +137,8 @@ lang: en
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
+<script
+  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
+  data-read-this-first="showImage:true"
+></script>