Update seo h1 to be accessibly hidden vs visually hidden (#3892)

dylanjeffers · web-flow · commit 18227f3a716b · 2023-08-15T16:58:26.000-07:00
diff --git a/packages/web/scripts/workers-site/index.js b/packages/web/scripts/workers-site/index.js
@@ -135,7 +135,7 @@ class SEOHandlerBody {
     if (!h1) {
       return
     }
-    const h1Tag = `<h1 id="audius-h1" style="visibility:hidden;display:none;">${h1}</h1>`
+    const h1Tag = `<h1 id="audius-h1" style="position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;">${h1}</h1>`
     element.prepend(h1Tag, { html: true })
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,7 @@ class SEOHandlerBody {`
`135`	`135`	`if (!h1) {`
`136`	`136`	`return`
`137`	`137`	`}`
`138`		- const h1Tag = `<h1 id="audius-h1" style="visibility:hidden;display:none;">${h1}</h1>`
	`138`	+ const h1Tag = `<h1 id="audius-h1" style="position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;">${h1}</h1>`
`139`	`139`	`element.prepend(h1Tag, { html: true })`
`140`	`140`	`}`
`141`	`141`	`}`