From 1780aa9663a5f5bf0937b6dbd28e959ca2078492 Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Fri, 30 Jan 2026 12:58:35 +0100
Subject: [PATCH] [ACS-10281] a11y fix: Approve step folder control is
 focusable twice (#11589)

* [ACS-10281] a11y fix: Approve step folder control is focusable twice

* [ci:force]

* [ACS-10281] revert to div

* [ACS-10281] a11y fix: Approve step folder control is focusable twice

* fix for e2e's
---
 .../card-view-textitem.component.html                  | 10 +++++-----
 .../card-view-textitem.component.scss                  |  6 +++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index 8c0314f738..3a970e22e6 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -102,14 +102,12 @@
                 />
             </mat-form-field>
         </div>
-        <div
+        <button
+            type="button"
             *ngSwitchCase="'clickableTemplate'"
-            role="button"
             class="adf-textitem-clickable"
             [ngClass]="{ 'adf-property-read-only': isReadonlyProperty }"
             [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-            tabindex="0"
-            (keyup.enter)="clicked()"
             (click)="clicked()"
         >
             <mat-form-field class="adf-property-field adf-card-textitem-field">
@@ -133,11 +131,13 @@
                         'adf-property-value-has-icon-suffix': showClickableIcon
                     }"
                     [placeholder]="property.default"
+                    aria-hidden="true"
                     [attr.aria-label]="property.label | translate"
                     [(ngModel)]="editedValue"
                     (blur)="update()"
                     (keydown.enter)="update()"
                     [disabled]="isReadonlyProperty || !editable"
+                    tabindex="-1"
                     [attr.data-automation-id]="'card-textitem-value-' + property.key"
                     [aria-describedby]="'adf-card-textitem-error-' + property.key"
                 />
@@ -152,7 +152,7 @@
                     <mat-icon class="adf-textitem-icon" [adf-icon]="property?.icon" />
                 </button>
             </mat-form-field>
-        </div>
+        </button>
 
     <mat-error
         *ngIf="isEditable && hasErrors"
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
index 84d440a970..48becf8144 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -53,8 +53,12 @@
     }
 
     .adf-textitem-clickable {
+        background: none;
+        border: none;
+        margin: 0;
         cursor: pointer;
-        padding-top: 3px;
+        width: 100%;
+        padding: 3px 0 0;
 
         .adf-textitem-action:hover {
             color: var(--adf-theme-foreground-text-color);