Add support for experimental content (#310)

* Add support for experimental content * Add required attribute for experimental content * Update based on latest aria-practice 'experimental-content' branchh * Sync submodules --------- Co-authored-by: Stalgia Grigg <stalgia@bocoup.com>
w3c · Jun 17, 2024 · c2fec91 · c2fec91
1 parent e2b1d18
commit c2fec91
Showing 6 changed files with 38 additions and 11 deletions.
diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md
@@ -67,6 +67,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
     <ul>
       <li><a href="#examples_by_role_label">Examples by Role</a></li>
       <li><a href="#examples_by_props_label">Examples by Properties and States</a></li>
+
     </ul>
     <section id="examples_by_roles">
       <h2 id="examples_by_role_label">Examples by Role</h2>
@@ -949,6 +950,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
           </tr></tbody>
       </table>
     </section>
+
   </div>
 
 

diff --git a/_external/aria-practices b/_external/aria-practices
diff --git a/_external/data b/_external/data
diff --git a/content-assets/wai-aria-practices/shared/js/app.js b/content-assets/wai-aria-practices/shared/js/app.js
@@ -20,14 +20,20 @@
     // Determine we are on an example page
     if (!document.location.href.match(/examples\/[^/]+\.html/)) return;
 
+    const isExperimental =
+      document.querySelector('main')?.getAttribute('data-content-phase') ===
+      'experimental';
+
+    const usageWarningLink = isExperimental
+      ? '/templates/experimental-example-usage-warning.html'
+      : '/templates/example-usage-warning.html';
+
     // Generate the usage warning link using app.js link as a starting point
     const scriptSource = document
       .querySelector('[src$="app.js"]')
       .getAttribute('src');
-    const fetchSource = scriptSource.replace(
-      '/js/app.js',
-      '/templates/example-usage-warning.html'
-    );
+
+    const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink);
 
     // Load and parse the usage warning and insert it before the h1
     const html = await (await fetch(fetchSource)).text();

diff --git a/scripts/pre-build/library/determineContentType.js b/scripts/pre-build/library/determineContentType.js
@@ -45,7 +45,10 @@ const determineContentType = (sourcePath) => {
   }
   if (
     sourcePath.endsWith("shared/templates/read-this-first.html") ||
-    sourcePath.endsWith("shared/templates/example-usage-warning.html")
+    sourcePath.endsWith("shared/templates/example-usage-warning.html") ||
+    sourcePath.endsWith(
+      "shared/templates/experimental-example-usage-warning.html"
+    )
   ) {
     return "template";
   }

diff --git a/scripts/pre-build/library/transformExample.js b/scripts/pre-build/library/transformExample.js
@@ -9,8 +9,14 @@ const wrapTablesWithResponsiveDiv = require("./wrapTablesWithResponsiveDiv");
 const removeConflictingCss = require("./removeConflictingCss");
 const getExampleLastModifiedDate = require("./getExampleLastModifiedDate");
 
-const loadNotice = async () => {
-  const relativePath = "content/shared/templates/example-usage-warning.html";
+const loadNoticeCommon = async ({ isExperimental }) => {
+  let relativePath;
+  if (isExperimental) {
+    relativePath =
+      "content/shared/templates/experimental-example-usage-warning.html";
+  } else {
+    relativePath = "content/shared/templates/example-usage-warning.html";
+  }
   const templateSourcePath = path.resolve(sourceRoot, relativePath);
   const noticeContent = await fs.readFile(templateSourcePath, {
     encoding: "utf8",
@@ -28,7 +34,8 @@ const loadNotice = async () => {
   };
 };
 
-const loadedNotice = loadNotice();
+const loadedNotice = loadNoticeCommon({ isExperimental: false });
+const loadedExperimentalNotice = loadNoticeCommon({ isExperimental: true });
 
 const transformExample = async (sourcePath, sourceContents) => {
   const { sitePath, githubPath } = rewriteSourcePath(sourcePath);
@@ -46,7 +53,16 @@ const transformExample = async (sourcePath, sourceContents) => {
 
   await rewriteElementPaths(html, { onSourcePath: sourcePath });
 
-  const getNotice = await loadedNotice;
+  const isExperimental =
+    html.querySelector("main")?.getAttribute("data-content-phase") ===
+    "experimental";
+
+  let getNotice;
+  if (isExperimental) {
+    getNotice = await loadedExperimentalNotice;
+  } else {
+    getNotice = await loadedNotice;
+  }
   const notice = await getNotice(sourcePath);
   html.querySelector("body").insertAdjacentHTML("afterbegin", notice);
+0 −3		.husky/pre-commit
+2,893 −2,543		package-lock.json
+8 −8		package.json
+3 −4		test/util/start-geckodriver.js