feat(skip-link): add <rh-skip-link>

.changeset/slow-drinks-grow.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+Added the `<rh-skip-link>` element.

elements/rh-skip-link/README.md

@@ -0,0 +1,30 @@
+# Skip Link
+
+A skip link is a link that allows the user to skip to a different
+section on the same page. It allows assistive technology users to 
+skip repetitive content listed on every page.
+
+## Installation
+
+If using npm/bundlers:
+
+```bash
+npm install @rhds/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@rhds/elements/rh-skip-link/rh-skip-link.js';
+```
+
+## Usage
+
+Generally, a skip link is placed as the first focusable item on a 
+page and targets the main content of a page. 
+
+```html
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+```

elements/rh-skip-link/demo/demo.css

@@ -0,0 +1,3 @@
+rh-skip-link {
+  /* insert demo styles */
+}

elements/rh-skip-link/demo/rh-skip-link.html

@@ -0,0 +1,11 @@
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+
+<h1>Skip link</h1>
+<p>To show the skip link, click the white background and press your tab key.</p>
+
+<link rel="stylesheet" href="../rh-skip-link-lightdom-shim.css">
+<script type="module">
+  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
+</script>

elements/rh-skip-link/demo/rh-skip-link.js

@@ -0,0 +1 @@
+import '@rhds/elements/rh-skip-link/rh-skip-link.js';

elements/rh-skip-link/docs/00-overview.md

@@ -0,0 +1,19 @@
+## Overview
+{{ tagName | getElementDescription }}
+
+## Sample element
+```html
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+```
+
+## Demo
+{% playground tagName=tagName %}{% endplayground %}
+{% cta href="./demo/", target="_blank" %}View the demo{% endcta %}
+
+## When to use
+  - 
+
+{% repoStatus type="Element" %}
+

elements/rh-skip-link/docs/30-code.md

@@ -0,0 +1,10 @@
+{% renderInstall %}{% endrenderInstall %}
+
+## Usage
+```html
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+```
+
+{% renderCodeDocs hideDescription=true %}{% endrenderCodeDocs %}

elements/rh-skip-link/rh-skip-link-lightdom-shim.css

@@ -0,0 +1,62 @@
+rh-skip-link:not(:defined) {
+  display: block;
+  position: relative;
+}
+
+rh-skip-link:not(:defined) > a {
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+  border-block-start-width: 0;
+  border-block-end:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-inline-start:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-inline-end:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-end-start-radius: var(--rh-border-radius-default, 3px);
+  border-end-end-radius: var(--rh-border-radius-default, 3px);
+  clip: rect(0, 0, 0, 0);
+  color: var(--rh-color-interactive-blue-darker, #0066cc);
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-weight: var(--rh-font-weight-heading-bold, 700);
+  height: 1px;
+  left: 50%;
+  margin: -1px;
+  outline: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-decoration: none;
+  top: -40px;
+  transform: translateX(-50%);
+  transition: top 0.05s ease-in;
+  white-space: nowrap;
+  width: 1px;
+}
+
+rh-skip-link:not(:defined) > a:is(:active, :focus) {
+  border-width: var(--rh-border-width-md, 2px);
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px);
+  top: 0;
+  white-space: inherit;
+  width: auto;
+}
+
+rh-skip-link:not(:defined) > a:is(:active, :hover) {
+  text-decoration: underline;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  rh-skip-link:not(:defined) > a {
+    transition-duration: 0.001ms;
+  }
+}

elements/rh-skip-link/rh-skip-link.css

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+::slotted(a) {
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+  border-block-start-width: 0;
+  border-block-end:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-inline-start:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-inline-end:
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-interactive-on-light, #0066cc);
+  border-end-start-radius: var(--rh-border-radius-default, 3px);
+  border-end-end-radius: var(--rh-border-radius-default, 3px);
+  clip: rect(0, 0, 0, 0);
+  color: var(--rh-color-interactive-blue-darker, #0066cc);
+  font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+  font-weight: var(--rh-font-weight-heading-bold, 700);
+  height: 1px;
+  left: 50%;
+  margin: -1px;
+  outline: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-decoration: none;
+  top: -40px;
+  transform: translateX(-50%);
+  transition: top 0.05s ease-in;
+  white-space: nowrap;
+  width: 1px;
+}
+
+::slotted(a:is(:active, :focus)) {
+  border-width: var(--rh-border-width-md, 2px);
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  padding: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px);
+  top: 0;
+  white-space: inherit;
+  width: auto;
+}
+
+::slotted(a:is(:active, :hover)) {
+  text-decoration: underline;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::slotted(a) {
+    transition-duration: 0.001ms;
+  }
+}

elements/rh-skip-link/rh-skip-link.ts

@@ -0,0 +1,30 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import styles from './rh-skip-link.css';
+
+/**
+ * A skip link is used to skip repetitive content on a page.
+ * It is hidden by default and can be activated by hitting
+ * the "Tab" key after loading/refreshing a page.
+ *
+ * @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.
+ */
+@customElement('rh-skip-link')
+export class RhSkipLink extends LitElement {
+  static readonly styles = [styles];
+
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-skip-link': RhSkipLink;
+  }
+}

elements/rh-skip-link/test/rh-skip-link.e2e.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+
+const tagName = 'rh-skip-link';
+
+test.describe(tagName, () => {
+  test('snapshot', async ({ page }) => {
+    const componentPage = new PfeDemoPage(page, tagName);
+    await componentPage.navigate();
+    await componentPage.snapshot();
+  });
+});

elements/rh-skip-link/test/rh-skip-link.spec.ts

@@ -0,0 +1,51 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { RhSkipLink } from '@rhds/elements/rh-skip-link/rh-skip-link.js';
+
+describe('<rh-skip-link>', function() {
+  describe('simply instantiating', function() {
+    let element: RhSkipLink;
+    it('should upgrade', async function() {
+      element = await createFixture<RhSkipLink>(html`<rh-skip-link></rh-skip-link>`);
+      const klass = customElements.get('rh-skip-link');
+      expect(element)
+        .to.be.an.instanceOf(klass)
+        .and
+        .to.be.an.instanceOf(RhSkipLink);
+    });
+  });
+
+  describe('when the element loads', function() {
+    let element: RhSkipLink;
+    beforeEach(async function() {
+      element = await createFixture<RhSkipLink>(html`
+        <rh-skip-link>
+          <a href="#main-content">
+            Skip to main content
+          </a>
+        </rh-skip-link>
+      `);
+      await element.updateComplete;
+    });
+
+    it('should be accessible', async function() {
+      const snapshot = await a11ySnapshot();
+      expect(snapshot).to.deep.equal({
+        role: 'WebArea',
+        name: '',
+        children: [{ role: 'link', name: 'Skip to main content' }]
+      });
+    });
+
+    describe('when element receives focus', function() {
+      it('should be visible', async function() {
+        element.focus();
+        const elStyles = getComputedStyle(element);
+        expect(elStyles.getPropertyValue('clip')).to.equal('auto');
+        expect(elStyles.getPropertyValue('text-decoration')).to.not.equal('underline');
+        expect(elStyles.getPropertyValue('top')).to.equal('0px');
+      });
+    });
+  });
+});

package.json

@@ -11,6 +11,7 @@
     "./*": "./elements/*"
   },
   "contributors": [
+    "Adam Johnson <adjohnso@redhat.com>",
     "Benny Powers <bennyp@redhat.com>",
     "Brian Ferry <bferry@redhat.com>",
     "Corey Vickery <cvickery@redhat.com>",
@@ -33,6 +34,7 @@
     "!*.{spec,e2e}.ts",
     "elements/*/*.{js,md,map,txt,d.ts}",
     "elements/*/*-lightdom.css",
+    "elements/*/*-lightdom-shim.css",
     "elements/rh-audio-player/i18n/*.json",
     "!elements/*/docs/**/*.{js,html,css,md}",
     "!elements/*/demo/**/*.{js,html,css,md}",