feat(core/dfn-index): add prefer-full-spec-title class and localize text (#5073)

Author: marcoscaceres

src/core/dfn-index.js

@@ -6,6 +6,7 @@
  */
 
 import { addId, getIntlData, norm, xmlEscape } from "./utils.js";
+import { biblio } from "./biblio.js";
 import css from "../styles/dfn-index.css.js";
 import { getTermFromElement } from "./xref.js";
 import { html } from "./import-maps.js";
@@ -21,48 +22,56 @@ const localizationStrings = {
     headingExternal: "Terms defined by reference",
     headingLocal: "Terms defined by this specification",
     dfnOf: "definition of",
+    definesFollowing: "defines the following:",
   },
   cs: {
     heading: "Glosář",
     headingExternal: "Termíny definované odkazem",
     headingLocal: "Termíny definované touto specifikací",
     dfnOf: "definice",
+    definesFollowing: "definuje následující:",
   },
   de: {
     heading: "Index",
     headingExternal: "Begriffe, die durch Verweis definiert sind",
     headingLocal: "Begriffe, die in dieser Spezifikation definiert sind",
     dfnOf: "Definition von",
+    definesFollowing: "definiert Folgendes:",
   },
   es: {
     heading: "Índice",
     headingExternal: "Términos definidos por referencia",
     headingLocal: "Términos definidos por esta especificación",
     dfnOf: "definición de",
+    definesFollowing: "define lo siguiente:",
   },
   ja: {
     heading: "索引",
     headingExternal: "参照によって定義された用語",
     headingLocal: "この仕様で定義された用語",
     dfnOf: "の定義",
+    definesFollowing: "以下を定義します:",
   },
   ko: {
     heading: "색인",
     headingExternal: "참조로 정의된 용어",
     headingLocal: "이 명세서에서 정의된 용어",
     dfnOf: "정의",
+    definesFollowing: "다음을 정의합니다:",
   },
   nl: {
     heading: "Index",
     headingExternal: "Termen gedefinieerd door verwijzing",
     headingLocal: "Termen gedefinieerd door deze specificatie",
     dfnOf: "definitie van",
+    definesFollowing: "definieert het volgende:",
   },
   zh: {
     heading: "索引",
     headingExternal: "通过引用定义的术语",
     headingLocal: "由本规范定义的术语",
     dfnOf: "的定义",
+    definesFollowing: "定义以下内容:",
   },
 };
 const l10n = getIntlData(localizationStrings);
@@ -283,10 +292,21 @@ function createExternalTermIndex() {
   const dataSortedBySpec = [...data.entries()].sort(([specA], [specB]) =>
     specA.localeCompare(specB)
   );
+  const indexSection = document.querySelector("section#index");
+  const useFullTitle = !!indexSection?.classList.contains(
+    "prefer-full-spec-title"
+  );
   return html`<ul class="index">
     ${dataSortedBySpec.map(([spec, entries]) => {
+      let citationElement;
+      if (useFullTitle && biblio[spec]?.title) {
+        citationElement = renderInlineCitation(spec, biblio[spec].title);
+      } else {
+        citationElement = renderInlineCitation(spec);
+      }
+
       return html`<li data-spec="${spec}">
-        ${renderInlineCitation(spec)} defines the following:
+        ${citationElement} ${l10n.definesFollowing}
         <ul>
           ${entries
             .sort((a, b) => a.term.localeCompare(b.term))

tests/spec/core/dfn-index-spec.js

@@ -154,6 +154,28 @@ describe("Core — dfn-index", () => {
       expect(secNum.textContent).toBe("§1.");
       expect(item.textContent.endsWith("§1.")).toBeTrue();
     });
+
+    it("prefer-full-spec-title class doesn't affect local terms", async () => {
+      const body = `<section id="content">
+          <h2>Whatever</h2>
+          <p class="test"><dfn>hello</dfn> <dfn>bar</dfn></p>
+        </section>
+        <section id="index" class="prefer-full-spec-title"></section>`;
+      const ops = makeStandardOps(null, body);
+      const doc = await makeRSDoc(ops);
+      const localIndex = doc.getElementById("index-defined-here");
+
+      // Local terms should not be affected by prefer-full-spec-title class
+      // They should still show just the term names without any spec citations
+      const terms = [...localIndex.querySelectorAll("ul.index > li")].map(
+        term => term.textContent.trim().split(/\s/)[0]
+      );
+      expect(terms).toEqual(["bar", "hello"]);
+
+      // Verify no citation elements are present in local terms
+      expect(localIndex.querySelectorAll("cite")).toHaveSize(0);
+      expect(localIndex.querySelectorAll(".bibref")).toHaveSize(0);
+    });
   });
 
   describe("External Terms Index", () => {
@@ -281,6 +303,51 @@ describe("Core — dfn-index", () => {
       expect(termsInDom).toHaveSize(4);
     });
 
+    it("uses localized text for 'defines the following'", async () => {
+      // Test with default language (English)
+      const bySpecs = index.querySelectorAll("ul.index > li");
+      expect(bySpecs[0].textContent.trim()).toMatch(
+        /\[DOM\] defines the following:/
+      );
+
+      // Test with a different language
+      const body = ` <section id="content">
+          <p>{{ Event }}</p>
+        </section>
+        <section id="index"></section>`;
+      const ops = makeStandardOps({ xref: "web-platform" }, body);
+      ops.htmlAttrs = { lang: "es" };
+      const doc = await makeRSDoc(ops);
+      const spanishIndex = doc.getElementById("index-defined-elsewhere");
+      const spanishBySpecs = spanishIndex.querySelectorAll("ul.index > li");
+      if (spanishBySpecs.length > 0) {
+        expect(spanishBySpecs[0].textContent.trim()).toMatch(
+          /\[DOM\] define lo siguiente:/
+        );
+      }
+    });
+
+    it("uses full spec title when prefer-full-spec-title class is present", async () => {
+      const body = ` <section id="content">
+          <p>{{ Event }}</p>
+        </section>
+        <section id="index" class="prefer-full-spec-title"></section>`;
+      const ops = makeStandardOps({ xref: "web-platform" }, body);
+      const doc = await makeRSDoc(ops);
+      const fullTitleIndex = doc.getElementById("index-defined-elsewhere");
+      const bySpecs = fullTitleIndex.querySelectorAll("ul.index > li");
+
+      if (bySpecs.length > 0) {
+        // Should use full title instead of just [DOM]
+        expect(bySpecs[0].textContent.trim()).toMatch(
+          /DOM Standard defines the following:/
+        );
+        expect(bySpecs[0].textContent.trim()).not.toMatch(
+          /^\[DOM\] defines the following:/
+        );
+      }
+    });
+
     it("lists terms in a spec in sorted order", () => {
       const termsInDom = index.querySelectorAll("[data-spec='DOM'] li");
       expect(termsInDom).toHaveSize(4);