correct focus styles

umbraco · Nov 18, 2024 · 13e6bc8 · 13e6bc8
1 parent 1eff22c
commit 13e6bc8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
@@ -102,24 +102,18 @@ export class UUICardElement extends SelectOnlyMixin(
         transition: box-shadow 100ms ease-out;
       }
 
-      :host(*) {
-        /* TODO: implement globally shared outline style */
+      :host([selectable]:focus-visible) {
         outline-color: var(--uui-color-focus);
-        outline-offset: 4px;
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
       }
 
-      :host(*) * {
+      :host() * {
         /* TODO: implement globally shared outline style */
         outline-color: var(--uui-color-focus);
       }
 
-      :host(:focus) {
-        outline-color: var(--uui-color-focus);
-        outline-width: var(--uui-card-border-width);
-        outline-style: solid;
-        outline-offset: var(--uui-card-border-width);
-      }
-
       :host([error])::before {
         content: '';
         position: absolute;
@@ -148,6 +142,15 @@ export class UUICardElement extends SelectOnlyMixin(
         color: inherit;
       }
 
+      button:focus,
+      a:focus {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius);
+      }
+
       :host([selectable]) {
         cursor: pointer;
       }

diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts
@@ -77,9 +77,11 @@ export class UUIRefElement extends SelectOnlyMixin(
         transition: --uui-card-before-opacity 120ms;
       }
 
-      :host(:focus) {
-        /** TODO: implement focus outline. */
-        outline-color: #6ab4f0;
+      :host([selectable]:focus-visible) {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
       }
 
       :host([error]) {
@@ -184,6 +186,15 @@ export class UUIRefElement extends SelectOnlyMixin(
         color: inherit;
       }
 
+      button:focus,
+      a:focus {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius);
+      }
+
       slot[name='actions'] {
         display: flex;
         align-items: center;