fix: add focus style to checkbox

shopware · Oct 15, 2024 · 44b1e1e · 44b1e1e
1 parent 78e08dc
commit 44b1e1e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/dry-dancers-boil.md b/.changeset/dry-dancers-boil.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add focus styles for checkbox
diff --git a/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue b/packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue
@@ -292,6 +292,12 @@ export default defineComponent({
       height: 16px;
       position: relative;
 
+      &:focus-within {
+        outline: 2px solid var(--color-border-brand-selected);
+        outline-offset: 2px;
+        border-radius: var(--border-radius-checkbox);
+      }
+
       & input[type="checkbox"] {
         opacity: 0;
         display: block;