Highlight the anchor target (#441)

Author: gibson042

css/elements.css

@@ -769,6 +769,24 @@ table.lightweight-table th {
   vertical-align: baseline;
 }
 
+/* for non-clause-like link targets, apply a fading highlight
+   and a persistent focus-associated highlight */
+@keyframes highlight-target-bg {
+  0% {
+    background-color: rgba(249, 241, 172, 1);
+  }
+  100% {
+    background-color: rgba(249, 241, 172, 0)
+  }
+}
+#spec-container :target:not(emu-annex, emu-clause, emu-intro, emu-note, body) {
+  animation: highlight-target-bg 2.5s ease-out;
+}
+#spec-container :target:focus-within:not(:has(:not(a))) {
+  animation: none;
+  background-color: rgba(249, 241, 172, 1);
+}
+
 /* diff styles */
 ins {
   background-color: #e0f8e0;

src/Dfn.ts

@@ -7,6 +7,10 @@ import Builder from './Builder';
 /*@internal*/
 export default class Dfn extends Builder {
   static async enter({ spec, node, clauseStack }: Context) {
+    if (!node.hasAttribute('tabindex')) {
+      node.setAttribute('tabindex', '-1');
+    }
+
     const parentClause = clauseStack[clauseStack.length - 1];
     if (!parentClause) return;
 

test/baselines/generated-reference/autolinking.html

@@ -11,12 +11,12 @@ <h1><span class="secnum">1</span> Autolinking</h1>
   <p>Type, type, <emu-xref aoid="Type"><a href="https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values">Type</a></emu-xref>(), type()</p>
   <p><emu-xref href="#sec-array-constructor"><a href="https://tc39.es/ecma262/#sec-array-constructor">%Array%</a></emu-xref> and %ArrayPrototype% from ES6 should link (but not %Arrayprototype%).</p>
 
-  <p><dfn>Lowercase</dfn></p>
-  <p><dfn>strict mode</dfn></p>
-  <p><dfn>%Percent%</dfn></p>
-  <p><dfn>extra      spaces</dfn></p>
-  <p><dfn>Await</dfn></p>
-  <p><dfn id="variants" variants="vOne, vTwo">Variants</dfn></p>
+  <p><dfn tabindex="-1">Lowercase</dfn></p>
+  <p><dfn tabindex="-1">strict mode</dfn></p>
+  <p><dfn tabindex="-1">%Percent%</dfn></p>
+  <p><dfn tabindex="-1">extra      spaces</dfn></p>
+  <p><dfn tabindex="-1">Await</dfn></p>
+  <p><dfn id="variants" variants="vOne, vTwo" tabindex="-1">Variants</dfn></p>
   <p><emu-eqn id="𝔽" aoid="𝔽" class="inline">𝔽(<var>x</var>)</emu-eqn></p>
 </emu-clause>
 <emu-clause id="sec-bar">

test/baselines/generated-reference/dfn.html

@@ -14,9 +14,9 @@ <h1>Intro</h1>
 <emu-clause id="sec-dfn">
   <h1><span class="secnum">1</span> dfn</h1>
 
-  <p>The term <dfn>dfn</dfn> means the dfn tag. Other mentions of dfn in this clause should not be auto-linked.</p>
+  <p>The term <dfn tabindex="-1">dfn</dfn> means the dfn tag. Other mentions of dfn in this clause should not be auto-linked.</p>
 
-  <p>Terms with ids are called <dfn id="identifiers">id dfns</dfn>. Since this dfn has an id, other occurences
+  <p>Terms with ids are called <dfn id="identifiers" tabindex="-1">id dfns</dfn>. Since this dfn has an id, other occurences
   of <emu-xref href="#identifiers" id="_ref_1"><a href="#identifiers">id dfns</a></emu-xref> may autolink.</p>
 
   <emu-clause id="sec-dfn-subclause">

test/baselines/generated-reference/oldids.html

@@ -8,7 +8,7 @@
 </ul></div><div id="spec-container">
 <emu-clause id="c1" oldids="old1,old2"><span id="old2"></span><span id="old1"></span>
   <h1><span class="secnum">1</span> c1</h1>
-  <p>This is some <dfn id="content" oldids="olddfn"><span id="olddfn"></span>content</dfn> and such.</p>
+  <p>This is some <dfn id="content" oldids="olddfn" tabindex="-1"><span id="olddfn"></span>content</dfn> and such.</p>
   <emu-clause id="c2" oldids="old3,old4"><span id="old4"></span><span id="old3"></span>
     <h1><span class="secnum">1.1</span> c1.1</h1>
   </emu-clause>

test/baselines/generated-reference/optional-parts.html

@@ -10,7 +10,7 @@
 
 <emu-clause id="conformance">
   <h1><span class="secnum">1</span> Definitions of Normative Optional etc</h1>
-  <p><dfn id="normative-optional">Normative Optional</dfn> is a defined term, as is <dfn id="legacy">Legacy</dfn>. For comparison, "Deprecated" is not.</p>
+  <p><dfn id="normative-optional" tabindex="-1">Normative Optional</dfn> is a defined term, as is <dfn id="legacy" tabindex="-1">Legacy</dfn>. For comparison, "Deprecated" is not.</p>
 </emu-clause>
 
 <emu-clause id="example-normative-optional" normative-optional=""><div class="attributes-tag"><emu-xref href="#normative-optional" id="_ref_0"><a href="#normative-optional">Normative Optional</a></emu-xref></div>