Merge pull request #25747 from github/repo-sync

repo sync

lib/render-content/create-processor.js

@@ -22,6 +22,7 @@ import rewriteAssetImgTags from './plugins/rewrite-asset-img-tags.js'
 import useEnglishHeadings from './plugins/use-english-headings.js'
 import wrapInElement from './plugins/wrap-in-element.js'
 import headingLinks from './plugins/heading-links.js'
+import rewriteTheadThScope from './plugins/rewrite-thead-th-scope.js'
 
 // plugins aren't designed to be used more than once,
 // this workaround lets us do that
@@ -29,28 +30,6 @@ import headingLinks from './plugins/heading-links.js'
 const wrapperForImages = () =>
   wrapInElement({ selector: 'ol > li img', wrapper: 'span.procedural-image-wrapper' })
 
-const wrapperForTheadThScope = () =>
-  wrapInElement({
-    selector: 'thead th',
-    wrapper: 'th',
-    // This moves what it finds in the selector inside the wrapper.
-    rewrite: true,
-    wrapperAdditionalAttributes: {
-      scope: 'col',
-    },
-  })
-
-const wrapperForTbodyThScope = () =>
-  wrapInElement({
-    selector: 'thead th',
-    wrapper: 'th',
-    // This moves what it finds in the selector inside the wrapper.
-    rewrite: true,
-    wrapperAdditionalAttributes: {
-      scope: 'col',
-    },
-  })
-
 const wrapperForRowheadersTbody = () =>
   wrapInElement({
     selector: '.rowheaders tbody tr td:first-child',
@@ -78,8 +57,7 @@ export default function createProcessor(context) {
     })
     .use(raw)
     .use(wrapperForImages)
-    .use(wrapperForTheadThScope)
-    .use(wrapperForTbodyThScope)
+    .use(rewriteTheadThScope)
     .use(wrapperForRowheadersTbody)
     .use(rewriteImgSources)
     .use(rewriteAssetImgTags)

lib/render-content/plugins/rewrite-thead-th-scope.js

@@ -0,0 +1,35 @@
+import { visitParents } from 'unist-util-visit-parents'
+
+/**
+ * Where it can mutate the AST to swap from:
+ *
+ *   <thead>
+ *     <tr>
+ *       <th>...</th>
+ *       <th>...</th>
+ *
+ * to:
+ *   <thead>
+ *     <tr>
+ *       <th scope="col">...</th>
+ *       <th scope="col">...</th>
+ *
+ * */
+
+function matcher(node) {
+  return node.type === 'element' && node.tagName === 'th' && !('scope' in node.properties)
+}
+
+function visitor(node, ancestors) {
+  const parent = ancestors.at(-1)
+  if (parent && parent.tagName === 'tr') {
+    const grandParent = ancestors.at(-2)
+    if (grandParent && grandParent.tagName === 'thead') {
+      node.properties.scope = 'col'
+    }
+  }
+}
+
+export default function rewriteTheadThScope() {
+  return (tree) => visitParents(tree, matcher, visitor)
+}

package-lock.json

@@ -161,7 +161,7 @@
         "start-server-and-test": "^2.0.0",
         "typescript": "^5.0.2",
         "unist-util-remove": "^3.1.1",
-        "unist-util-visit-parents": "^5.1.3",
+        "unist-util-visit-parents": "5.1.3",
         "website-scraper": "^5.3.1"
       },
       "engines": {

package.json

@@ -163,7 +163,7 @@
     "start-server-and-test": "^2.0.0",
     "typescript": "^5.0.2",
     "unist-util-remove": "^3.1.1",
-    "unist-util-visit-parents": "^5.1.3",
+    "unist-util-visit-parents": "5.1.3",
     "website-scraper": "^5.3.1"
   },
   "engines": {

tests/browser/browser.js

@@ -2,7 +2,7 @@ import { jest } from '@jest/globals'
 
 jest.useFakeTimers({ legacyFakeTimers: true })
 
-/* global page, browser */
+/* global page */
 describe('homepage', () => {
   jest.setTimeout(60 * 1000)