fix(skip-link): layout

RedHat-UX · Sep 1, 2024 · 6ba0dbc · 6ba0dbc
1 parent 154644c
commit 6ba0dbc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/.changeset/slick-ants-cover.md b/.changeset/slick-ants-cover.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-skip-link>`: ensure link is always at top of the page, per guidelines
diff --git a/elements/rh-skip-link/rh-skip-link.css b/elements/rh-skip-link/rh-skip-link.css
@@ -1,6 +1,14 @@
 #container {
-  display: block !important;
-  position: relative !important;
+  display: block;
+  z-index: 1000;
+}
+
+a#container {
+  position: fixed;
+}
+
+div#container {
+  position: relative;
 }
 
 a,
@@ -32,7 +40,6 @@ a,
   outline: 0 !important;
   overflow: hidden !important;
   padding: 0 !important;
-  position: absolute !important;
   text-decoration: none !important;
   top: -40px !important;
   transform: translateX(-50%) !important;
@@ -41,6 +48,10 @@ a,
   width: 1px !important;
 }
 
+::slotted(a) {
+  position: fixed !important;
+}
+
 a:is(:active, :focus),
 ::slotted(a:is(:active, :focus)) {
   border-width: var(--rh-border-width-md, 2px) !important;

diff --git a/elements/rh-skip-link/rh-skip-link.ts b/elements/rh-skip-link/rh-skip-link.ts
@@ -24,12 +24,9 @@ export class RhSkipLink extends LitElement {
   @property({ reflect: true }) href?: string;
 
   render() {
-    return html`
-      <div id="container">${this.href ? html`
-        <a href="${this.href}"><slot></slot></a>` : html`
-        <slot></slot>`}
-      </div>
-    `;
+    return this.href ?
+        html`<a id="container" href="${this.href}"><slot></slot></a>`
+      : html`<div id="container"><slot></slot></div>`;
   }
 }