Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Highlight the anchor target #441

Merged
merged 17 commits into from
Sep 13, 2023
Merged

Highlight the anchor target #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9f3c5ae
Highlight the anchor target
gibson042 May 1, 2022
103241b
Update elements.css
michaelficarra Aug 31, 2023
3578de2
Merge branch 'main' into 2022-05-highlight-target
michaelficarra Aug 31, 2023
97b8c23
exclude non-leaf clauses and annexes
michaelficarra Aug 31, 2023
e3f2c59
for emu-clause nodes that contain other emu-clause nodes, only highli…
michaelficarra Aug 31, 2023
923c59a
add a more subtle persistent indicator to link targets
michaelficarra Aug 31, 2023
50c754d
forgot about emu-eqn
michaelficarra Aug 31, 2023
7b138e0
just use an exclusion list instead
michaelficarra Aug 31, 2023
0d2fa06
handle emu-production like clauses
michaelficarra Aug 31, 2023
a68719d
combine text-decoration
michaelficarra Aug 31, 2023
ca5d17d
split out persistent indicator to a separate PR
michaelficarra Aug 31, 2023
7fcdde9
Merge branch 'main' into 2022-05-highlight-target
michaelficarra Aug 31, 2023
5f0656b
Don't apply a fading highlight to clause-like targets
gibson042 Sep 6, 2023
1592732
Make the fading target-element highlight persistent with focus
gibson042 Sep 6, 2023
843c97d
Make <dfn> elements capable of persistent focus-associated highlighting
gibson042 Sep 6, 2023
f7027b1
Remove ramp-up from the target highlighting animation for better tab-…
gibson042 Sep 6, 2023
1adf9e6
Merge branch 'main' into 2022-05-highlight-target
bakkot Sep 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions css/elements.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions src/Dfn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
12 changes: 6 additions & 6 deletions test/baselines/generated-reference/autolinking.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions test/baselines/generated-reference/dfn.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion test/baselines/generated-reference/oldids.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion test/baselines/generated-reference/optional-parts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down