feat(skip-link): href attr

.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

@@ -3,6 +3,7 @@
   position: relative !important;
 }
 
+a,
 ::slotted(a) {
   background-color: var(--rh-color-surface-lightest, #ffffff) !important;
   border-block-start-width: 0 !important;
@@ -40,6 +41,7 @@
   width: 1px !important;
 }
 
+a:is(:active, :focus),
 ::slotted(a:is(:active, :focus)) {
   border-width: var(--rh-border-width-md, 2px) !important;
   clip: auto !important;
@@ -52,11 +54,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,17 +12,22 @@ 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 id="container">${this.href ? html`
+        <a href="${this.href}"><slot></slot></a>` : html`
+        <slot></slot>`}
       </div>
     `;
   }