Highlight the anchor target (#441)

tc39 · Sep 13, 2023 · 4712a9d · 4712a9d
1 parent 65103ee
commit 4712a9d
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 10 deletions.
diff --git a/css/elements.css b/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;

diff --git a/src/Dfn.ts b/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;
 

diff --git a/test/baselines/generated-reference/autolinking.html b/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">

diff --git a/test/baselines/generated-reference/dfn.html b/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">

diff --git a/test/baselines/generated-reference/oldids.html b/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>

diff --git a/test/baselines/generated-reference/optional-parts.html b/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>