Adjust visually hidden component

umbraco · Oct 3, 2023 · b735ce7 · b735ce7
1 parent 41b2e58
commit b735ce7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -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
@@ -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>`,
+      },
+    },
+  },
+};