Try spec diff comments

.github/workflows/preview.yml

@@ -0,0 +1,53 @@
+name: Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "latest"
+
+      - name: Install additional dependencies
+        run: npm install axios yargs
+
+      - name : Install respec globally
+        run : npm install -g respec
+
+      - name: Build site
+        run: bash ./common/script/pr-preview.sh
+
+      - name: Deploy site to Netlify
+        uses: nwtgck/actions-netlify@v3.0
+        with:
+          publish-dir: "./public"
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          deploy-message: ${{ github.event.pull_request.title }}
+          alias: deploy-preview-${{ github.event.number }}
+          enable-pull-request-comment: true
+          enable-commit-comment: true
+          overwrites-pull-request-comment: true
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 5
+
+      - name: Update PR comment with preview and diff links
+        env:
+          SITE_NAME: staging-aria
+        run: |
+          node common/script/prComment.mjs \
+            --repo ${{ github.repository }} \
+            --pull_request_number ${{ github.event.pull_request.number }} \
+            --token ${{ secrets.GITHUB_TOKEN }} \
+            --update_pr

common/script/pr-preview.sh

@@ -3,19 +3,41 @@
 # build relative links to ARIA spec
 find . -maxdepth 1 -type f -name "index.html" -exec sed -i 's|ED: "https://w3c\.github\.io/|ED: "./|g' {} +
 
-# build lins to ARIA from chil specs
+# build lins to ARIA from child specs
 find . -mindepth 2 -type f -name "index.html" -exec sed -i 's|ED: "https://w3c\.github\.io/aria/|ED: "/|g' {} +
 
 # build relative links for child specs
 find . -mindepth 2 -type f -name "index.html" -exec perl -pi -e 's|ED: "https://w3c\.github\.io/(?!aria)|ED: "/|g' {} +
+
+# make output directory
+mkdir -p public/accname
+mkdir -p public/core-aam
+mkdir -p public/dpub-aam
+mkdir -p public/dpub-aria
+mkdir -p public/graphics-aam
+mkdir -p public/graphics-aria
+mkdir -p public/svg-aam
+mkdir -p public/mathml-aam
+mkdir -p public/pdf-aam
+
 # build all specs
-npx respec -s index.html -o index.html --localhost
-npx respec -s accname/index.html -o accname/index.html --localhost
-npx respec -s core-aam/index.html -o core-aam/index.html --localhost
-npx respec -s dpub-aam/index.html -o dpub-aam/index.html --localhost
-npx respec -s dpub-aria/index.html -o dpub-aria/index.html --localhost
-npx respec -s graphics-aam/index.html -o graphics-aam/index.html --localhost
-npx respec -s graphics-aria/index.html -o graphics-aria/index.html --localhost
-npx respec -s svg-aam/index.html -o svg-aam/index.html --localhost
-npx respec -s mathml-aam/index.html -o mathml-aam/index.html --localhost
-npx respec -s pdf-aam/index.html -o pdf-aam/index.html --localhost
+npx respec -s index.html -o public/index.html --localhost --disable-sandbox
+echo "Built ARIA"
+npx respec -s accname/index.html -o public/accname/index.html --localhost --disable-sandbox
+echo "Built AccName"
+npx respec -s core-aam/index.html -o public/core-aam/index.html --localhost --disable-sandbox
+echo "Built Core AAM"
+npx respec -s dpub-aam/index.html -o public/dpub-aam/index.html --localhost --disable-sandbox
+echo "Built DPub AAM"
+npx respec -s dpub-aria/index.html -o public/dpub-aria/index.html --localhost --disable-sandbox
+echo "Built DPUB ARIA"
+npx respec -s graphics-aam/index.html -o public/graphics-aam/index.html --localhost --disable-sandbox
+echo "Built graphics AAM"
+npx respec -s graphics-aria/index.html -o public/graphics-aria/index.html --localhost --disable-sandbox
+echo "Built graphics ARIA"
+npx respec -s svg-aam/index.html -o public/svg-aam/index.html --localhost --disable-sandbox
+echo "Built SVG AAM"
+npx respec -s mathml-aam/index.html -o public/mathml-aam/index.html --localhost --disable-sandbox
+echo "Built mathml-aam"
+npx respec -s pdf-aam/index.html -o public/pdf-aam/index.html --localhost --disable-sandbox
+echo "Built PDF AAM"

common/script/prComment.mjs

@@ -0,0 +1,164 @@
+import axios from "axios";
+import fs from "fs";
+import path from "path";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Parse command-line arguments with fallbacks to GitHub Actions environment variables
+const args = yargs(hideBin(process.argv))
+  .option("repo", {
+    alias: "r",
+    type: "string",
+    description: "GitHub repository in the format owner/repo",
+    default: process.env.GITHUB_REPOSITORY,
+  })
+  .option("pull_request_number", {
+    alias: "pr",
+    type: "number",
+    description: "Pull request number",
+    default: process.env.PR_NUMBER ? parseInt(process.env.PR_NUMBER) : undefined,
+  })
+  .option("token", {
+    alias: "t",
+    type: "string",
+    description: "GitHub personal access token",
+    default: process.env.GITHUB_TOKEN,
+  })
+  .option("build_specs", {
+    alias: "b",
+    type: "boolean",
+    description: "Build specs before generating links",
+    default: true,
+  })
+  .option("update_pr", {
+    alias: "u",
+    type: "boolean",
+    description: "Update the PR description with preview links",
+    default: false,
+  })
+  .option("base_ref", {
+    type: "string",
+    description: "Base branch reference for git diff",
+    default: process.env.GITHUB_BASE_REF || "main",
+  })
+  .help().argv;
+
+const { repo, pull_request_number, token, update_pr, build_specs, base_ref } = args;
+
+async function updatePRDescription(markdownContent) {
+  if (!update_pr) return;
+
+  try {
+    // Get current PR description
+    const prResponse = await axios.get(`https://api.github.com/repos/${repo}/pulls/${pull_request_number}`, {
+      headers: {
+        Authorization: `token ${token}`,
+        Accept: 'application/vnd.github.v3+json'
+      }
+    });
+
+    const currentBody = prResponse.data.body || '';
+
+    // Remove any existing preview section
+    const cleanedBody = currentBody.replace(/🚀 \*\*Netlify Preview\*\*:[\s\S]*?(?=\n\n|\n$|$)/g, '').trim();
+
+    // Create new body with preview links prepended
+    const newBody = `🚀 **Netlify Preview**:
+🔄 **Changed Pages**:
+${markdownContent}
+
+${cleanedBody}`.trim();
+
+    // Update PR description
+    await axios.patch(`https://api.github.com/repos/${repo}/pulls/${pull_request_number}`, {
+      body: newBody
+    }, {
+      headers: {
+        Authorization: `token ${token}`,
+        Accept: 'application/vnd.github.v3+json'
+      }
+    });
+
+    console.log('PR description updated successfully');
+  } catch (error) {
+    console.error('Error updating PR description:', error.message);
+  }
+}
+
+// Define the base URLs
+// Use Netlify site and context to build preview URL
+// Get Netlify site name from environment variable or default to 'wai-aria'
+const netlifySite = process.env.SITE_NAME || 'wai-aria';
+// Get Netlify context from environment variable or default to 'deploy-preview'
+const netlifyContext = process.env.CONTEXT || process.env.NETLIFY_CONTEXT || 'deploy-preview';
+const previewBaseURL = `https://${netlifyContext}-${pull_request_number}--${netlifySite}.netlify.app`;
+// Extract repo owner and name from the repo parameter (format: owner/repo)
+const repoOwner = repo.split('/')[0];
+const repoName = repo.split('/')[1];
+const EDBaseURL = `https://${repoOwner}.github.io/${repoName}`;
+
+async function getChangedFiles() {
+  const { execSync } = await import('child_process');
+  try {
+    // Use git diff to get changed files
+    const diffOutput = execSync(`git diff --name-only origin/${base_ref}...HEAD`, { encoding: 'utf-8' });
+    const files = diffOutput.split('\n').filter(Boolean);
+
+    // Filter to only include index.html files
+    const specSources = files.filter(file => 
+      file === 'index.html' || file.endsWith('/index.html')
+    );
+
+    // Build the Markdown list with preview URLs and diff links
+    const markdownList = specSources.map((file) => {
+      const previewUrl = `${previewBaseURL}/${file}`;
+
+      // Build ED URL based on file path
+      let EDUrl;
+      if (file === 'index.html') {
+        // Main spec: https://w3c.github.io/aria/
+        EDUrl = `${EDBaseURL}/`;
+      } else if (file.endsWith('/index.html')) {
+        // Child specs: https://w3c.github.io/core-aam/ (not /aria/core-aam/)
+        const dirName = file.split('/').slice(-2, -1)[0];
+        EDUrl = `https://w3c.github.io/${dirName}/`;
+      }
+
+      const diffUrl = `https://services.w3.org/htmldiff?doc1=${encodeURIComponent(EDUrl)}&doc2=${encodeURIComponent(previewUrl)}`;
+
+      // Generate spec name based on file path
+      let specName;
+      if (file === 'index.html') {
+        specName = 'ARIA';
+      } else if (file.endsWith('/index.html')) {
+        // Extract directory name for subdirectory index.html files
+        const dirName = file.split('/').slice(-2, -1)[0];
+        specName = dirName;
+      }
+
+      return `- [${specName} preview](${previewUrl}) — [${specName} diff](${diffUrl})`;
+    }).join("\n");
+
+    // Output the Markdown list
+    console.log(markdownList);
+
+    // Optionally, write the output to a file
+    const outputPath = path.join(__dirname, "changed_files.md");
+    fs.writeFileSync(outputPath, markdownList, "utf8");
+    console.log(`Markdown list written to ${outputPath}`);
+
+    // Update PR description if requested
+    await updatePRDescription(markdownList);
+  } catch (error) {
+    console.error("Error fetching changed files:", error.message);
+    process.exit(1);
+  }
+}
+
+(async () => {
+  await getChangedFiles();
+})();

core-aam/index.html

@@ -178,7 +178,7 @@
   <body>
     <section id="abstract">
       <p>
-        This document describes how [=user agents=] should expose semantics of web content languages to <a class="termref">accessibility <abbr title="Application Programming Interfaces">APIs</abbr></a
+        This specification describes how [=user agents=] should expose semantics of web content languages to <a class="termref">accessibility <abbr title="Application Programming Interfaces">APIs</abbr></a
         >. This helps users with disabilities to obtain and interact with information using <a class="termref">assistive technologies</a>. Documenting these mappings promotes interoperable exposure of
         roles, states, properties, and events implemented by accessibility APIs and helps to ensure that this information appears in a manner consistent with author intent.
       </p>

index.html

@@ -193,7 +193,7 @@
     <section id="abstract">
       <p>
         Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with
-        disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and
+        disabilities. This documeeent provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and
         interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive
         technologies in document-level markup. This version adds features new since WAI-ARIA 1.1 [[wai-aria-1.1]] to improve interoperability with assistive technologies to form a more consistent
         accessibility model for [[HTML]] and [[SVG2]]. This specification complements both [[HTML]] and [[SVG2]].