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/elements/rh-skip-link/rh-skip-link.css b/elements/rh-skip-link/rh-skip-link.css index 3920ad9c8c..1f04cf6fba 100644 --- a/elements/rh-skip-link/rh-skip-link.css +++ b/elements/rh-skip-link/rh-skip-link.css @@ -1,6 +1,14 @@ #container { - display: block !important; - position: relative !important; + display: block; + z-index: 1000; +} + +a#container { + position: fixed; +} + +div#container { + position: relative; } a, @@ -32,7 +40,6 @@ a, outline: 0 !important; overflow: hidden !important; padding: 0 !important; - position: absolute !important; text-decoration: none !important; top: -40px !important; transform: translateX(-50%) !important; @@ -41,6 +48,10 @@ a, 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; diff --git a/elements/rh-skip-link/rh-skip-link.ts b/elements/rh-skip-link/rh-skip-link.ts index 56522709e1..50e5255eee 100644 --- a/elements/rh-skip-link/rh-skip-link.ts +++ b/elements/rh-skip-link/rh-skip-link.ts @@ -24,12 +24,9 @@ export class RhSkipLink extends LitElement { @property({ reflect: true }) href?: string; render() { - return html` -
${this.href ? html` - ` : html` - `} -
- `; + return this.href ? + html`` + : html`
`; } }