Merge pull request #91 from rebeccacremona/fix-anchor-links

Fix in-page anchors; make consistent.
harvard-lil · Mar 8, 2024 · 8a10b44 · 8a10b44
2 parents 021635d + ce87301
commit 8a10b44
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/cap-case.js b/src/components/cap-case.js
@@ -392,11 +392,12 @@ export default class CapCase extends LitElement {
 		this.handleHashChange();
 	}
 
-	handleHashChange() {
+	async handleHashChange() {
 		const hash = window.location.hash.substring(1); // remove the '#'
 		if (hash) {
 			const element = this.shadowRoot.getElementById(hash);
 			if (element) {
+				await new Promise((r) => setTimeout(r, 100));
 				element.tabIndex = -1;
 				element.scrollIntoView();
 				element.focus();

diff --git a/src/components/cap-jurisdictions.js b/src/components/cap-jurisdictions.js
@@ -126,11 +126,12 @@ export default class CapJurisdictions extends LitElement {
 	 potentially problematic when we have to render case HTML, so I started 
 	 using this pattern here.
 	*/
-	handleHashChange() {
+	async handleHashChange() {
 		const hash = window.location.hash.substring(1); // remove the '#'
 		if (hash) {
 			const element = this.shadowRoot.getElementById(hash);
 			if (element) {
+				await new Promise((r) => setTimeout(r, 100));
 				element.tabIndex = -1;
 				element.scrollIntoView();
 				element.focus();

diff --git a/src/templates/cap-about-page.js b/src/templates/cap-about-page.js
@@ -180,14 +180,15 @@ export class CapAboutPage extends LitElement {
 	 potentially problematic when we have to render case HTML, so I started
 	 using this pattern here.
 	*/
-	handleHashChange() {
+	async handleHashChange() {
 		const hash = window.location.hash.substring(1); // remove the '#'
 		if (hash) {
 			const element = this.shadowRoot.getElementById(hash);
 			if (element) {
-				// wait a beat for things to draw.
-				window.requestAnimationFrame(() => {});
-				window.requestAnimationFrame(() => element.scrollIntoView());
+				await new Promise((r) => setTimeout(r, 100));
+				element.tabIndex = -1;
+				element.scrollIntoView();
+				element.focus();
 			}
 		}
 	}