From b735ce7ef8c6fad007bc75dcbff74005998258a7 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 3 Oct 2023 09:13:47 +0200
Subject: [PATCH] Adjust visually hidden component

---
 .../lib/uui-visually-hidden.element.ts         | 18 ++++++++++++------
 .../lib/uui-visually-hidden.story.ts           | 13 +++++++++++++
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/uui-visually-hidden/lib/uui-visually-hidden.element.ts b/packages/uui-visually-hidden/lib/uui-visually-hidden.element.ts
index 813d43d09..c2a4fd754 100644
--- a/packages/uui-visually-hidden/lib/uui-visually-hidden.element.ts
+++ b/packages/uui-visually-hidden/lib/uui-visually-hidden.element.ts
@@ -8,16 +8,22 @@ import { css, html, LitElement } from 'lit';
 export class UUIVisuallyHiddenElement extends LitElement {
       static styles = [
     css`
-      :host {
-        /* Styles goes here */
+      :host(:not(:focus-within)) {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        clip: rect(0 0 0 0) !important;
+        clip-path: inset(50%) !important;
+        border: none !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        padding: 0 !important;
       }
     `,
   ];
 
-    render(){
-        return html`
-            Markup goes here
-        `;
+    render() {
+        return html`<slot></slot>`;
     }
 }
 
diff --git a/packages/uui-visually-hidden/lib/uui-visually-hidden.story.ts b/packages/uui-visually-hidden/lib/uui-visually-hidden.story.ts
index 417743c0d..9b3b8f9d0 100644
--- a/packages/uui-visually-hidden/lib/uui-visually-hidden.story.ts
+++ b/packages/uui-visually-hidden/lib/uui-visually-hidden.story.ts
@@ -22,3 +22,16 @@ export default meta;
 type Story = StoryObj<UUIVisuallyHiddenElement>;
 
 export const Overview: Story = {};
+
+export const SkipNavigation: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-visually-hidden>
+          <a href="#">Skip to main content</a>
+        </uui-visually-hidden>`,
+      },
+    },
+  },
+};
\ No newline at end of file