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 +--- +``: 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 +--- +``: added optional `href` attribute: + +```html +Skip to main content +``` + +is equivalent to: + +```html + + Skip to main content + +``` + diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index fa131fd377..d31a4ce675 100644 --- a/docs/_includes/layouts/base.njk +++ b/docs/_includes/layouts/base.njk @@ -45,7 +45,7 @@ - Skip to main content + Skip to main content {{ content | safe }} 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..51fb6ae2f3 --- /dev/null +++ b/elements/rh-skip-link/demo/href-attribute.html @@ -0,0 +1,10 @@ +Skip to main content + +
+

Skip link

+

To show the skip link, click the white background and press your tab key Link.

+
+ + 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` -
- -
- `; + return this.href ? + html`` + : html`
`; } }