[docs] Fix HTML validation issues

docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/BasicCode.tsx

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { Code } from './Code';
 
 export function BasicCode() {
-  return <Code fileName="hello.js">{`console.log('Hello, world!');`}</Code>;
+  return <Code fileName="greeting.js">{`console.log('Hello, world!');`}</Code>;
 }

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx

@@ -25,8 +25,8 @@ export function DemoContentLoading(props: ContentLoadingProps<object>) {
 
   return (
     <div>
-      {Object.keys(props.extraSource || {}).map((slug) => (
-        <span key={slug} id={slug} className={styles.fileRefs} />
+      {Object.keys(props.extraSource || {}).map((fileName) => (
+        <span key={fileName} className={styles.fileRefs} />
       ))}
       <div className={styles.container}>
         <div className={styles.demoSection}>{props.component}</div>

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx

@@ -38,8 +38,8 @@ export function DemoContentLoading(props: ContentLoadingProps<object>) {
 
   return (
     <div>
-      {Object.keys(props.extraSource || {}).map((slug) => (
-        <span key={slug} id={slug} className={styles.fileRefs} />
+      {Object.keys(props.extraSource || {}).map((fileName) => (
+        <span key={fileName} className={styles.fileRefs} />
       ))}
       <div className={styles.container}>
         <div className={styles.demoSection}>{props.component}</div>

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx

@@ -24,8 +24,8 @@ export function DemoContentLoading(props: ContentLoadingProps<object>) {
 
   return (
     <div>
-      {Object.keys(props.extraSource || {}).map((slug) => (
-        <span key={slug} id={slug} className={styles.fileRefs} />
+      {Object.keys(props.extraSource || {}).map((fileName) => (
+        <span key={fileName} className={styles.fileRefs} />
       ))}
       <div className={styles.container}>
         <div className={styles.demoSection}>{props.component}</div>

docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/index.ts

@@ -1,4 +1,6 @@
 import { CheckboxBasic } from './CheckboxBasic';
 import { createDemo } from '../../createDemo';
 
-export const DemoCheckboxBasic = createDemo(import.meta.url, CheckboxBasic);
+export const DemoCheckboxBasic = createDemo(import.meta.url, CheckboxBasic, {
+  slug: 'interactive-demo-basic',
+});

docs/app/docs-infra/hooks/use-copier/demos/text-input-copy/TextInputCopy.tsx

@@ -15,6 +15,7 @@ export function TextInputCopy() {
         onChange={(event) => setText(event.target.value)}
         className={styles.input}
         placeholder="Enter text to copy..."
+        aria-label="Text to copy"
       />
       <button type="button" onClick={copy} className={styles.button}>
         {recentlySuccessful ? '✓ Copied!' : 'Copy'}

docs/app/docs-infra/hooks/use-types/demos/TypesTable.tsx

@@ -480,7 +480,7 @@ function ClassDoc(props: { type: EnhancedClassTypeMeta }) {
             {method.returnValue && (
               <div>
                 <strong>Returns:</strong> {method.returnValue}
-                {method.returnValueDescription && <span> — {method.returnValueDescription}</span>}
+                {method.returnValueDescription && <div> — {method.returnValueDescription}</div>}
               </div>
             )}
           </div>

docs/components/Checkbox/index.tsx

@@ -14,14 +14,16 @@ type CheckboxProps = {
 
 export function Checkbox({ defaultChecked, name = 'checkbox', className, style }: CheckboxProps) {
   const [checked, setChecked] = React.useState(defaultChecked);
+  const id = React.useId();
+  const inputId = `${id}-${name}-input`;
   const onChange = React.useCallback(() => {
     setChecked((prev) => !prev);
   }, []);
 
   return (
-    <label className={styles.checkbox} htmlFor={`${name}-input`}>
+    <label className={styles.checkbox} htmlFor={inputId}>
       <input
-        id={`${name}-input`}
+        id={inputId}
         type="checkbox"
         name={name}
         checked={checked}

docs/components/DemoPerformanceContentLoading/DemoPerformanceContentLoading.tsx

@@ -24,8 +24,8 @@ export function DemoPerformanceContentLoading(props: ContentLoadingProps<object>
 
   return (
     <div>
-      {Object.keys(props.extraSource || {}).map((slug) => (
-        <span key={slug} id={slug} className={styles.fileRefs} />
+      {Object.keys(props.extraSource || {}).map((fileName) => (
+        <span key={fileName} className={styles.fileRefs} />
       ))}
       <div className={styles.container}>
         <div className={styles.demoSection}></div>

docs/components/ExpandingBox/ExpandingBox.css

@@ -9,7 +9,7 @@
   min-height: 0;
 }
 
-.expanding-box-content > div:nth-child(2) {
+.expanding-box-content > span:nth-child(2) {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -23,7 +23,7 @@
   view-transition-class: closing;
 }
 
-.expanding-box-content > div:first-child {
+.expanding-box-content > span:first-child {
   position: absolute;
   left: 0;
   right: 0;
@@ -36,11 +36,11 @@
   transition: transform ease-in-out 150ms;
 }
 
-:hover:not(:focus-visible) > .expanding-box-content[data-collapsed='true'] > div:first-child {
+:hover:not(:focus-visible) > .expanding-box-content[data-collapsed='true'] > span:first-child {
   transform: scale(1.04);
 }
 
-.expanding-box-content[data-collapsed='true'] > div:first-child::after {
+.expanding-box-content[data-collapsed='true'] > span:first-child::after {
   content: '';
   display: block;
   position: absolute;
@@ -51,7 +51,7 @@
   view-transition-name: expanding-box-focus-outline;
 }
 
-:focus-visible > .expanding-box-content > div:first-child::after {
+:focus-visible > .expanding-box-content > span:first-child::after {
   content: '';
   outline-color: #8e4ec6;
   outline-offset: 1px;
@@ -60,38 +60,38 @@
   border-radius: 6px;
 }
 
-.expanding-box-content[data-active='true'] > div:first-child {
+.expanding-box-content[data-active='true'] > span:first-child {
   view-transition-name: expanding-box-side-borders;
 }
 
-.expanding-box-content[data-active='true'][data-collapsed='true'] > div:first-child {
+.expanding-box-content[data-active='true'][data-collapsed='true'] > span:first-child {
   view-transition-class: closing;
 }
 
-.expanding-box-content[data-active='true'] > div > :nth-child(1) {
+.expanding-box-content[data-active='true'] > span > :nth-child(1) {
   view-transition-name: expanding-box-main-content;
 }
 
-.expanding-box-content[data-active='true'][data-collapsed='true'] > div > :nth-child(1) {
+.expanding-box-content[data-active='true'][data-collapsed='true'] > span > :nth-child(1) {
   view-transition-class: closing;
 }
 
-.expanding-box-content[data-active='true'] > div > :nth-child(1) .expanding-box-content-right {
+.expanding-box-content[data-active='true'] > span > :nth-child(1) .expanding-box-content-right {
   view-transition-name: expanding-box-main-content-right;
 }
 
 .expanding-box-content[data-active='true'][data-collapsed='true']
-  > div
+  > span
   > :nth-child(1)
   .expanding-box-content-right {
   view-transition-class: closing;
 }
 
-.expanding-box-content[data-active='true'] > div > :nth-child(2) {
+.expanding-box-content[data-active='true'] > span > :nth-child(2) {
   view-transition-name: expanding-box-extra-content;
 }
 
-.expanding-box-content[data-active='true'][data-collapsed='true'] > div > :nth-child(2) {
+.expanding-box-content[data-active='true'][data-collapsed='true'] > span > :nth-child(2) {
   view-transition-class: closing;
 }
 

docs/components/ExpandingBox/ExpandingBox.tsx

@@ -14,35 +14,35 @@ export function ExpandingBox({
 }) {
   return (
     <React.Fragment>
-      <div
+      <span
         className="expanding-box-head"
         data-active={Boolean(isActive)}
         data-collapsed={Boolean(isCollapsed)}
       >
-        <div />
-        <div />
-        <div />
-      </div>
-      <div
+        <span />
+        <span />
+        <span />
+      </span>
+      <span
         className="expanding-box-content"
         data-active={Boolean(isActive)}
         data-collapsed={Boolean(isCollapsed)}
       >
-        <div />
-        <div className={className}>
+        <span />
+        <span className={className}>
           {children}
-          <div className="expanding-box-extra" />
-        </div>
-      </div>
-      <div
+          <span className="expanding-box-extra" />
+        </span>
+      </span>
+      <span
         className="expanding-box-foot"
         data-active={Boolean(isActive)}
         data-collapsed={Boolean(isCollapsed)}
       >
-        <div />
-        <div />
-        <div />
-      </div>
+        <span />
+        <span />
+        <span />
+      </span>
     </React.Fragment>
   );
 }

docs/components/Search/SearchButton.tsx

@@ -14,18 +14,18 @@ export function SearchButton({ onClick, isDialogOpen, enableKeyboardShortcut }:
   return (
     <Button onClick={onClick} className={`${styles.button} ${isDialogOpen ? styles.hidden : ''}`}>
       <ExpandingBox isActive={!isDialogOpen} isCollapsed={true} className={styles.content}>
-        <div className={styles.wrapper}>
-          <div className={styles.buttonContent}>
+        <span className={styles.wrapper}>
+          <span className={styles.buttonContent}>
             <Search className={styles.icon} />
             <span className={styles.text}>Search</span>
-          </div>
+          </span>
           {enableKeyboardShortcut && (
-            <div className={`expanding-box-content-right ${styles.shortcut}`}>
+            <span className={`expanding-box-content-right ${styles.shortcut}`}>
               <kbd className={`${styles.kbd} ${styles.kbdCmd}`}>⌘</kbd>
               <kbd className={styles.kbd}>K</kbd>
-            </div>
+            </span>
           )}
-        </div>
+        </span>
       </ExpandingBox>
     </Button>
   );

docs/components/Search/SearchInput.tsx

@@ -18,6 +18,7 @@ export function SearchInput({ inputRef, onEscapeClick, enableKeyboardShortcut }:
         id="search-input"
         ref={inputRef}
         placeholder="Search"
+        aria-label="Search"
         className={styles.input}
       />
 

docs/scripts/reportBrokenLinks.mts

@@ -8,6 +8,7 @@ async function main() {
     ignoredPaths: [],
     // CSS selectors for content to ignore during link checking
     ignoredContent: [],
+    htmlValidate: true,
   });
 
   process.exit(issues.length);

packages/code-infra/package.json

@@ -111,6 +111,7 @@
     "git-url-parse": "^16.1.0",
     "globals": "^17.4.0",
     "globby": "^16.1.1",
+    "html-validate": "^10.11.2",
     "minimatch": "^10.2.4",
     "node-html-parser": "^7.1.0",
     "open": "^11.0.0",

packages/code-infra/src/brokenLinksChecker/__fixtures__/static-site/index.html

@@ -22,6 +22,7 @@ <h1>Test Site Home</h1>
         <li><a href="/page-with-api-links.html">Page with API Links</a></li>
         <li><a href="/example.md">Example Markdown</a></li>
         <li><a href="/unclosed-tags.html">Page with Unclosed Tags</a></li>
+        <li><a href="/invalid-html.html">Invalid HTML Page</a></li>
       </ul>
     </nav>
   </body>

packages/code-infra/src/brokenLinksChecker/__fixtures__/static-site/invalid-html.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Invalid HTML Page</title>
+  </head>
+  <body>
+    <h1>Invalid HTML</h1>
+    <!-- Duplicate ID (violates no-duplicate-id rule) -->
+    <div id="dup">First</div>
+    <div id="dup">Second</div>
+    <!-- Raw ampersand (violates no-raw-characters rule) -->
+    <p>Tom & Jerry</p>
+  </body>
+</html>