w3c · mcking65 · Jun 30, 2020 · Feb 25, 2020 · Feb 25, 2020 · Feb 25, 2020
diff --git a/examples/js/app.js b/examples/js/app.js
@@ -1,4 +1,59 @@
 (function () {
   // Load syntax highlighting
   hljs.initHighlightingOnLoad();
+
+  // Add support notice to all examples
+  window.addEventListener('DOMContentLoaded', addSupportNotice, false);
+
+  function addSupportNotice() {
+    // The "Example" heading
+    var headings = document.querySelectorAll('h2');
+    var exampleHeading = null;
+    for (var i = 0; i < headings.length; ++i) {
+      var heading = headings[i];
+      if (heading.textContent.trim().match(/^Examples?$/)) {
+        exampleHeading = heading;
+        break;
+      }
+    }
+    if (!exampleHeading) {
+      return;
+    }
+
+    // The #browser_and_AT_support link
+    var supportLink = document.querySelector('a[href$="#browser_and_AT_support"]');
+    if (!supportLink) {
+      return;
+    }
+
+    // Get the right relative URL to the root aria-practices page
+    var urlPrefix = supportLink.getAttribute('href').split('#')[0];
+
+    // Expected outcome '../js/app.js' OR '../../js/app.js'
+    var scriptSource = document.querySelector('[src$="app.js"]').getAttribute('src');
+    // Replace 'app.js' part with 'notice.html'
+    var fetchSource = scriptSource.replace('app.js', 'notice.html');
+
+    fetch(fetchSource)
+    .then(function(response) {
+      // Return notice.html as text
+      return response.text();
+    })
+    .then(function(html) {
+      // Parse response as text/html
+      var parser = new DOMParser();
+      return parser.parseFromString(html, "text/html");
+    })
+    .then(function(doc) {
+      // Get the details element from the parsed response
+      var noticeElement = doc.querySelector('details');
+      // Rewrite links with the right urlPrefix
+      var links = doc.querySelectorAll('a[href^="/#"]');
+      for (var i = 0; i < links.length; ++i) {
+        links[i].pathname = urlPrefix;
+      }
+      // Insert the support notice after the page's example heading
+      exampleHeading.parentNode.insertBefore(noticeElement, exampleHeading.nextSibling);
+    })
+  }
 }());
diff --git a/examples/js/notice.html b/examples/js/notice.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+<meta charset="utf-8">
+<title>support notice (template)</title>
+<details id="support-notice" class="note">
+    <summary>Important Note About Use of This Example</summary>
+    <p>
+        Note: This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
+    </p>
+    <ul>
+    <li>
+        There may be support gaps in some
+        <a href="/#browser_and_AT_support">browser and assistive technology combinations</a>,
+        especially for <a href="/#mobile_and_touch_support">mobile/touch devices</a>.
+        Testing code based on this example with assistive technologies is essential before considering use in production systems.
+    </li>
+    <li>
+        The <a href="https://github.com/w3c/aria-at/">ARIA-AT project</a>
+        plans to provide measurements of this example's assistive technology support by the end of 2020.
+    </li>
+    <li>
+        Robust accessibility can be further optimized by choosing implementation patterns that
+        <a href="https://www.w3.org/TR/using-aria/#rule1">maximize use of semantic HTML</a>
+        and heeding the warning that
+        <a href="/#no_aria_better_bad_aria">No ARIA is better than Bad ARIA</a>.
+    </li>
+    </ul>
+</details>