fix(kit): redesign focus to focus-visible in TuiAccordion (#7285)

taiga-family · Apr 22, 2024 · 1357f78 · 1357f78
1 parent 86b694c
commit 1357f78
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 10 deletions.
diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less
@@ -175,7 +175,7 @@
     --tui-base-07: #ededed;
     --tui-base-08: #f6f6f6;
     --tui-base-09: #fff;
-    --tui-focus: rgba(51, 51, 51, 0.64);
+    --tui-focus: rgba(255, 255, 255, 0.64);
     --tui-secondary: rgba(255, 255, 255, 0.16);
     --tui-secondary-hover: rgba(255, 255, 255, 0.24);
     --tui-secondary-active: rgba(255, 255, 255, 0.4);

diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.component.ts b/projects/kit/components/accordion/accordion-item/accordion-item.component.ts
@@ -102,10 +102,6 @@ export class TuiAccordionItemComponent
         this.updateFocused(focused);
     }
 
-    onFocusVisible(focusVisible: boolean): void {
-        this.updateFocusVisible(focusVisible);
-    }
-
     onRowToggle(): void {
         if (!this.disabled) {
             this.updateOpen(!this.open);

diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.style.less b/projects/kit/components/accordion/accordion-item/accordion-item.style.less
@@ -57,10 +57,6 @@
         :host[data-mode='onLight'] & {
             border-color: var(--tui-text-01);
         }
-
-        :host._focus-visible & {
-            border: 2px solid var(--tui-focus);
-        }
     }
 
     :host:not([data-mode]) & {
@@ -84,6 +80,10 @@
     text-align: left;
     outline: none;
 
+    &:focus-visible {
+        box-shadow: inset 0 0 0 2px var(--tui-focus);
+    }
+
     :host[data-mode='onDark'] & {
         color: var(--tui-text-01-night);
         border-color: var(--tui-base-03);

diff --git a/projects/kit/components/accordion/accordion-item/accordion-item.template.html b/projects/kit/components/accordion/accordion-item/accordion-item.template.html
@@ -14,7 +14,6 @@
         (click)="onRowToggle()"
         (keydown.esc)="onItemKeyDownEsc($event)"
         (tuiFocusedChange)="onFocused($event)"
-        (tuiFocusVisibleChange)="onFocusVisible($event)"
     >
         <span
             automation-id="tui-accordion__item-title"