From b9a28ea0d9306521b577ab33d3a432fe93da079b Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 1 Sep 2024 11:08:58 +0300
Subject: [PATCH] feat(skip-link): href attr

---
 .changeset/slick-ants-cover.md                |  4 ++++
 .changeset/tall-corners-punch.md              | 17 +++++++++++++++
 .../rh-skip-link/demo/href-attribute.html     |  8 +++++++
 elements/rh-skip-link/rh-skip-link.css        | 21 ++++++++++++++++---
 elements/rh-skip-link/rh-skip-link.ts         | 16 ++++++++------
 5 files changed, 57 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/slick-ants-cover.md
 create mode 100644 .changeset/tall-corners-punch.md
 create mode 100644 elements/rh-skip-link/demo/href-attribute.html

diff --git a/.changeset/slick-ants-cover.md b/.changeset/slick-ants-cover.md
new file mode 100644
index 0000000000..aa65ae2c22
--- /dev/null
+++ 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/.changeset/tall-corners-punch.md b/.changeset/tall-corners-punch.md
new file mode 100644
index 0000000000..5845c05642
--- /dev/null
+++ b/.changeset/tall-corners-punch.md
@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-skip-link>`: added optional `href` attribute:
+
+```html
+<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>
+```
+
+is equivalent to:
+
+```html
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+```
+
diff --git a/elements/rh-skip-link/demo/href-attribute.html b/elements/rh-skip-link/demo/href-attribute.html
new file mode 100644
index 0000000000..5854aecaef
--- /dev/null
+++ b/elements/rh-skip-link/demo/href-attribute.html
@@ -0,0 +1,8 @@
+<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>
+
+<h1>Skip link</h1>
+<p>To show the skip link, click the white background and press your tab key.</p>
+
+<script type="module">
+  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
+</script>
diff --git a/elements/rh-skip-link/rh-skip-link.css b/elements/rh-skip-link/rh-skip-link.css
index 57d06323d2..1f04cf6fba 100644
--- a/elements/rh-skip-link/rh-skip-link.css
+++ b/elements/rh-skip-link/rh-skip-link.css
@@ -1,8 +1,17 @@
 #container {
-  display: block !important;
-  position: relative !important;
+  display: block;
+  z-index: 1000;
 }
 
+a#container {
+  position: fixed;
+}
+
+div#container {
+  position: relative;
+}
+
+a,
 ::slotted(a) {
   background-color: var(--rh-color-surface-lightest, #ffffff) !important;
   border-block-start-width: 0 !important;
@@ -31,7 +40,6 @@
   outline: 0 !important;
   overflow: hidden !important;
   padding: 0 !important;
-  position: absolute !important;
   text-decoration: none !important;
   top: -40px !important;
   transform: translateX(-50%) !important;
@@ -40,6 +48,11 @@
   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;
   clip: auto !important;
@@ -52,11 +65,13 @@
   width: auto !important;
 }
 
+a:is(:active, :hover),
 ::slotted(a:is(:active, :hover)) {
   text-decoration: underline !important;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  a,
   ::slotted(a) {
     transition-duration: 0.001ms !important;
   }
diff --git a/elements/rh-skip-link/rh-skip-link.ts b/elements/rh-skip-link/rh-skip-link.ts
index 1f7e383145..50e5255eee 100644
--- a/elements/rh-skip-link/rh-skip-link.ts
+++ b/elements/rh-skip-link/rh-skip-link.ts
@@ -1,6 +1,8 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 
+import { property } from 'lit/decorators/property.js';
+
 import styles from './rh-skip-link.css';
 
 /**
@@ -10,19 +12,21 @@ import styles from './rh-skip-link.css';
  *
  * @summary Skip to the main content of a page
  *
- * @slot - Place an anchor tag with an `href` that targets an ID of the main content on the page.
+ * @slot - An anchor tag targeting the main page content by id hash.
+ *         Or, if the `href` attribute is set, the text of the link.
  */
 @customElement('rh-skip-link')
 export class RhSkipLink extends LitElement {
   static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
   static readonly styles = [styles];
 
+  @property({ reflect: true }) href?: string;
+
   render() {
-    return html`
-      <div id="container">
-        <slot></slot>
-      </div>
-    `;
+    return this.href ?
+        html`<a id="container" href="${this.href}"><slot></slot></a>`
+      : html`<div id="container"><slot></slot></div>`;
   }
 }