feat(skip-link): href attr

.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

.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>
+```
+

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>

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;
   }

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>`;
   }
 }