From 1357f78898a01945540138518673da63568c8fc6 Mon Sep 17 00:00:00 2001
From: German Panov <german.panov.2018@mail.ru>
Date: Mon, 22 Apr 2024 17:46:38 +0300
Subject: [PATCH] fix(kit): redesign focus to focus-visible in `TuiAccordion`
 (#7285)

---
 projects/core/styles/theme/variables.less                 | 2 +-
 .../accordion/accordion-item/accordion-item.component.ts  | 4 ----
 .../accordion/accordion-item/accordion-item.style.less    | 8 ++++----
 .../accordion/accordion-item/accordion-item.template.html | 1 -
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/projects/core/styles/theme/variables.less b/projects/core/styles/theme/variables.less
index 943b1c22b358..02d2cd4ed3c9 100644
--- 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
index af58fe68b730..ae0ac4fa02cc 100644
--- 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
index f0ac51133816..0c212ad0dd96 100644
--- 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
index 5c0beaa0ae53..335cf55e49d9 100644
--- 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"